[모던JS튜토리얼] 형변환, 연산자, 조건문

업데이트: April 3, 2022

카테고리: modernjs

형변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동으로 형 변환된다.

문자형으로 변환

alert 메서드는 매개변수로 문자형을 받는다.
다른 형의 값을 받으면 문자열로 자동 변환된다.

let value = true;
alert(typeof value); //boolean, 묵시적 형변환

String 메서드는 인자를 문자열로 변환한다.

value = String(value); //value = "true", 명시적 형변환
alert(typeof value);

숫자형으로 변환

수학과 관련된 함수와 표현식에서 자동으로 일어난다.

alert("6" / "2"); //3

Number 메서드는 인자를 숫자로 변환한다.

let str = "123";
alert(typeof str); //String

let num = Number(str);
alert(typeof num); //number

문자열 기반 form으로 입력받는 경우, 숫자로 사용하기 위해선 명시적 형변환을 해야한다.
문자열 안에 숫자 외의 값이 들어있으면 NaN(Not a Number)가 반환된다.

let age = Number("asdfasdf123");
alert(age); //NaN 형변환 실패

숫자 형변환 규칙

전달받은 값	형 변환 후
undefined	NaN
true, false	1, 0
string	문자열의 처음과 끝 공백 삭제, 공백 제거 후, 남은 문자열 없으면 0, 아니면 나머지를 숫자로 변환, 변환 실패시, NaN

불린형으로 변환

논리연산 수행 시 발생
Boolean(value)로 명시적 형 변환

규칙 | 자료형 | 결과 |—|— |0, “”, null, undefined, NaN | false |나머지 | true

기본 연산자, 수학

용어

피연산자 연산자가 연산을 수행하는 대상
단항 연산자 피연산자가 하나인 연산자
이항 연산자 피연산자가 두 개인 연산자

let x = 1;

x = -x; //피연산자 x, 단항연산자 -
alert(x);
let y = 2;
alert(x + y); //피연산자 x,y  이항연산자 +

나머지 연산자, 거듭제곱 연산자

나머지 연산자 % a % b는 a를 b로 나눈 나머지를 정수로 반환한다.

거듭제곱 연산자 ** a ** b는 a의 b승이 반환된다.

문자열과 이항연산자

이항 연산자 +는 문자열을 연결한다.

let s = "my" + "string";
alert(s); //mystring

단, 피 연산자 중 하나라도 문자열이면 다른 하나도 문자열로 변경된다.

alert("1" + 2); //3
alert(2 + "1"); //3

다른 연산자들은 그 반대로 이루어진다.

alert(6 - "2"); //4
alert("6" / "2"); //3

단항연산자 +

단항연산자 +는 피연산자가 숫자가 아닌경우에 숫자로 변환한다.

let x = 1;
alert(+x); //1

let y = -2;
laert(+y); //-2

alert(+true); //1
alert(+""); //0

위와같이 Number연산자와 동일한 일을 할 수 있다.(알아보기엔 힘듬)

연산자 우선순위

연산자 우선순위 테이블

위 테이블을 확인하면 자바스크립트의 연산자 우선순위에 대해 알 수 있다.

연산자 우선순위를 명확하게 하기 위해선 괄호를 쓰면 좋다.

할당 연산자

let a = 1;
let b = 2;
let c = 3 - (a = b + 1); //c = 3 - (3)

=은 값을 할당하고, 할당한 값을 반환하는 역할을 한다.

여러 JS라이브러리에서 사용됨
가독성 측면에서 좋지 않음
할당 연산자를 여러개 연결해 체이닝을 할 수 있다…
```
let a, b, c;
a = b = c = 2 + 2;
alert(a); //2
alert(b); //2
alert(c); //2
```
위와같이 여러 변수에 한 번에 값을 할당할 수는 있지만, 가독성 측면에서 좋지않다.

복합 할당 연산자

let n = 2;
n *= 5; //10
n += 2; //4

변수에 연산을 수행하고, 그 결과를 해당 변수에 저장해야할 때 사용.
우선순위는 할당 연산자와 동일하다.

증감 연산자

let counter = 0;
let count = 0;
alert(counter++;)//0
alert(++count)//1

후위형 : 변수의 뒤, 증가/감소 전의 기존 값 반환
전위형 : 변수의 앞, 증가/감소 후의 값 반환

쉼표 연산자

자주 사용되지 않음
자바스크립트 프레임워크에서 사용됨
마지막 표현식의 평가결과만 반환된다.
할당연산자 = 보다 우선순위가 낮다.

let a = (1 + 2, 3 + 4); //7
alert(a);

1 + 2는 평가가 되지만, 결과는 버려진다.
3 + 4만 평가가되어 할당된다.

비교 연산자

불린형 반환

비교 결과값을 불린형으로 반환한다.

