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

 

---

 

모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다.

---

 

연산자

 

피연산자

연산자의 대상

값으로 평가 될 수 있는 표현식

피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가 가능한 표현식

 

연산자

피연산자를 연산하여 새로운 값을 만듬

값으로 평가된 하나 이상의 피연산자를 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만듬.

 

 

---

 

7.1 산술 연산자

 

산술 연산자

피연산자를 대상으로 수학적 계산을 수행하여 새로운 숫자 값을 만듬

산술 연산이 불가능 할 경우  NaN을 반환

 

 

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만듬

모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다.

=> 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만듬

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

 

 

단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만듬

증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과 잇음

=> 피연산자의 값을 변경한는 암묵적 할당이 이루어짐

• 피연산자 앞의 증가/감소 연산자 : 먼저 피연산자의 값을 증가/감소 시킨 후 다른 연산 수행
• 피연산자 뒤의 증가/감소 연산자 : 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소

단항 산술 연산자	의미	부수 효과
++	증가	O
--	감소	X
+	숫자 타입으로 변환한 값 반환 피연산자 변경  X 음수를 양수로 반전하지 않음	X
-	숫자 타입으로 변환한 값 반환 피연산자 변경 X 양수를 음수로, 음수를 양수로 반전한 값을 반환	X

 

 

문자열 연결 연산자

+ 연산자 : 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

                 그 이외에는 산술 연산자로 동작

암묵적 타입 변환 (타입 강제 변환) 주의

 

 

---

 

7.2 할당 연산자

 

할당문

값으로 평가되는 표현식인 문 => 할당된 값으로 평가

 

 

할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

좌항의 변수에 값을 할당

=> 변수 값이 변하는 부수 효과

할당 연산자	예	동일 표현	부수 효과
=	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

 

 

---

 

7.3 비교 연산자

 

비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환

비교 연산자는 if문 for문과 같은 제어문의 조건식에서 주로 사용

 

양의 0 / 음의 0 : 비교, 일치 비교, 동등 비교 모두 결과  true

 

 

동등/일치 비교 연산자

 

좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교하여 불리언 값을 반환

=> 비교하는 엄격성의 정도가 다름

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

 

 

동등 비교 연산자	일치 비교 연산자
느슨한 비교	엄격한 비교
암묵적 타입 변환 O	암묵적 타입 변환 X
좌항과 우항의 피연산자가 다른 타입 / 변환 후 같은 값 => true	좌항과 우항의 피연산자가 동일 타입 / 변환 후 같은 값 => true 반환
예측하기 어려움 => 지양	예측이 쉬움
	NaN 주의

 

부동등 비교와 불일치 비교 연산자는 각각 동등 비교 연산자와 일치 비교 연산자의 반대 개념

// 부동등 비교
5 != 8;		// => true
5 != 5;		// => false
5 != '5';	// => false

// 불일치 비교
5 != 8;		// => true
5 != 5;		// => false
5 != '5';	// => true

 

Number.isNan 함수

 지정한 값이 NaN 인지 확인하고 결과를 불리언 값으로 반환

Number.isNaN(NaN); 			// => true
Number.isNaN(10); 			// => false
Number.isNaN(1+undefined); 		// => true

 

 

Object.is 메소드

예측 가능한 정확한 비교 결과 반환 ( +0/ -0 구분 가능, 동일 값 NaN와 NaN 같은 값으로 평가)

그 이외에는 일치 비교 연산자와 동일하게 작동

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

NaN === NaN;			// => false
Object.js(NaN, NaN); 		// => true

 

 

 

대소 관계 비교 연산자

피연산자의 크기를 비교하여 불리언 값을 반환

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

 

---

 

7.4 삼항 조건 연산자

 

삼항 조건 연산자

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

 

조건식의 평가 결과에 따라 반환할 값을 결정

부수 효과 X

조건문

삼항 조건 연산자 표현식은 값처럼 사용 가능 => 다른 표현식의 일부 가능

var x = 2;

var result = x % 2 ? '홀수' : '짝수';

console.log(result); // => 짝수

 

첫 번째 피연산자는 조건식, 즉 불리언 값으로 평가될 표현식

=> 평가결과가 불리언 값이 아니더라도 타입 변환

• 참 : 두 번째 피연산자가 평가되어 반환
• 거짓 : 세 번째 피연산자가 평가되어 반환

 

 

if ... else 문

if ... else 문 값처럼 사용 불가능

수행해야 할 문이 여러 개라면 if ... else 문이 가독성에서 유리

var x = 2, result;

if (x % 2) result = '홀수';
else 	result = '짝수';

console.log(result); // => 짝수

 

 

---

 

7.5 논리 연산자

 

논리 연산자

우항과 좌항의 피연산자를 논리 연산

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

 

논리 부정 연산자

=> 항상 불리언 값을 반환

=> 피연산자가 불리언 값이 아닌 경우 암묵적 타입 변환

 

논리합, 논리곱 연산자

=> 불리언 값이 아닐 수도 있음

=> 항상 2개의 피연산자 중 한쪽으로 평가

 

 

드 모르간의 법칙

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

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

 

 

---

 

7.5  쉼표 연산자

 

쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자 평가

마지막 피연산자의 평가가 끝아면 마지막 피연산자의 평가 결과 반환

var x, y, z;

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

 

 

---

 

7.7 그룹 연산자

 

그룹 연산자

소괄호로 피연산자를 감싸 가장 면저 평가

연산자의 우선순위 조절 가능 => 가장 높음

 

 

---

 

7.8 typeof 연산자

 

typeof 연산자

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

string, number, booean, undefined, symbol, object, function 중 하나로 반환

typeof  ' '				// => "striong"
typeof 	1				// => "number"
typeof 	NaN				// => "number"
typeof 	true				// => "boolean"
typeof 	undefined			// => "undefined"
typeof 	symbol()			// => "synmbol"
typeof 	null				// => "object"
typeof 	[]				// => "object"
typeof 	{}				// => "object"
typeof 	new Date()			// => "object"
typeof 	/test/gi			// => "object"
typeof function () {}			// => "function"

 

null

=> null 반환 X

=> object 로 반환

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

var foo = null;

typeof foo === null; 		// => false
foo === null; 			// => true

 

선언하지 않은 식별자

=> ReferenceError X

=> undefined로 반환

typeof undeclared; 		// => undefined

 

 

---

 

7.9 지수 연산자

 

지수 연산자 (**)

좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값 반환

할당 연산자와 함께 사용 가능

이항 연산자 중에서 우선 순위 가장 높음

 

음수를 거듭 제곱의 밑으로 사용해 계산하려면 괄호로 묶기

(-5) ** 2 // => 25

 

Math.pow

지수 연산자가 도입되기 전에 사용

 

 

---

 

7.10 그 외의 연산자

 

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

 

 

---

 

7.11 연산자의 부수 효과

 

일부 연산자는 다른 코드에 영향을 준다

 

할당 연산자 (=)

변수 값이 변함

 

증가/감소 연산자(++/--)

피연산자의 값이 재할당 되어 변경

 

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	?? (null  병합 연산자)
12	&&
13	||
14	? ... : ...
15	할당 연산자 ( =, +=, -=, ... )
16	,

 

 

---

 

7.13 연산자 결합 순서

 

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

 

 

---

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리