7장. 연산자

7.1 산술 연산자

- 이항 산술 연산자 : 2개의 피연산자를 산술연산하여 숫자값을 만듦(ex. +, -, *, /, %)

- 단항 산술 연산자 : 1개의 피연산자를 산술연산하여 숫자값을 만듦 (ex. ++, --, +, -)

var = 5, result;

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

//선증가 후할당_전위 연산자
result = ++x;
console.log(result, x); //7, 7

//선할당 후감소_후위 연산자
result = x--;
console.log(result, x);	//7, 6

//선감소 후할당_전위 연산자
result = --x;
console.log(result, x); 5, 5

 

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

숫자타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자타입으로 변환하여 반환

//문자열을 숫자로 타입 변환
var x = '1';
console.log(+x);	//1
console.log(x);	//'1'

//불리언을 숫자로 타입 변환
x = true;
console.log(+x);	//1
console.log(x);	//true

//문자열을 NaN으로 반환
x = 'Hello';
console.log(+x);	//NaN
console.log(x);	//'Hello'

단항 연산자 - 는 부호를 반전한 값을 반환

//부호를 반전
-(-10);	//10

//문자열을 숫자로 타입변환
-'10';	//10

//불리언을 숫자로 타입변환
-true;	//-1

//문자열을 NaN으로 반환
-'Hello';	//NaN

 

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

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

 

7.2 할당연산자 : 우항의 피연산자를 좌항의 변수에 할당

var x;

x = 10;
console.log(x);	//10

x += 5;	//x = x+5
console.log(x);	//15

x -= 5;	//x = x-5
console.log(x);	//10

할당문은 값으로 평가되는 표현식이 문으로서 할당된 값으로 평가됨

var a, b, c;
a=b=c=0;

console.log(a, b, c);	//0, 0, 0

 

7.3 비교연산자

- 동등/일치 비교 연산자 : 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언값 반환

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

동등 비교(==) 연산자는 좌항과 우항의 피연산자 비교시 암묵적 타입 변환을 통해 타입을 일치시킨후 비교

//동등 비교
5 == 5;	//true
5 == '5';	//true

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입, 값이 모두 같은 경우에 한하여 true를 반환

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

NaN은 자신과 일치하지 않는 유일한 값

NaN === NaN;

//숫자가 NaN인지 확인하기위해서는 빌트인 함수 Number.isNaN을 사용
Number.isNaN(NaN);	//true
Number.isNaN(10);	//false
Number.isNaN(1 + undefined);	//true				????????????

 

* Object.is 메서드 : ES6에서 도입, 예측 가능한 정확한 비교 결과 반환

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

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

 

- 대소 관계 비교 연산자

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

 

7.4 삼항 조건 연산자 : 조건식의 평과 결과에 따라 반환할 값 결정, if-else문과 유사하가 사용할 수 있지만 if-else문은 값처럼 사용할 수 없으나 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문

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

 

7.5 논리 연산자

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

true || true;	//true
true || false;	//true
false || false;	//false

true && true;	//true
true && false;	//false
false && false; 	//false

!true;	//false

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

* 드 모르간의 법칙 : 가독성 향상

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

 

7.6 쉼표 연산자 : 왼쪽 피연산자부터 차례로 평가후 마지막 피연산자의 평가 결과 반환

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

 

7.7 그룹 연산자 : ()내의 연산자는 가장 먼저 평가

10 * 2 + 3;	//23
10 * (2 + 3);	//50

 

7.8 typeof 연산자  : 피연산자의 데이터 타입을 문자열로 반환, string, number, bollean, undefined, symbol, object, function중 하나 반환

typeof ''	//'string'
typeof 1	//'number'
typeof NaN	//'number'
typeof true	//'boolean'
typeof undefined//'undefined'
typeof Symbol()	//'symbol'
typeof null	//'object', * JS의 버그, null타입 확인시에는 일치연산자(===) 사용

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

typeof []	//'object'
typeof {}	//'object'
typeof new Date	//'object'
typeof /test/gi	//'object'
typeof function () {}	//'function'

선언하지 않은 식별자를 typeof연산자로 연산하면 ReferenceError가 아닌 undefined가 반환됨

typeof undeclared;	//undefined

 

7.9 지수연산자 : 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱, Math.pow보다 가독성이 좋음

2 ** 2;	//4
(-5) ** 2;	//25, 음수는 괄호로 묶어야함

//지수연산자는 ES7에서 도입되었으며
//그 전에는 Math.pow메서드를 사용함
Math.pow(2, 2);	//4

var num = 5;
num **= 2;	//25

//이항 연산자 중 우선순위가 가장 높음
2 * 5 ** 2;	//50 (= 2 * 25)

 

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 연산자의 부수효과 : 대부분의 연산자는 다른 코드에 영향을 주지 않지만 일부 연산자는 다른 코드에 영향을 주는 부수효과가 있다 (ex. 할당연산자(=), 증가/감소 연산자(++/--), delete

var x;

//할당연산자, 변수x를 사용하는 다른코드에 영향o
x=1;
console.log(x);	//1

//증가/감소 연산자는 피연산자 x의 값이 재할당되어 변경됨
x++;
console.log(x);	//2


var o = {a:1};

//delete연산자는 객체의 프로퍼티를 삭제함
delete o.a;
console.log(o);	//{}

 

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, ? ... : ..., **