[JavaScript] 모던 자바스크립트 Deep Dive - 07장 연산자

 

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다.

 

07장 연산자

 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만듭니다. 이때 연산의 대상을 피연산자라고 합니다. 이떄 피연산자는 값으로 평가될 수 있어야 한다는 조건이 있어야 하며, 피연산자와 연산자의 조합으로 만들어진 표현식도 값으로 평가될 수 있어야 합니다.

 

피연산자가 '값'이라는 명사의 역할을 한다면 연산자는 '피연산자를 연산하여 새로운 값을 만든다'라는 동사의 역할을 수행합니다.

 

 

7.1 산술 연산자

 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자 값을 만듭니다. 연산이 불가능한 경우에는 NaN(not-a-number)를 반환합니다.

 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있습니다.

 

7.1.1 이항 산술 연산자

 산술 연산자 중 2개의 피연산자를 갖는 경우입니다. 2개의 피연산자를 수학적 계산(산술 연산)하여 새로운 값을 만듭니다. 모든 이항 산술 연산자는 부수 효과가 없다는 특징을 갖고 있습니다.

 

부수 효과(side effect) : 산술 연산 중에 피연산자의 값에 변경이 이루어지는 것 

이항 산술 연산자	의미	부수효과
+	덧셈	x
-	뺄셈	x
*	곱셈	x
/	나눗셈	x
%	나머지	x

 

따라서, 이항 산술 연산자를 통한 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우가 없고 언제나 새로운 값을 만듭니다.

 

7.1.2 단항 산술 연산자

 산술 연산자 중 1개의 피연산자를 갖는 경우입니다. 1개의 피연산자를 수학적 계산(산술 연산)하여 숫자 값을 만듭니다.

단항 산술 연산자	의미	부수 효과
++	증가	o
--	감소	o
+	어떠한 효과도 없음	x
-	음수를 양수로, 양수를 음수로 반전하여 반환	x

 

주의할 점은 증감 연산자(++, --)는 피연산자의 값을 변경하는 부수효과가 있다는 것입니다. 즉, 증감 연산을 할 경우에는 피연산자의 값을 변경하는 암묵적 할당이 이루어 집니다.

 

var x = 0;

x++; // x = x + 1; <- 암묵적 할당
console.log(x); // 1

x--; // x = x - 1; <- 암묵적 할당
console.log(x); // 0

 

증감 연산자는 위치에 차이가 있습니다. 즉 x++과 ++x는 다르게 동작함에 유의해야 합니다.

var x = 5, result;

// 선할당 후증가
result = x++;
console.log(result, x); // 5, 6

// 선증가 후할당
result = ++x;
console.log(result, x); // 7, 7

 

위 표에서 +는 아무런 효과가 없다고 하였지만 숫자 타입이 아닌 피연산자에 +를 사용하면 숫자 타입으로 변환하여 반환해줍니다(-의 경우에도 마찬가지).

var x = '1';
console.log(+x); // 1
console.log(x); // "1"

 

이때 피연산자를 변경하는 것이 아니라 새로운 값을 생성해서 주는 것이기 떄문에 부수효과는 둘다 발생하지 않습니다.

 

7.1.3 문자열 연결 연산자

 이전 포스팅에서도 잠깐 언급했던 것처럼 + 연산자의 피연산자 중 1개 이상이 문자열인 경우에 +는 문자열 연결 연산자로 동작합니다.

2024.03.23 - [Web/JavaScript] - [JavaScript] 모던 자바스크립트 Deep Dive - 06장 데이터 타입

 

'1' + 2; // '12'
1 + '2'; // '12'

 

 이때 주의해야 할 점은 개발자의 의도와는 상관 없이 JS엔진에 의하여 암묵적으로 타입이 변환되기도 한다는 것입니다. 1 + true의 경우에도 true는 1로 타입 변환이 되어 2를 반환하게 됩니다.

 

 이러한 현상을 암묵적 타입 변환 또는 타입 강제 변환이라고 합니다.

 

 

