[모딥다] 07장.연산자

vanLan·2026년 1월 20일

JavaScript

모딥다

목록 보기

3/8

📁산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듬
산술 연산이 불가능 한 경우, NaN을 반환

🗒️이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만듬

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

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

🗒️단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만듬

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

단항 산술 연산자	의미	부수 효과
++	증가	O
--	감소	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

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

var x = '1';

// 문자 -> 숫자 타입 변환
console.log(+x);  // 1

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

x = false;
console.log(+x);  // 0

// 문자열 -> 숫자 => NaN
x = 'Hello';
console.log(+x);  // NaN

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

'1' + 2;  // -> '12'
1 + '2';  // -> '12'

1 + true;  // -> 2
1 + false;  // -> 1

1 + null;  // -> 1

+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

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

📁비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
제어문의 조건식에서 주로 사용

동등/일치 비교 연산자:

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

NaN을 비교할 경우는 빌트인 함수인 Number.isNaN을 사용

대소 관계 비교 연산자:

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

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

📁삼항 조건 연산자

첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환, false로 평가되면 세 번째 피연산자를 반환
조건에 따라 수행해야할 문이 여러개라면 if ... else문을 아니라면, 삼항 조건 연산자를 활용하는 것이 가독성에 좋음
```
var x = 2;

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

console.log(result);  // 짝수
```

📁논리 연산자

우항과 좌항의 피연산자를 논리 연산함

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

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

📁쉼표 연산자

왼쪽 피연산자 부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환
```
var x, y, z;

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

📁typeof 연산자

피연산자의 데이터 타입을 문자열로 반환

'string', 'number', 'undefined', 'boolean', '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'

📁지수 연산자

좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환
지수 연산자는 이항 연산자 중 우선순위가 가장 높다

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

2 ** ( 3 ** 2 );  // -> 512

📁연산자 우선순위

연산자의 우선 순위는 다음과 같다

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

📁연산자 결합 순서

어느 쪽(좌항 또는 우항) 부터 평가를 수행할 것인지를 나타내는 순서

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