처음에는 자바스크립트를 공부하면서
연산자가 그다지 중요하지 않다고 생각했다.
당연스레 어렸을 때부터 배워온 수학을 떠올리면
당연한 것들이라고 생각했기 때문이다.
그런데 자바스크립트에서의 연산자는
수학에서의 연산자와 무조건 같은 의미가 아니다.
예를 들면,
수학에서 =는 최종 계산값을 구하는 연산자로
우항과 좌항이 같다는 의미를 가진다.
그런데 자바스크립트에서 =는 대입연산자로,
좌항에 있는 변수에 우항에 있는 변수 값을 대입, 즉 저장하는 것을 의미한다.
또한 자바스크립트에서는 +가
덧셈을 의미하기도 하지만,
숫자가 아닌 피연산자 앞에 적게되면(예: +prompt( ))
해당 값을 숫자형으로 변경해주는 "단항 연산자"로 사용되기도 한다.
즉, Number()와 같은 작업을 해준다고 보면 된다.
이 부분을 몰랐을 때는,
아니 덧셈 기호를 왜 자꾸 앞에 붙일까 했는데
조금은 이해가 가기 시작했다.
참고로 단항 연산자로서 +는 이항덧셈연산자인 +보다 우선순위가 더 높다!
모던 자바스크립트에 적혀있는 예제를 보면,
이런 코드가 있다고 할 때,
해당 값이 23이 아닌, 5가 출력되는 이유가 바로 연산자 우선순위 때문.
let num1 = '2';
let num2 = '3';
alert( +num1 + +num2 ); // 5 출력
당연히 외울 필요는 없을 것 같고
기본적인 것들만 인식하고 있으면 될 것 같다!
순위가 높을수록 먼저 계산이 수행된다는 점을 기억하자.
| 연산자 우선순위 | 연산자 이름 및 기능 | 연산 방향 | 연산자 기호 |
|---|---|---|---|
| 21 | Grouping | n/a | ( … ) |
| 20 | Member Access | left-to-right | … . … |
| Computed Member Access | left-to-right | … [ … ] | |
| new (with argument list) | n/a | new … ( … ) | |
| Function Call | left-to-right | … ( … ) | |
| Optional chaining | left-to-right | ?. | |
| 19 | new (without argument list) | right-to-left | new … |
| 18 | Postfix Increment | n/a | … ++ |
| Postfix Decrement | … -- | ||
| 17 | Logical NOT (!) | right-to-left | ! … |
| Bitwise NOT (~) | ~ … | ||
| Unary plus (+) | + … | ||
| Unary negation (-) | - … | ||
| Prefix Increment | ++ … | ||
| Prefix Decrement | -- … | ||
| typeof | typeof … | ||
| void | void … | ||
| delete | delete … | ||
| await | await … | ||
| 16 | Exponentiation (**) | right-to-left | … ** … |
| 15 | Multiplication (*) | left-to-right | … * … |
| Division (/) | … / … | ||
| Remainder (%) | … % … | ||
| 14 | Addition (+) | left-to-right | … + … |
| Subtraction (-) | … - … | ||
| 13 | Bitwise Left Shift (<<) | left-to-right | … << … |
| Bitwise Right Shift (>>) | … >> … | ||
| Bitwise Unsigned Right Shift (>>>) | … >>> … | ||
| 12 | Less Than (<) | left-to-right | … < … |
| Less Than Or Equal (<=) | … <= … | ||
| Greater Than (>) | … > … | ||
| Greater Than Or Equal (>=) | … >= … | ||
| in | … in … | ||
| instanceof | … instanceof … | ||
| 11 | Equality (==) | left-to-right | … == … |
| Inequality (!=) | … != … | ||
| Strict Equality (===) | … === … | ||
| Strict Inequality (!==) | … !== … | ||
| 10 | Bitwise AND (&) | left-to-right | … & … |
| 9 | Bitwise XOR (^) | left-to-right | … ^ … |
| 8 | Bitwise OR (|) | left-to-right | … | … |
| 7 | Logical AND (&&) | left-to-right | … && … |
| 6 | Logical OR (||) | left-to-right | … || … |
| 5 | Nullish coalescing operator (??) | left-to-right | … ?? … |
| 4 | Conditional (ternary) operator( | right-to-left | … ? … : … |
| 3 | Assignment | right-to-left | … = … |
| … += … | |||
| … -= … | |||
| … **= … | |||
| … *= … | |||
| … /= … | |||
| … %= … | |||
| … <<= … | |||
| … >>= … | |||
| … >>>= … | |||
| … &= … | |||
| … ^= … | |||
| … |= … | |||
| … &&= … | |||
| … ||= … | |||
| … ??= … | |||
| 2 | yield | right-to-left | yield … |
| yield* | yield* … | ||
| 1 | Comma / Sequence | left-to-right | … , … |
이 표를 보면 아직 보지도 못한 것들이 많이 나오고
알았던 부분들도 이게 연산자라고? 싶은 것도 있다.
이걸 안다고 코딩을 실력이 1%라도 늘 것 같지는 않지만..
시간 낭비일 수도 있지만,
필요할 때 보면서 공부해야겠다!
'ℹ️ INFORMATION > 💾 HTML + CSS + JS' 카테고리의 다른 글
| [CSS] Flexbox와 Grid + 연습 게임 (1분 코딩님의 설명 추천) (0) | 2021.04.13 |
|---|---|
| [JS] 자바스크립트 DOM 스크립트 기본 문법 중 꼭 기억해야 하는 부분! (0) | 2021.04.01 |
| [JS] 자바스크립트로 콘솔창에 for문을 이용해서 다이아몬드 별찍기 연습 (2) | 2021.03.25 |
| [JS] 자바스크립트 함수를 이용해 간단한 계산기 만들기 예제! (feat.왕초보) (0) | 2021.01.10 |
| 스파르타 코딩 클럽 : 나홀로 코딩 후기 및 추천 ( 정규 수업 8만원 추가 할인 방법 공유) (0) | 2020.12.30 |