[JavaScript_DeepDive] 7. 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교 논리, 타입, 지수 연산등을 수행해 하나의 값을 만든다. 이 떄 연산자의 대상을 피 연산자(operand)라고 하고 피 연산자는 값으로 평가될 수 있는 표현식 이어야 한다. 그리고 ㅍ연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

---

#산술연산자(arithmetic operator)

-피연산자를 대상으로 수학적 계싼을 수행해 새로운 값을 만드는 연산자

-산술이 불가능한 경우 NaN을 반환한다

 

※문자열 연결 연산자

+연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외에는 산술연산자로 동작한다

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

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

//true는 1로, false는 0으로 null은 0으로 변환된다
1 + true;	//2
1 + false;	//1
1 + null;	//1

//undefined는 숫자로 타입 변환되지 않는다
+undefined;	//NaN
1 + undefined;	//NaN

이를 암묵적타입 변환(implict coercion) 또는 타입 강제변환(type coercion)이라고 한다.

 

#할당 연산자(assignment operator)

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

-할당 연산자는 좌항의 변수에 값을 할당함으로 변수의 값이 변하는 부수 효과가 있다.

- = / += / -= / *= / /= / %= 등이 있다.

-할당문은 변수에 값을 할당하는 부수 효과만 있을 뿐 값으로 평과되지 않을 것처럼 보인다.

-할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

 

#비교 연산자(comparison operator)

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

-if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.

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

-동등비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

-동등비교 연산자는 암묵적 타입일치를 통해 편리한 경우도 있지만 결과를 예측하기 어렵고 실수하기 쉽다.

-예측하기 어려운 동등비교는 사용하지 않는 편이 좋고 대신 일치비교(===)연산자를 사용한다.

-일치비교 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한아여 true를 반환한다.

-NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인ㅇ지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.

//Number.isNaN함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN);	//true
Number.isNaN(10);	//false
Number.isNaN(1+undefined);	//true

-Object.is 메서드는 양의 0과 음의 0이 있는데 이들의 비교를 가능하게 한다.(일치/동등 비교에서 +0과 -0의 비교는 true를 반환한다.

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

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

 

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

-삼항 조건 연산자는 조건식의 평과 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며, 부수효과는 없다.

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

ex) var result = score >= 60 ? 'pass' : 'fail'; 

score가 60 이상이면 true로 평가되어 pass를 반환하고 score가 60 미만이면 false로 평가되어 fail를 반환한다.

 

-삼항 조건 연산자의 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없다.

var x = 10;

//if...else문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if(x%2){reseult='홀수';} else{result='짝수;}
//SyntaxError : Unexpected token if

-삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

 

 

#논리 연산자(logical operator)

-논리연산자는 우항과 좌항의피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.

-논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중어느 한쪽으로 평가된다.

//단축평가
'Cat' && 'Dog';	//'Dog'로 출력

 

# typeof 연산자

-typeof 연산자는 데이터 타입을 문자열로 반환한다(string, number, boolean, undefined, symbol, object, function중 하나). null을 반환하는 경우는 없다. 

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연산자로 null 값을 연산해보면 null이 아닌 object를 반환한다.

따라서 값이 null 타입인지 확인할 때는 typeof연산자를 사용하지 말고 일치연산자(===)를 사용한다.

 

# 지수 연산자

-ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2;	//4
2 ** 2.5;	//5.65685424949238
2 ** 0;	//1
2 ** -2;	//0.25

-지수 연산자는 아래 코드와 같은 경우 Math.pow보다 가독성이 좋다.

//지수 연산자의 결합 순서는 우항에서 좌항이다. 즉 우결합성을 갖는다.
2 ** (3 ** 2);	//512
Math.pow(2, Math.pow(3, 2));	//512

-음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.

-지수 연산자는 다른 산술 연산자와 마찬가지로 할당 연산자와 함께 사용할 수 있다.

-지수 연산자는 이항 연산자 중에서 우선순위가 가장 높다

 

# 그 외 연산자

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

 

# 연산자의 부수효과

-할당연산자(=), 증가/감소 연산자(++/--), delete연산자는 다른코드에 영향을 주는 부수효과가 있다.

var x;
//할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x변수를 사용하는 다른 코드에 영향을 준다.
x=1;
console.log(x);	//1

//증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수효과가 있다.
//피연산자 x의 값이 재할당되여 변경된다. 이는 x변수를 사용하는 다른 코드에 영향을 준다
x++;
console.log(x);	//2

var o = {a:1};

//delete연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다. 이는 o객체를 사용한는 다른 코드에 영향을 준다.
delete o.a;
console.log(o);	//{}

 

# 연산자 우선순위

우선순위	연산자
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, 삼항연산자