[JavaScript] 연산자

연산자와 피연산자란?

자바스크립트의 연산자에 대해 알아보기전, 연산자와 피연산자에 대한 정의를 먼저 해보겠습니다.

용어	설명
연산자(Operator)	하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하는 기호
피연산자(Operand)	연산에 참여하는 값으로 평가될 수 있는 모든 표현식(변수, 상수 등)으로 연산의 대상

예를 들어서 3 + 7  연산이 주어진다면, 3과7은 피연산자고 +가 연산자가 됩니다.

 

연산자 부수효과란?

부수효과란 피연산자의 값을 변경하는 등 다른 코드에 영향을 주는 것을 말합니다. 대부분의 연잔자는 부수효과가 없으나, 할당 연산자(=), 증가/감소 연산자(++/--), delete연산자는 부수효과가 있습니다.

 

산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듭니다. 만약, 불가능한 경우 NaN을 반환합니다.

 

단항 산술 연산자 (1개의 피연산자)

단항 산술 연산자	의미	부수 효과
++	증가	O
--	감소	O
+	어떠한 효과도 없음	X
-	양수와 음수를 서로 반전한 값을 반환	X

var num = 1;
num++; // num = num + 1 = 2

이항 산술 연산자 (2개의 피연산자)

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

문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작합니다. 아래의 예시와 같이 자바스크립트 엔진은 암묵적으로(강제적으로)타입을 변환합니다.

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

1 + true; // 2 (true 은 1로 타입 변환)

1 + null; // 1 (null 은 0으로 타입 변환)

+undefined; // NaN
1 + undefined; // NaN

 

할당 연산자

할당 연잔사는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당합니다. 이는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있습니다.

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

연쇄 할당

실제 개발을 진행하다보면 코드를 깔끔하게 만들기 위해 할당 연산자를 많이 활용하게 되는것 같습니다. 또한 연쇄 할당을 통해 한번에 여러 변수에 동일한 값을 할당해 코드 라인을 단축시킬 수 있습니다.

// 연쇄 할당 예시
var a, b, c;
a = b = c = 0;
console.log(a,b,c); // 0 0 0

 

 

비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean값으로 반환해줍니다. 주로 if문, for문과 같은 제어문의 조건식에서 사용됩니다.

 

동등/일치 비교 연산자

좌우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환는데, 비교하는 엄격성의 정도에 따라 나눌 수 있습니다. 

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

** NaN은 자신과 일치하지 않는 유일한 값이므로 NaN === NaN 은 false가 됨. 따라서 Number.isNaN()함수를 활용함

 

대소 관계 비교 연산자

피연산자들의 크기를 비교하여 boolean값을 반환합니다.

대소 관계 비교 연산자	예제	설명	부수 효과
>	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 ? '홀수' : '짝수'; // 짝수

논리 연산자

좌우항의 피연산자를 논리 연산합니다.

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

쉼표 연산자

왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환합니다.

var x, y, z;

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

그룹 연산자

소괄호 '()' 로 피연산자를 감싸면, 해당 표현식을 가장 먼저 평가하게 되고 이를 그룹 연산자라고 합니다.

10 * 2 + 3; // 23

10 * (2 + 3); // 50

typeof 연산자

피연산자의 데이터 타입을 문자열로 반환해줍니다. typeof연산자는 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 1개를 반환값으로 가집니다.

typeof ''; // "string"
typeof NaN; // "number"
typeof null; // "object"
typeof function () {}; // "function"

지수 연산자

ES7에서 도입된 연산자로 좌항의 피연산자를 밑(base)로, 우항의 피연산자를 지수(exponent)로 사용하여 거듭 제곱을 수행합니다.

2 ** 2; // 4
2 ** 2.5 // 5.65685424949238

// 이항 연산자 중에서 지수 연산자가 가장 우선순위가 높음
2 * 5 ** 2; // 50

 

위에 소개한 연산자 외에도 ?., ??, delete, new, instanceof, in 등 다양한 연산자가 존재하지만 이는 추후에 설명하도록 하겠습니다.

 

 

[출처] 모던 자바스크립트 Deep Dive

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

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