JavaScript - #6. 연산자(1)

연산자(operator)란 하나 이상의 표현식(값으로 평가받는 문)을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산(operation) 등을 수행해 하나의 값을 만든다.

 

자바스크립트의 다양한 연산자에 대하여 알아보자.

---

1. 산술 연산자 (arithmetic operator)

산술연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.

 

• 이항 산술 연산자 (binary arithmetic operator)

이항 산술 연산자는 2개의 피연산자(표현식)을 산술 연산하여 숫자 값을 만든다.

이항 산술 연산자	의미	부수효과 (피연산자의 값이 바뀌는가?)
+	덧셈 (피연산자가 하나 이상이 문자열이라면 문자열 연결 연산자로 동작)	X
-	뺄셈	X
*	곱셈	X
/	나눗셈 (몫)	X
%	나머지	X

다음은 코드 예시이다.

5+2; //=> 7
5-2; //=> 3
5*2; //=> 10
5/2; //=> 2.5 (숫자 데이터 타입은 소수로 처리)
5%2; //=> 1

'hi' + 3 //=> hi3 // 문자열 연결 연산자 +

 

• 단항 산술 연산자 (unary arithmetic operator)

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

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

다음은 코드 예시이다.

let x = 1;

// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.
x++; // x= x+1;
console.log(x); //=> 2

// -- 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어진다.
x--;
console.log(x); //=> 1

console.log(+10); //=>10, 아무런 효과가 없다.
console.log(+(-10)); //=>-10, 아무런 효과가 없다.

console.log(-(10)); //=>-10, 양수가 음수로 반전된다.
console.log(-(-10)); //=>10, 음수가 양수로 반전된다.

++, -- 연산자를 피연산자 기준 위치에 따라서 전위/후위 증가/감소 연산자라고 부른다.

 

먼저 전위 증가/감소 연산자에 대하여 알아보자

let y = 1; 
let z = ++y;  // 먼저 y에 ++에 의한 증가가 이루어지고 z에 대입이 이루어진다. 
console.log('y :',y,'/z: ',z); //=> y: 2 / z: 2

z = --y; //먼저 ydp --에 의한 감소가 이루어지고 z에 대입이 이루어진다.
console.log('y :',y,'/z: ',z); //=> y: 1 / z: 1

전위 증가/감소 연산자는 피연산자 앞쪽에 ++/-- 가 위치하여 피연산자가 먼저 증가/감소 후 표현식이 실행된다.

 

다음으로 후위 증가/감소 연산자이다.

let y = 1; 
let z = y++;  // 먼저 y에 ++에 의한 증가가 이루어지고 z에 대입이 이루어진다. 
console.log('y :',y,'/z: ',z); //=> y: 2 / z: 1

z = y--; //먼저 ydp --에 의한 감소가 이루어지고 z에 대입이 이루어진다.
console.log('y :',y,'/z: ',z); //=> y: 1 / z: 2

후위 증가/감소 연산자는 피연산자 뒷쪽에 ++/--가 위치하여 표현식 실시 후 피연산자의 증가/감소가 이루어진다.

---

2. 할당 연산자 (assignment operator)

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

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

다음은 예시이다.

let num = 1;

num = 10; //=> 10
num += 5; //=> 15
num -= 5; //=> 10
num *= 5; //=> 50
num /= 5; //=> 10
num %- 5; //=> 2

let str = "My name is";
str += 'Kim'; //=> My name is Kim

할당문은 표현식(값으로 평가받는 문)으로 취급을 받는다. 따라서 다음 코드도 가능하다.

let num = 1;
console.log(num=10); // => 10

var a, b, c;
a = b = c =10;
console.log (a, b, c); //=> 10 10 10

---

3. 비교 연산자 (comparison operator)

비교 연산자는 좌항과 우항의 피연산자를 비교하고 그 결과를 Boolean Type으로 반환한다. 

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

 

• 동등/일치 비교 연산자 (loose / strict equality)

동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은지 비교한다.

두 연산자의 차이는 데이터 타입이 같은지 여부를 확인하는 차이이다.

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

동등 및 일치 비교 연산자를 사용 할 때 암묵적 타입변환으로 인해 예측 불가능한 결과가 나올 수 있기 때문에 주의해야한다.

 

• 대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

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