[모던 자바스크립트 딥다이브]_연산자 어디까지 보고 오셨어요?

산술 연산자

산술 연산자는 우리에게 굉장히 익숙한 연산자들입니다.

 

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

이항 산술 연산자는 우리가 평소에도 사용하는 평범한 연산자들이죠?

특별한게 있다면 %로 표현된 나머지 연산자 입니다.

console.log( 5 % 2 ) // 1

 

이제 단항 산술 연산자에 대해서 알아보겠습니다.

단항 산술 연산자	의미
++	증가
--	감소
+	별 다른 의미 없음
-	양수를 음수로, 음수를 양수로 반전합니다.

const x = 1

x++ // x = x + 1 와 같은 의미 입니다.

x-- // x = x - 1 와 같은 의미 입니다.

이와 같이 간단히 표현할 수 있다는 특성을 이용해

조건문 혹은, 반복문에서 자주 사용하게 될 것입니다.

---

할당 연산자

할당 연산자

=

+=

-=

*=

/=

%=

const x = 10; 

x+=5 // x = x + 5 와 같은 의미 입니다. x = 15

x-=5 // x = x - 5 와 같은 의미 입니다. x = 10

x*=3 // x = x * 3 와 같은 의미 입니다. x = 30

x/=3 // x = x / 3 와 같은 의미 입니다. x = 10

x%=4 // x = x % 4 와 같은 의미 입니다. x = 2

우리가 자주 사용하는 줄임말과 같이 축약형으로 사용할 수 있습니다.

---

비교 연산자

비교 연산자	의미
==	동등 비교
===	일치 비교
!=	부동등 비교
!==	불일치 비교

const x = 5

const y = '5'

x == y // true, 동등비교는 암묵적으로 타입을 변환해보면서 값이 같은지 비교합니다.

x === y // false, 일치비교는 타입과 값까지 같아야 참을 반환합니다.

x != y // false, !은 부정의 의미를 담고 있습니다. 따라서 두 값이 같지 않은지 묻는 것입니다.

x !== y // true, 일치비교는 타입과 값까지 같아야 하기 때문에 두 값은 엄밀히 다릅니다.

따라서 우리는 동등비교보다는 일치 비교를 통해 엄격한 비교를 하는 것이 값을 예측하기가 쉬워 집니다.

다만 주의할 점은 NaN값은 본인과의 비교에서 false가 나오는 유일한 값입니다.

 0 === 0 //true
 0 == -0 // true
 0 === -0 // true

0 은 음의 0의 값과 같습니다.

대소 비교 연산자	설명
>	좌항이 우항보다 크다.
<	좌항이 우항보다 작다.
>=	좌항이 우항보다 크거나 같다.
<=	조항이 우항보다 작거나 같다.

대소비교 연산자는 우리가 수학문제를 풀때 사용했던 그대로의 의미를 가지고 있습니다.

---

삼항 조건 연산자

삼항 조건 연산자는 표현식입니다.

표현식은 뭐였는지 기억하시나요?
값으로 사용할 수 있는 문이라고 했죠.

따라서 삼항 조건 연산자는 표현식이라서 값으로 사용할 수 있게 됩니다.

const score = 100

const foo = score>=100 ? '대단해요!' : '그래도 잘했어요'; // 대단해요!
//조건? 참일때 수행할 문 : 거짓일때 수행할 문;

---

논리 연산자

논리 연산자	의미
||	논리합
&&	논리곱
!	부정

true || true; // true
true || false; // true
false || true; // true
false || false; // false

true && true; // true
true && false; // false
false && true; // false
false && false; // false

!true // false
!false // true
!!true // true
!!false // false

논리합은 언제나 true값을 먼저 찾아 반환합니다.

논리곱은 만약 false값이 있으면 false 값을 반환합니다.

좌항부터 우항으로 읽어나갑니다.

---

그룹 연산자

그룹연산자도 마찬가지로 우리가 수학에서 자주 사용했던 괄호에 대한 내용입니다.

우선순위를 조정할 때 사용하게 됩니다.

2 * (3 + 5) // 16

---

typeof 연산자

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

Math.pow(2,2) // 4

(-2)**2 //음수의 경우 괄호로 묶어서 표현해야 합니다.

제곱을 표현하는 연산자입니다.

보통 쉽게 곱셈연산자를 두번 사용해서 표현합니다.

---

연산자 우선순위

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

위와 같은 순서는 사실 우리가 코드를 작성하면서 무의식적으로 사용하는 것을 나타낸 것이기 때문에
암기하기 위해 애쓰지 않으셔도 됩니다.

아~ 그냥 이렇게 흐름이 흘러가는 구나 하고 알고 계시면 됩니다!