7.2 할당 연산자

 할당 연산자는 우항에 있는 피연산자의 평과 결과는 좌항에 있는 변수에 할당합니다. 할당 연산자는 좌항의 변수에 값을 할당하기 때문에 변수 값이 변하는 부수 효과(좌항에 있는 피연산자의 값이 변경됨)가 있습니다.

 

할당 연산자로는 =, +=, -=, *=, /=, %= 등이 있습니다.

 

또한 할당문의 경우, 단순히 변수에 값을 할당하는 부수 효과만 있는 것이 아니라 그 자체가 값으로 평가되는 표현식인 문입니다. 따라서 a = b = c = 0과 같은 표현이 가능합니다.

 

1. c = 0: 0으로 평가
2. b = 0: 0으로 평가
3. a = 0: 0으로 평가

 

7.3 비교 연산자

비교 연산자는 좌항의 피연산자와 우항의 피연산자를 비교한 다음, 그 결과 값을 불리언 값으로 반환합니다. 비교 연산자는 주로 if 문이나 for 문과 같은 제어문의 조건식에 사용됩니다.

 

7.3.1 동등 / 일치 비교 연산자

동등 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는 지 비교하여 불리언 값을 반환합니다. 하지만 이때 비교되는 엄격성의 정도에 차이가 있습니다. 동등 비교 연산자는 비교적 느슨하고 일치 비교 연산자는 비교적 엄격합니다.

 

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

 

동등 비교, 부동등 비교의 경우에는 암묵적으로 둘의 타입을 일치시킨 뒤에 같은 값인지 판단합니다.

 

그렇기 때문에  5 == '5'의 경우, 암묵적 타입 변화를 시켜서 타입을 일치시키면 같은 값을 갖게 됩니다. 이러한 동등 비교 연산자는 편리하긴 하지만 결과 예측이 어렵고 실수가 발생하기 쉽습니다. 그렇기 때문에 일치 비교 연산자, 불일치 비교 연산자 사용이 지향되곤 합니다.

 

일치 연산자에서 주의해야 할 것으로 NaN이 있습니다.

 

NaN은 자기 자신과 일치하지 않는 유일한 값이기 때문에 NaN === NaN은 false를 반환합니다. 따라서 값이 NaN인지 확인하려면 빌트인 함수 Number.isNaN 을 사용해야 합니다.

 

7.3.2 대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환하며 <, >, <=, >=가 있습니다.

 

7.4 삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환한 값을 결정합니다. 자바스크립트의 유일한 삼항 연산자이며 부수 효관이 없습니다. 삼항 조건 연산자 표현식은 아래와 같이 작성할 수 있습니다.

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

 

삼항 조건 연산자의 첫 번째 피연산자는 조건식이기 때문에 삼항 조건 연산자 표현식은 조건문으로 볼 수 있습니다. 따라서 if ... else 문을 사용하여 삼항 연산자 표현식과 유사하게 처리할 수 있습니다.

 

 하지만 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 표현식이 아닌 문이기 때문에 값처럼 사용할 수 없습니다. 이 점에 유의하여 코드를 작성하는 것이 중요합니다.

 

삼항 연산자는 조건에 따라 수행해야 할 문이 하나인 경우에 사용하면 높은 가독성을 기대할 수 있으나 그렇지 않은 경우에는 if ... else 문을 사용하는 것이 더 권장되고 있습니다(가독성 측면).

 

7.5 논리 연산자

논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자 !의 경우에는 우항의 피연산자)를 논리 연산합니다.

 

논리합(OR)을 의미하는 ||, 논리곱(AND)를 의미하는 &&, 부정(NOT)을 의미하는 !가 있습니다. 각각은 모두 부수 효과를 가지지 않습니다.

 

|| 또는 &&을 통한 평과 결과는 불리언 값이 아닐 수도 있습니다. 해당 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됩니다.

