모던 자바스크립트 Deep Dive - 4 연산자

연산자(operator 演算子)는

 

하나 이상의 표현식을 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만든다.

 

이때 연산의 대상을 피연산자(operand 演算元)라 한다.

 

//산술 연산자
5 * 4 // 20

//문자열 연결 연산자
'My name is' + 'Lee' // 'My name is Lee'

//할당 연산자
color = 'red' // 'red'

//비교 연산자
3 > 5 // false

//논리 연산자
true && false // false

//타입 연산자
typeof 'Hi' // string

산술 연산자

수학적 계산을 수행해 새로운 숫자 값을 만들고, 불가능한 경우 NaN를 반환한다.

 

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

 

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

 

단항 산술 연산자

단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

 

단항 산술 연산자	의미	부수 효과
++	증가	O
--	감소	O
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.	X
-	양수를 음수로, 음수를 양수로 반전한 값을 반환한다.	X

증가 감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다는 것이다.

증가/감소 연산을 하면, 피연산자 값을 변경하는 암묵적 할당이 이뤄진다.

 

증가 감소 ++/-- 연산자는 위치에 의미가 있다.

피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행한다.

피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소시킨다.

 

var x = 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

 

할당 연산자

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

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

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

 

비교 연산자

좌항,우항의 피연산자를 비교후 그 결과를 불리언 값(true, false)로 반환한다.

 

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

 

일치 비교 연산자에서 주의할것은 NaN인데

// isNaN함수는 지정한 값이 NaN인지 확인후 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); //true
Number.isNaN(10); //false
Number.isNaN(1 + undefiend); //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
<	x < y	x가 y보다 작다	X
>=	x >= y	x가 y보다 크거나 작다	X
<=	x <= y	x가 y보다 작거나 같다	X

 

삼항 조건 연산자

첫 번쨰 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다.

즉, 두 번째 피연산자 또는 세 번째 피연산자로 평가되는 표현식이다.

var x = 2;

// 2 % 2는 0이고 false로 암묵적 타입 변환된다.

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

console.log(result) // 짝수


//또 다른예

// var result = score >= 60 ? 'pass' : 'fail';
// 60보다 크거나 같은경우 pass, 아니면 fail 반환

 

if ... else와의 차이

if ... else문은 표현식이 아닌 문이라 값처럼 사용 불가능하지만

 

var x = 10;
// if else는 값처럼 사용 불가능
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError Unexpected token if

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

 

논리 연산자

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

 

쉼표 연산자

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

쉼표 연산자는 차례대로 평가 후 마지막 피연산자의 평가 결과를 반환한다.

 

그룹 연산자

소괄호 ('()')로 감싸면 자신이 피연산자인 표현식을 가장 먼저 평가 한다.

(수학 식에서 괄호로 감싸는거랑 같음)

 

typeof 연산자

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

"string" "number" "boolean" "undefined" "symbol" "object" "function" 중 하나를 반환한다

"null"을 반환하는 경우는 없으며 함수는 "function"을 반환한다.

 

null, [], {} = "object"

 

typeof를 null값을 연산해보면 "null"이 아닌.... "object"를 반환한다........

이건 자바스크립트 의 첫번째 버그이고, 아직 수정을 못하고있다 (영향 끼칠까봐)

 

지수 연산자

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

 

 

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

이전에는 이와 똑같은 메소드인 Math.pow를 사용했다.

 

그 외 연산자

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

 

부수 효과

부수효과가 있는 연산자는 (다른 코드에 영향을 주는) 

할당 연산자(=) 증가/감소 연산자(++/--), delete 연산자이다.

 

연산자 우선순위

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

 

연산자 결합 순서

 

연산자 결합 순서는 어느쪽 (좌항 또는 우항) 부터 평가를 할것인지 순서를 나타낸다.

 

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