[JavaScript] 4. 연산자

📖 모던 자바스크립트 교재) 7장. 연산자

 

자바스크립트가 제공하는 다양한 연산자에 대해 간단히 알아보도록 하자.

01. 산술 연산자

1) 이항 산술 연산자

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

 

2) 단항 산술 연산자

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

 

3) 문자열 연결 연산자

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

 

🖥️ 예제 코드

123 + ''; // -> '123'
(123).toString(); // -> '123'

+'0123456' // -> 123456

 

---

 

02. 할당 연산자

할당 연산자	예	동일 표현
=	x = 5	x = 5
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%/	x %= 5	x = x % 5

 

---

 

03. 비교 연산자

1) 동등/일치 비교 연산자

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

⚠️ 동등 비교(==) 연산자는 예측하기 어려운 결과를 만들어내므로, 일치 비교(===) 연산자를 사용하는 것이 좋다.

 

⚠️ NaN은 자신과 일치하지 않는 유일한 값이다.

 

2)  대소 관계 비교 연산자

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

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

 

---

04. 삼항 조건 연산자

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

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

 

---

05. 논리 연산자

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

 

---

06. typeof 연산자

피연산자의 데이터 타입을 7가지 문자열 중 하나로 반환한다.

다음은 7가지 문자열이다.

"string", "number", 'boolean", "undefined", "symbol", "object", "function"

 

🖥️ 예제 코드

typeof ''           // -> "string"
typeof 1      	    // -> "nubmer"
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"

 

 ⚠️ null 타입인지 확인할 때는 typeof 연산자 대신, 일치 연산자(===)를 사용하자!

 

🖥️ 예제 코드

var foo = null;

typeof foo === null;  // -> false
foo === null;         // -> true

 

---

07. 지수 연산자

지수 연산자는 ** 으로 표현하며,
좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard

[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의