// 단축 평가
'Cat' && 'Dog'; // 'Dog'

이 부분은 후에 다룰 '단축 평가'에 대한 포스팅 링크를 걸어두도록 하겠습니다.

 

 

7.6 쉼표 연산자

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

 

x = 1, y = 2, z = 3; 이라는 코드를 평가하면 3을 반환하게 되겠습니다.

 

7.7 그룹 연산자

소괄호 ()를 사용하여 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가할 수 있습니다. 즉, 연산자의 우선순위를 끌어올려 조절하기 위하여 사용됩니다. 그룹 연산자는 연산자 우선순위가 제일 높다는 특징이 있습니다.

 

 

7.8 typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환합니다. "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환합니다. "null"을 반환하는 경우는 없으며 함수의 경우 "function"을 반환합니다. 이처럼 typeof 연산자가 반환하는 문자열이 7개의 데이터 타입과 정확하게 일치하지 않을 수 있습니다.

 

typeof 연산자로 null 값을 평가하면 "object"가 반환됩니다. 이는 JS 첫 번째 버전의 오류인데 기존 코드에 영향을 줄 수 있기 때문에 현재까지 고치지 못하고 있습니다.

 

따라서 해당 값이 null인지 판별하기 위해서는 일치 연산자(===)를 사용하는 것이 바람직합니다.

 

또한 선언하지 않은 값을 typeof 연산자로 평가한 경우에는 ReferenceError를 발생시키는 것이 아닌 "undefined"를 반환합니다.\

 

7.9 지수 연산자

ES7에서 도입된 지수 연산자는 좌항의 피연산자를 '밑'으로 우항의 피연산자를 '지수'로 거듭 제곱한 숫자 값을 반환합니다.

2 ** 2; // 4

// 지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용하였다.
Math.pow(2, 2); // 4

 

또한, 이항 연산자 중 우선순위가 가장 높다는 특징을 가지고 있습니다.

 

 

7.10 그 외의 연산자

위에서 다룬 연산자 이외에도 ?. / ?? / delete / new / instanceof / in 등의 연산자가 있습니다. 관련 포스트가 올라오면 하단에 링크를 걸어두도록 하겠습니다.

 

 

7.11 연산자의 부수 효과

대부분의 연산자는 다른 코드에 영향을 주지 않습니다. 하지만 할당 연산자, 증감 연산자(++, --), delete 연산자의 경우 다른 코드에 영향을 줍니다.

 

할당 연산자는 변수의 값이 변하는 부수 효과를, 증감 연산자는 피연산자의 값을 변경하는 부수 효과를 가지고 있습니다. 마지막으로 delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과를 가지고 있습니다.

 

7.12 연산자 우선순위

연산자 우선순위란 여러 개의 연산자로 이루어진 문이 실행될 때 연산자가 실행되는 순서를 말합니다. 우선순위가 높을수록 먼저 실행됩니다.

 

우선순위	연산자
1	()
2	new(매개 변수 존재), ., [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3	new(매개 변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof, delete
6	**
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
11	??
12	&&
13	||
14	? ... : ...바
15	=, +=, -=, /=, *= (할당 연산자)
16	,

 

모든 연산자 우선순위를 기억하는 것보다 '()' 그룹 연산자를 사용하여 우선순위를 최상위로 끌어올릴 수 있다는 것을 기억한 채로 코드를 작성하는 것이 중요합니다.

 

7.13 연산자 결합 순서

 연산자 결합 순서란 연산자의 어느쪽부터 평가를 수행할 것인지를 나타내는 순서를 말합니다.

결합 순서	연산자
좌항 -> 우항	+, -, /, %, <=, >=, <, >, &&, ||, ., [], (), ??, ?., in, instanceof
우항 -> 좌항	++, --, 할당 연산자들, !x, +x, -x, ++x, --x, typeof, delete, ? ... : ..., **