alert(2 > 1); //true
alert(2 == 1); //false
alert(2 != 1); //true

문자열 비교

유니코드순으로 문자열을 비교한다.
쉽게 말하면, 사전 뒤쪽의 문자열이 사전 앞쪽의 문자열보다 크다고 판단.

alert("Z" > "A"); // true
alert("Glow" > "Glee"); // true
alert("Bee" > "Be"); // true

다른 형간 비교

비교 값의 자료형이 다르면 숫자로 변환해 비교한다.

alert("2" > 1); //2 > 1
alert("01" == 1); //1 == 1

불린값의 경우, true는 1, false 는 0으로 변환.

alert(true == 1);
alert(false == 0);

일치연산자 ===

동등 연산자 ==로는 자료형과 값을 모두 비교할 수 없다.
그래서 사용되는게 ===일치 연산자인데, 자료형의 동등여부와 값의 비교 모두 수행한다.

alert(0 == false); //true
alert(0 === false); //false

null, undefined 비교

===로 비교
```
alert(null === undefined); //false
```
자료형이 다르다.

==로 비교
```
alert(null == undefined); //true
```
null과 undefined는 동등연산자는 같다고 취급한다.

<, >, <=, >=로 비교

null과 undefined는 숫자형으로 변환된다. null은 0, undefined는 NaN으로 변환된다.
- null과 0 비교
```
alert(null > 0); //false => 0 > 0
alert(null == 0); //false => null == 0
alert(null >= 0); // true => 0 >= 0
```
- null > 0, null >= 0 은 null이 숫자형으로 변환된다.
- 동등연산자는 null을 숫자형으로 변환하지 않는다.
- undefined 비교
```
alert(undefined > 0); //false => NaN > 0
alert(undefined == 0); //false => undefined == 0
alert(undefined >= 0); //false => NaN >= 0
```
- undefined는 비교연산자와 함께 쓰이면 NaN이 되는데, 이때, NaN이 피연산자이면 비교연산자는 항상 false반환.
- undefined는 null, undefined와 같지만 그 이외의 값과는 다르므로 undefined == 0 은 false반환.

if와 ?로 조건처리

if문

if (조건문)
{
    실행할 코드
}

조건문은 불린형으로 변환

if 문은 조건문을 평가하고 결과를 불린값으로 변환한다.
0, “”, null, undefined, NaN 모두 0으로 평가된다.

if ~ else if ~ else절

if (조건문1)
{
    조건문1 true일때
} else if (조건문2)
{
    조건문2 true일때
}
else
{
    조건문1, 조건문2 모두 false
}

조건문이 true이면 코드 블록을 실행한다.
여러 조건을 처리하기위해 else if로 조건문을 줄 수 있다.
if 문에 else절을 붙여주면 그 코드블록은 위의 모든 조건문이 false일때 실행된다.

조건부 연산자 ?

let result = condition ? v1 : v2;

condition을 평가하고, true일때 v1, false면 v2를 반환한다.

다중 조건부 연산자로 복수의 조건을 처리할 수 있다.
가독성을 위해서, 조건부 연산자는 값을 할당하는 간단한 코드에 사용하자.
여러개의 조건을 사용하는 경우, if, else문으로 돌아가자.

논리연산자

boolean값을 조정하는데에 쓰인다.
피연산자는 불린형으로 변환된다.

||(OR)

피연산자 중 하나라도 참이라면 true가 리턴된다.

result = a || b;

가장 왼쪽 피연산자부터 true를 찾는다.
각 피연산자를 불린형으로 변환하고, true면 변환 전 피연산자를 반환
true를 찾지 못하면 마지막 피연산자를 반환

변수, 표현식에서 첫 번째 truthy찾기

let firstname = "";
let lastname = "";
let nickname = "ASDF";
alert(firstname || lastname || nickname || "익명"); //ASDF

단락평가

연산자 왼쪽이 false일때만 명령어를 실행하고자할때 쓰인다.

true || alert("ASDf"); //-
false || alert("tttt"); //"tttt"

&&(AND)

두 개의 피연산자 모두 참일때 true 반환

result = a && b;

가장 왼쪽 피연산자부터 평가
false를 만나면 평가를 멈추고 변환 전 피연산자를 반환
false를 찾지 못하면 마지막 피연산자 반환

||(OR)연산자와 비슷하게 사용된다.

alert(1 && 2 && null && 3); //null
alert(1 && 2 && 3); //3

!(NOT)

!로 만들 수 있다.
인수를 하나 받아서 평가 후에 역을 반환한다.
```
alert(!true); //false
alert(!0); //true
```

!! 두개 연달아 사용해 불린형으로 변환할 수 있다.

