07장 연산자 | 모던 자바스크립트 Deep Dive
산술 연산자
단항 산술 연산자
1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
| 단항 산술 연산자 | 의미 | 부수 효과 |
| ++ | 증가 | O |
| -- | 감소 | O |
| + | 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. | X |
| - | 양수를 음수로, 음수를 양수로 반전한 값을 반환한다. | X |
증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다. 증가/감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
var x = 1;
// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2
// -- 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x - 1;
console.log(x); // 1
증가/감소(++/--) 연산자는 위치에 의미가 있다.
var x = 5, result;
// 선할당 후증가
result = x++;
console.log(result, x); // 5 6
// 선증가 후할당
result = ++x;
console.log(result, x); // 7 7
// 선할당 후감소
result = x--;
console.log(result, x); // 7 6
// 선감소 후할당
result = --x;
console.log(result, x); // 5 5
숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. - 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다.
var x = '1';
console.log(+x); // 1
// 부수 효과는 없다.
console.log(x); // "1"
x = true;
console.log(+x); // 1
x = false;
console.log(+x); // 0
x = 'hello';
console.log(+x); // NaN
문자열 연결 연산자
+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'
// true는 1로 타입변환
1 + true; // 2
// false는 0으로 타입변환
1 + false; // 1
// null은 0으로 타입변환
1 + null; // 1
할당 연산자
여러 변수에도 동일한 값을 연쇄 할당할 수 있다.
var a, b, c;
// 연쇄 할당. 오른쪽에서 왼쪽으로 진행
a = b = c = 0;
console.log(a, b, c); // 0 0 0
비교 연산자
동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.
| 비교 연산자 | 의미 | 사례 | 설명 | 부수 효과 |
| == | 동등 비교 | x == y | x와 y의 값이 같음 | X |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 | X |
| != | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 | X |
동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
// 동등 비교
5 == 5; // true
5 == '5'; // true동등 비교(==) 연산자는 예측하기 어려운 결과를 만들어낸다. 따라서 동등 비교 연산자는 사용하지 않는 편이 좋다. 대신 일치 비교(===) 연산자를 사용한다.
일치 비교 연산자에서 주의할 것은 NaN이다.
NaN === NaN; // falseNaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.
// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true
Object.is 메서드
앞에서 살벼본 바와 같이 동등 비교 연산자(==)와 일치 비교 연산자(===)는 +0과 -0을 동일하다고 평가한다. 또한 동일한 값인 NaN과 NaN을 비교하면 다른 값이라고 평가한다.
ES6에서 도입된 Object.is 메서드는 다음과 같이 예측 가능한 정확한 비교 결과를 반환한다. 그 외에는 일치 비교 연산자(===)와 동일하게 동작한다.
-0 === +0; // true
Object.is(-0, +0) // false
NaN === NaN; // false
Object.is(NaN, NaN); // true
삼항 조건 연산자
조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.
// 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수삼항 조건 연산자 표현식은 if ... else 문과 중요한 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없다.
var x = 10;
// if ... else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError: Unexpected token if조건에 따라 어떤 값을 결정해야 한다면 삼항 조건 연산자 표현식을 사용하는 편이 유리하다. 하지만 조건에 따라 수행해야 할 문이 여러개라면 if ... else 문의 가독성이 더 좋다.
논리 연산자
| 논리 연산자 | 의미 | 부수 효과 |
| || | 논리합(OR) | X |
| && | 논리곱(AND) | X |
| ! | 부정(NOT) | X |
드 모르간의 법칙
논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 한눈에 이해하기 어려울 때가 있다. 이러한 경우 드 모르간의 법칙을 활용하면 복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환할 수 있다.
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)
지수 연산자
ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환한다.
2 ** 2; // 4
2 ** 2.5; // 5.656854249
2 ** 0; // 1
2 ** -2; // 0.25지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.
Math.pow(2, 2); 4음수를 거듭제곱의 밑으로 사용해 계산하려면 다음과 같이 괄호로 묶어야 한다.
(-5) ** 2; // 25
연산자의 부수 효과
일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.
부수 효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자다.
var x;
x = 1;
console.log(x); // 1
x++;
console.log(x); // 2
var o = { a: 1 };
// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다.
delete o.a;
console.log(o); // {}