Section 2. 자바스크립트 연산자 마무리

전 포스트에 이어서 연산자 종류들을 조금 더 이해해보겠다.

 

1. 쉼표 연산자

쉼표 연산자는 왼쪽부터 차례로 실행하고 마지막 것을 반환한다. 

let x = 1, y = 2, z = 3;
console.log(x, y, z); //1 2 3

// 마지막으로 실행한 것 반환
console.log(
  (++x, y += x, z *= y) //12
);

두번째 출력문을 보면 왼쪽에서 오른쪽으로 차례대로 계산이 되고 마지막 계산된 값이 반환된 것을 확인할 수 있다. 

2, 2*2, 4*3

 

2. null 병합 연산자. ??로 표현한다.

falsy가 아닌 null 또는 undefined만 대체한다.

let x;
x ?? console.warn(x, 'x에 값이 없습니다.');

x = 0;
x ?? console.warn(x, 'x에 값이 없습니다.'); //무시된다

x = null;
x ?? console.warn(x, 'x에 값이 없습니다.');

 

연산자의 우선순위

현재까지 다룬 연산자들 중 우선순위 높은 순으로 나열해보자면 다음과 같다.

let x = 1;
let y = 19 === 3 + 4 * 2 ** ++x;

console.log(y); //true

console.log(
  2 > 3 || 4 % 2 === 0, //true
  2 > (3 || 4) % 2 === 0, //false
  2 > 3 || 4 % (2 === 0) // NaN
);

첫번째 식에서 3 + 4 * 2 ** ++x 는 어느 순서로 계산이 되냐면 역순으로 계산이 된다. 우선순위 표를 보고 따라가면 쉽게 계산을 할 수 있다.

하지만 이렇게 하는 것은 헷갈리고 오류의 여지가 있기 때문에 두번째 코드처럼 ()로 우선순위를 조절해서 계산하는 것이 더 좋을 수도 있다.

두번째 식에서 ()안에 있는 식은 항상 먼저 실행된다는 사실을 알고 넘어가자.