alert(!!"not empty"); //true
alert(!!null); //false
alert((Boolean(null); //false
alert(Boolean(null)); //false

논리연산자의 연산순서는 ! -> && -> || 이다.

nulish 병합 연산자 `??`

여러 피연산자 중 값이 확정되어있는 변수를 찾을 수 있다.

let firstname = "";
let lastname = "":
let nickname = "ASDF";
alert(firstname ?? lastname ?? nickname ?? "익명 사용자") //"ASDF"

얼핏보면, 와 하는 역할이 비슷해보이는데,
- 은 첫 번째 truthy 값 반환
- ??은 첫 번째 정의된 값 반환 이런 차이가 있다.
```
let height = 0;
alert(height || 100); //100
alert(height ?? 100); //0
```
밑의 코드는 height에 값이 0으로 define 되어있으므로 그 값인 0을 반환하게된다.

연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮다.
=, ?보다는 먼저 평가되나, 대부분의 연산자보다는 나중에 평가된다.
따라서, 괄호를 추가해 식을 명확히하자

let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50); //100 * 50
alert(area); //5000

와 ??를 동시에 사용하는 것은 금지되어있다.
를 ??와 바꾸면서 만드는 실수를 방지하기위해 명세서에 제약이 추가되었다.

반복문

while

while
```
초기식
while (조건식)
{
    ~반복할 코드~
}
```
```
let i = 0;
while (i < 3) {
  alert(i);
  i++;
}
```
- 조건식이 true일때 반복할 코드가 실행된다.
- 영원히 반복되지 않으려면 조건식이 false가 되도록 반복할 코드 안에서 조정해줘야한다.

do ~ while

초기식
do {
    ~반복할 코드~
} while (조건식)

let i = 0;
do {
  i++;
} while (i < 3);

do ~ while 반복문은 본문을 최소한 1번 실행한다.

for

  for (초기식; 조건식; 변화식)
  {
      반복할 코드
  }

for (let i = 0; i < 3; i++) {
  alert(i);
}

초기식, 조건식, 변화식을 한 줄에 작성할 수 있다.
초기식은 최초에 1번 실행된다.
- 초기식과 변화식은 생략이 가능하다.(가독성 쓰레기)
```
for (; i < 3; i++)
```
```
for (; i < 3; ) {
  alert(i++);
}
```

반복문 컨트롤

break 특정 조건하에 반복문을 탈출해야할때 사용한다.

let sum = 0;
while (true) {
  let value = +prompt("숫자 입력", ""); //아무것도 입력되지 않으면 0
  if (!value) {
    //value가 0이면 탈출
    break;
  }
  sum += value;
}
alert(sum);

continue

for (let i = 0; i < 10; i++) {
  if (i % 2 == 0) {
    //짝수면 for라인으로 돌아감
    continue;
  }
  alert(i);
}

label 여러개의 중첩 반복문을 한 번에 탈출해야할때 사용된다.
플래그를 세우지 않고도 여러개의 반복문을 탈출할 수 있다.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, "");

    // 미입력, cancel시 input = 0;
    if (!input) {
      break outer; //outer 레이블의 반복분을 종료시킴
    }
  }
}
alert("완료!");

switch 문

if문의 여러 조건을 명시적으로 비교할 수 있다.
특정 변수를 다양한 상황에서 비교할 수 있게 해준다.
case와 변수를 비교하면서 일치하면 코드블럭을 실행한다.
break을 만나면 switch문이 종료된다.

찾지 못하면 default를 실행한다.

  switch(x) {
      case 'value' :
          ...
          [break]
      case 'value2' :
          ...
          [break]
      default:
          ...
          [break]
  }

case가 일치할때, break이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행한다.

let a = 3;
switch (a) {
  case 4:
    alert("계산이 맞습니다!");
    break;
  case 3: // (\*) 두 case문을 묶음
  case 5:
    alert("계산이 틀립니다!");
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;
  default:
    alert("계산 결과가 이상하네요.");
}

엘비

형변환

문자형으로 변환

숫자형으로 변환

불린형으로 변환

기본 연산자, 수학

용어

나머지 연산자, 거듭제곱 연산자

문자열과 이항연산자

단항연산자 +

연산자 우선순위

할당 연산자

복합 할당 연산자

증감 연산자

쉼표 연산자

비교 연산자

불린형 반환

문자열 비교

다른 형간 비교

일치연산자 ===

null, undefined 비교

if와 ?로 조건처리

if문

조건문은 불린형으로 변환

if ~ else if ~ else절

조건부 연산자 ?

논리연산자

||(OR)

&&(AND)

!(NOT)

nulish 병합 연산자 ??

연산자 우선순위

반복문

while

for

반복문 컨트롤

switch 문

댓글남기기

참고

Deep learning 한계

[CA] Processor Datapath

신경망: Deep learning 응용

nulish 병합 연산자 `??`