1. 산술 연산자
증가/감소(++/--) 연산자는 위치에 의미가 있다.
뒤에 위치한 경우 먼저 다른연산을 수행하고 피연산자값을 증가/감소 시킨다.
var x = 5, result;
// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6
// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7
// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6
// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5
자바스크립트 엔진에 의해 타입이 자동 변환되기도 한다. 암묵적 타입변환 또는 타입 강제변환 이라고 한다.
// 단항 연산자
+10 // 10
+'10' // 10
+true // 1
+false // 0
// 문자열 연결 연산자
'1' + '2' // '12'
'1' + 2 // '12'
// 산술 연산자
1 + 2 // 3
1 + true // 2 (true → 1)
1 + false // 1 (false → 0)
true + false // 1 (true → 1 / false → 0)
1 + null // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)
2. 할당 연산자
연산자 | 의미 |
= | 좌항에 우항 대입 |
+= | 좌항에 우항 더한 값 대입 |
-= | 좌항에 우항 뺀 값 대입 |
*= | 좌항에 우항 곱한 값 대입 |
/= | 좌항에 우항 나눈 값 대입 |
%= | 좌항에 우항 나눈 나머지 대입 |
할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
3. 비교 연산자
3.1 동등/일치 비교 연산자
동등비교는 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
일치비교는 암묵적 타입변화를 하지않고 값을 비교한다.
연산자 | 의미 |
== | 동등 비교(값) |
=== | 일치 비교(값과 타입) |
!= | 부동등 비교(값) |
!== | 불일치 비교(값과 타입) |
NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN ;
0을 비교하면 모두 true를 반환한다.
0 === -0;
0 == -0;
3.2 대소 관계 비교 연산자
연산자 | 의미 |
> | 좌항이 우항보다 큼 |
< | 좌항이 우항보다 작음 |
>= | 좌항이 우항보다 크거나 같음 |
<= | 좌항이 우항보다 작거나 같음 |
4. 삼항 조건 연산자
var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수
삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.
따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.
조건에 따라 어떤 값을 결정해야 한다면 if ... else 문보다 삼항 조건 연산자 표현식을 사용하는 편이 유리하지만 조건에 따라 수행해야 할 문이 하나가 아니라 여러 개라면 if ... else 문의 가독성이 더 좋다.
5. 논리 연산자
6. 쉼표 연산자
7. 그룹 연산자
8. 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
"null"을 반환하는 경우는 없다.
값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하자. 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 undefined를 반환한다.
+ 선언하지 않은 식별자를 typeof연산자로 연산해 보면, 참조에러가 발생하지 않고 undefined를 반환한다.
9. 지수 연산자
10. 그 외의 연산자
11. 연산자의 부수효과
12. 연산자 우선순위
1 | () |
2 | new(매개변수 존재),.[](프로퍼티 접근),()(함수호출),?.(옵셔널 체이닝 연산자) |
3 | new(매개변서 미존재) |
4 | X++,X-- |
5 | !X,+X,-X,++X,--X,typeof,delete |
6 | ** (이항연산자 중에서 우선순위가 가장 높음) |
7 | * ,/,% |
8 | +,- |
9 | <,<=,>,>=,in,instanceof |
10 | ==,!==,===,!== |
11 | ??(null 병합 연산자) |
12 | && |
13 | ㅣㅣ |
14 | ? ... : ... |
15 | 할당 연산자(=,+=,-=,...) |
16 | , |
13. 연산자 결합 순서
'STUDY > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 09장 타입 변환과 단축 평가 (0) | 2022.03.11 |
---|---|
[모던 자바스크립트 Deep Dive] 08장 제어문 (0) | 2022.03.11 |
[모던 자바스크립트 Deep Dive] 06장 데이터 타입 (0) | 2022.03.09 |
[모던 자바스크립트 Deep Dive] 05장 표현식과 문 (0) | 2022.03.08 |
[모던 자바스크립트 Deep Dive] 04장 변수 (0) | 2022.03.07 |