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

산술 연산자

• 산술 연산자 arithmetic operator는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듦
• 산술 연산이 불가능할 경우 NaN을 반환
• 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분

이항 산술 연산자

• 이항 binary 산술 연산자는 2개의 피연산자를 산술 연산
• 부수 효과 side effect(피연산자의 값을 변경)가 없음

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

단항 산술 연산자

• 단항 unary 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만듦
• 증가/감소(++/--) 연산자
  • 피연산자 값을 변경하는 부수 효과가 있음, 피연산자의 값을 변경하는 암묵적 할당이 이루어짐
    • 위치에 따라 의미가 있음
      • 피연산자 앞: 피연산자의 값을 증가/감소시킨 후 다른 연산 수행
      • 피연산자 뒤: 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소

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

문자열 연결 연산자

• + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
• 개발자의 의도와 관계없이 암묵적 타입 변환implicit coercion 또는 타입 강제 변환 type coercion이 발생하기도 함

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

// 산술 연산자
1 + 2 // 3

// true는 1로 타입 변환
true + 1 // 2

// false는 0으로 타입 변환
false + 1 // 0

// null은 0으로 타입 변환
null + 1 // 0

// undefined는 숫자로 타입 변환 x
undefined + 1 // NaN

할당 연산자

• 할당 연산자 assignment operator는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수효과 o
• 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가

할당 연산자	예	동일 표현	부수 효과
=	x = 5	x = 5	o
+=	x += 5	x = x + 5	o
-=	x -= 5	x = x - 5	o
*=	x *= 5	x = x * 5	o
/=	x /= 5	x = x / 5	o
%=	x %= 5	x = x % 5	o

var x;

// 할당식은 표현식인 문
console.log((x = 10)); // 10

var a, b, c;

// 연쇄 할당 오른쪽에서 왼쪽으로 진행
a = b = c = 0;
console.log(a, b, c); // 0 0 0

비교 연산자

• 비교 연산자 comparison operator는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
• if문이나 for문과 같은 제어문의 조건식에서 주로 사용

동등/일치 비교 연산자

• 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값으로 반환
• 동등 비교 loose equality 연산자: 비교 전에 암묵적 타입 변환을 통해 타입을 일치시킨 후 비교
• 일치 비교 strict equality 연산자: 타입도 같고 값도 같은 경우에 한하여 true 반환
• 동등 비교 연산자는 예측하기 어려운 결과를 나타내므로 일치 비교 연산자 사용 권장
• NaN === NaN // false ; NaN은 자신과 일치하지 않는 값
• 부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 각각 동등 비교 연산자(==)와 일치 비교 연산자(===)의 반대 개념

비교 연산자	의미	사례	설명	부수 효과
==	동등 비교	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
// 일치 비교
5 === 5; // true
5 === "5"; // false

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

// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고, 그 결과를 불리언 값을 반환
Number.isNaN(NaN); // true

// ES6에서 도입된 Object.is 메서드는 예측 가능한 비교 결과를 반환
1 + undefined === NaN; // false
Object.is(NaN, NaN); // True

대소 관계 비교 연산자

• 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 비교

대소 관계 비교 연산자	예제	설명	부수 효과
>	x > y	x가 y보다 큼	x
<	x < y	x가 y보다 작음	x
>=	x >= y	x가 y보다 크거나 같음	x
<=	x <= y	x가 y보다 작거나 같음	x

삼항 조건 연산자

• 삼항 조건 연산자 ternary operator는 조건식의 평가 결과에 따라 반환할 값을 결정, 부수 효과 x
• 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
• 값으로 평가할 수 있는 표현식인 문

var score = 60;
var result = score >= 80 ? "Pass" : "Fail"; // Fail

논리 연산자

• 논리 연산자 logical operator는 우항과 자항의 피연산자를 논리 연산
• 논리 부정 연산자(!)는 암묵적 타입 변환을 통하여 언제나 불리언 값을 반환

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

// 논리합연산자(||)
true || true; // true
true || false; // true
false || false; // false

// 논리곱연산자(&&)
true || true; // true
true || false; // false
false || false; // false

// 논리부정연산자(!)
!0; // true
!'hello' // false

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

// 드모르간의 법칙
!(x || y) === (!x && !y);
!(x && y) === (!x || !y);

 

쉼표  연산자

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

var x, y, z;

x = 1, y = 2, z = 3; // 3

그룹 연산자

• 소괄호('( )')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가
• 연산자의 우선순위 조절 가능
• 그룹 연산자는 우선 순위가 가장 높음

typeof 연산자

• 피연산자의 타입을 문자열로 반환
• 7 가지 문자열 'string', 'number', 'boolean', 'undefined', 'symbol', 'object', 'function' 중 하나를 반환
• null은 'object'로 반환하는 자바스크립트의 첫 번째 버전의 버그 존재
• 선언하지 않은 식별자를 Reference Error가 아닌 undefined를 반환

typeof '' // 'string'
typeof 1 // 'number'
typeof NaN // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof new Date() // 'object'
typeof /test/gi // 'object'
typeof function() {} // 'function'

typeof neverDeclared; // 'undefined'

지수 연산자

• ES7에 도입
• 좌항의 피연산자를 밑 base, 우항의 피연산자를 지수 exponent로 거듭제곱하여 숫자 값을 반환
• 지수 연산자 도입 이전에는 Math.pow 메서드를 사용
• 이항 연산자 중에서 가장 우선 순위가 높음

3 ** 2 // 9
Math.pow(3, 2) // 9

그 외의 연산자

연산자	개요	참고
?.	옵셔널 체이닝 연산자	9장
??	null 병합 연산자	9장
delete	프로퍼티 삭제	10장
new	생성자 함수를 호출할 때 사용하여 인스턴스 생성	17장
instanceof	좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별	19장
in	프로퍼티 존재 확인	19장

연산자의 부수 효과

• 다른 코드에 영향을 줌
• 할당 연산자(=), 증가/감소 연산자, delete연산자

var x;

// 할당 연산자
x = 1;
console.log(x); // 1

// 증가/감소 연산자
x++;
console.log(x); // 2

// delete 연산자
var hongyeop = {
  hp: 5,
  status: "hungry",
};
console.log(hongyeop); // { hp: 5, status: 'hungry' }

delete hongyeop.status;
console.log(hongyeop); // { hp: 5 }

연산자 우선순위

• 우선순위가 높은 그룹 연산자를 사용하여 우선순위를 명시적으로 조절 권장

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

연산자 결합 순서

• 연산자의 어느 쪽(좌항 혹은 우항)부터 평가를 수행할 것인지 나타냄

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