연산자

연산자

연산자^operator는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만든다.

이때 연산의 대상을 피연산자^operand라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.

// 산술 연산자
5 * 4; // 20

// 문자열 연결 연산자
"My name is " + "Lee"; // 'My name is Lee'

// 할당 연산자
color = "red"; // 'red'

// 비교 연산자
3 > 5; // false

// 논리 연산자
true && false; // false

문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
"1" + 2; // '12'
1 + "2"; // '12'

// true는 1로 타입 변환된다.
1 + true; // 2

// false는 0으로 타입 변환된다.
1 + false; //  1

// null은 0으로 타입 변환된다.
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN

주목할 것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.

1 + true 를 연산하면 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제로 변환한 후 연산을 수행한다.

이를 암묵적 타입 변환^{implicit coercion}또는 타입 강제 변환^{type coercion}이라고 한다.

비교 연산자

비교 연산자^{comparison operator}는 좌항과 우항의 피연산자를 비교 후 그 결과를 불리언 값으로 반환한다.

동등/일치 비교 연산자

동등 비교^{loose equality} 연산자와 일치 비교^{strict equality} 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 하지만 비교하는 엄격성의 정도가 다르다.

비교 연산자	의미	사례	설명	부수 효과
==	동등 비교	x == y	x와 y의 값이 같음	X
===	일치 비교	x === y	x와 y의 값과 타입이 같음	X
!=	부동등 비교	x != y	x와 y의 값이 다름	X
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름	X

동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

// 동등 비교. 결과를 예측하기 어렵다.
"0" == ""; // false
0 == ""; // true
0 == "0"; // true
false == "false"; // false
false == "0"; // true
false == null; // false
false == undefined; // false

동등 비교 연산자는 결과를 예측하기 어렵고 실수하기 쉽다. 따라서 동등 비교 연산자는 사용하지 않는 편이 좋다. 대신 일치 비교(===) 연산자를 사용한다.

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다. 다시 말해, 암묵적 타입 변환을 하지 않고 값을 비교한다. 따라서 예측하기 쉽다.

// 일치 비교
5 === 5; // true
5 === "5"; // false

일치 비교 연산자에서 주의할 것은 NaN이다.

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false

따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.

// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고
// 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

삼항 조건 연산자

삼항 조건 연산자^{ternary operator}는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

var x = 2;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? "홀수" : "짝수";

console.log(result); // 짝수

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼함 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.

논리 연산자

논리 연산자^{logical operator}는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.

논리 연산자	의미	부수 효과
||	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

쉼표 연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

var x, y, z;
(x = 1), (y = 2), (z = 3); // 3

그룹 연산자

소괄호(‘()’)로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.

따라서 그룹 연산자를 사용하면 우선순위를 조절할 수 있다. 그룹 연산자는 연산자 우선순위가 가장 높다.

10 * 2 + 3; // 23

// 그룹 연산자 사용하여 우선순위 조절
10 * (2 + 3); // 50

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

“string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환한다.

typeof 연산자로 null 값을 연산해 보면 “object”를 반환한다는데 주의하자.

이것은 자바스크립트의 첫 번째 버전의 버그다.

따라서 값이 null 타입인지 확인할 때는 일치 연산자(===)를 사용하자.

또 하나 주의할 점은 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 undefined를 반환한다.

// undeclared 식별자를 선언한 적이 없다.
typeof undeclared; // undefined

지수 연산자

ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑^base으로, 우항의 피연산자를 지수^exponent로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.

지수 연산자는 다음과 같은 경우 Math.pow 메서드보다 가독성이 좋다.

// 지수 연산자의 결합 순서는 우항에서 좌항이다. 즉, 우결합성을 갖는다.
2 ** (3 ** 2); // 512
Math.pow(2, Math.pow(3, 2)); // 512

음수를 거듭제곱의 밑으로 사용해 계산하려면 다음과 같이 괄호로 묶어야 한다.

-5 ** 2;
// SyntaxError: Unary operator used immediately before exponentiation expression.
// Parenthesis must be used to disambiguate operator precedence

(-5) ** 2; // 25

이웅모, “모던 자바스크립트 Deep Dive”, 위키북스(2020), p74-92.