7장 연산자

7.1 산술 연산자(arithmatic operator)

1. 이항(binary) 산술 연산자

연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
**	지수연산(ES7)

1 + 2;	// 3
5 - 3;	// 2
3 * 2;	// 6
10 / 4;	// 2.5
10 % 4;	// 2

2 ** 2;	// 4
2 ** 0;	// 1
2 ** -1;    // 0.5
(-2) ** 3;  // -8 ==> 음수는 괄호로 묶어서 사용

지수 연산자 도입 전에는 Math.pow() 매서드를 사용했다.

2. 단항(unary) 산술 연산자

연산자	의미
++	증가
--	감소
+	아무 효과 없음
-	양수/음수 반전

증감 연산자의 위치에 따라 전위 증감 연산자와 후위 증감연산자로 나뉜다.

전위 증감 연산자(prefix increment/decrement operator)는 먼저 피연산자 값을 증감시킨 후에 다른 연산을 수행한다.
후위 증감 연산자(postfix incrememnt/decrement operator)는 먼저 다른 연산을 수행하고 피연산자 값을 증감시킨다.

var x = 1;

// postfix increment
res = x++;
console.log(res, x); // 1 2

// prefix increment
res = ++x;
console.log(res, x); // 3 3

// postfix decrement
res = x--;
console.log(res, x); // 3 2

// prefix decrement
res = --x;
console.log(res, x); // 1 1

3. 문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우에 문자열 연결 연산자로 동작한다. 이때 암묵적 타입변환(implicit coercion) 또는 타입 강제 변환(type coercion)이 일어난다.

'2' + 3; // 23
'hello' + 5; // hello5
1 + true;  // 2 ==> true는 1로 타입 변환
1 + false; // 1 ==> false는 0으로 타입 변환
1 + null;  // 1 ==> null은 0으로 타입 변환

7.2 할당 연산자(assignment operator)

연산자	의미
=	좌항에 우항 대입
+=	좌항에 우항 더한 값 대입
-=	좌항에 우항 뺀 값 대입
*=	좌항에 우항 곱한 값 대입
/=	좌항에 우항 나눈 값 대입
%=	좌항에 우항 나눈 나머지 대입
**=	좌항에 우항 제곱한 값 대입

var a = 5;

console.log(a); // 5
console.log(a += 2);  // 7
console.log(a -= 4);  // 3
console.log(a *= 5);  // 15
console.log(a /= 3);  // 5
console.log(a %= 3);  // 2
console.log(a **= 3);  // 8

7.3 비교 연산자(comparison operator)

1. 동등/일치 비교 연산자

연산자	의미
==	동등 비교(값이 같은지)
===	일치 비교(값과 타입이 같은지)
!=	부동등 비교(값이 다른지)
!==	불일치 비교(값과 타입이 다른지)

동등 비교(loose equality) 연산자는 좌우항의 피연산자의 값만 비교한다.
일치 비교(strict equality) 연산자는 좌우항의 피연산자의 값과 타입을 비교한다.
둘다 결과는 불리언 값을 반환한다.

NaN은 자신과 일치하지 않는 유일한 값이다. NaN인지 확인하기 위해서는 isNaN()을 사용한다.
ES6에서 도입된 Object.is() 메서드를 사용해서 비교하는 것도 가능하다. 더 정확한 비교결과를 반환해준다.
undefined도 NaN이지만 자신과는 일치한다.

5 == '5';	// true
5 === '5';	// false
5 === 5;	// true
undefined === undefined; // true
isNaN(undefined);	// true

NaN === NaN;	// false
isNaN(NaN);	// true
Object.is(NaN, NaN);	// true

+0 === -0;	// true
Object.is(+0, -0);	// false

2. 대소 관계 비교 연산자

연산자	의미
>	좌항이 우항보다 큼
<	좌항이 우항보다 작음
>=	좌항이 우항보다 크거나 같음
<=	좌항이 우항보다 작거나 같음

1 > 3;	// false
1 < 3;	// true
5 >= 3;	// true
5 <= 5;	// true

7.4 삼항 조건 연산자(ternary operator)

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

var x=5;

var result = x % 2 ? '홀수' : '짝수';
console.log(result);	// 홀수

7.5 논리 연산자(logical operator)

연산자	의미
¦¦	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

• 논리합은 하나라도 true이면 true를 반환하고 전부 false일때만 false를 반환한다.
• 논리곱은 하나라도 false이면 false를 반환하고 전부 true일때만 true를 반환한다.
• 부정은 반대값을 반환한다.

드 모르간의 법칙

논리 연산자 표현식이 복잡해지면 가독성을 위해 드 모르긴 법칙을 활용할 수 있다.

!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

7.8 typeof 연산자

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

주의점
NaN ==> number 반환
null ==> object 반환, null 타입 확인은 일치 연산자 사용
함수 ==> function 반환
선언하지 않은 식별자 ==> undefined 반환

7.10 그 외의 연산자

연산자	의미
?.	옵셔널 체이닝 연산자(9.4.2절)
??	null 병합 연산자(9.4.3절)
delete	프로퍼티 삭제(10.8절)
new	생성자 함수 호출할때 사용해 인스턴스 생성(17.2.6절)
instanceof	좌변 객체가 우변 생성자 함수와 연결된 인스턴스인지 판별(19.10절)
in	프로퍼티 존재 확인(19.13.1절)

7.12~13 연산자 우선순위, 결합순서

연산자 우선순위는 순서를 외우기보다는 우선순위가 가장 높은 그룹 연산자를 사용해서 명시적으로 조절해준다.

결합순서는 좌우항 중 어느쪽부터 연산할건지 나타내는 순서이다.

결합순서	연산자
좌->우	이항 산술 연산자, 대소 관계 비교 연산자, 논리합, 논리곱, ., [], (), ?., ??, in, instanceof
좌<-우	단항 산술 연산자, 할당 연산자, 논리 연산자 부정, typeof, delete, 삼항 조건 연산자

---

이웅모 저자의 <모던 자바스크립트 Deep Dive> 책으로 스터디 하면서 공부한 내용들을 요약 정리해서 올리는 글입니다. 더 자세한 내용이 궁금하신 분들은 책을 봐주세요.