모던 자바스크립트 Deep Dive 7장 : 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등으로 값을 만든다.

 

산술 연산자

이항 산술 연산자 : +, - , *, / , %

단항 산술 연산자 : +, -, ++, --

 

다른 것들은 있는 그대로 적용되나 ++, --는 기존 값을 바꾸는 부수효과를 지니며 이는 위치에 따라(전위 /후위) 달라진다.

var x =5, result

result = x++;
console.log(result,x) // 5 6
result = ++x
console.log(result,x) // 7 7

이 코드를 실행시키면 결과가 이처럼 나온다.

왜냐하면, result = x가 할당되고 그 후 x++로 x의 값이 변했기 때문에 값이 다른 것이다.

하지만, 밑에 코드는 ++x로 값이 변한 후 할당되었기 때문에 값이 같다.

 

또한, + 연산자를 사용하면 암묵적 타입 변환이 발생하며 불가능한 덧셈이 일어날 경우 NaN을 반환한다.

아래는 관련된 내용들이다.

var x = '1'
console.log(+x) //숫자로 형변환, 1
console.log(x) //'1'
console.log(1+'x') // '11'

x = true
console.log(+x) //숫자로 형변환, true =1/ false = 0 / null = 0, 1
console.log(x) //true
console.log(1+x) //2

x = 'hello'
console.log(+x) //숫자로 형변환 불가능, NaN
console.log(x) //'hello'

 

할당 연산자

=, += , *=, -=, /=, %= 는 값을 할당하여 변수의 값을 바꾼다. 이 과정에서 할당된 값을 평가하므로 이는 표현식이다.

 

비교 연산자

== , !=  : (부)동등 비교 연산자로 값이 일치한 지 비교한다.

===, !== : (불)일치 비교 연산자로 값과 타입이 일치하는 지 비교한다.

JS는 개발자의 의도와 관계없이 암묵적으로 타입을 자동 변환하는데 이를 암묵적 타입 변환이라 한다.

동등 비교 연산자(==)는 좌항과 우항을 비교할 때, 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

그래서, 다른 타입의 값이여도 같다 판단하기도 하며 예측하기 어려운 결과를 불러일으켜서 ==은 지양하고 ===을 사용한다.

5 == 5; // true

5 == '5' // true

이 때, === 또한 문제가 되는 2가지가 있다.

하나는 0, -0을 같게 판별하는 것이다. 이는 ES6에서 제공하는 Object.is를 이용하면 해결할 수 있으며 Object.is는 ===과 같으며 0, -0도 판별 가능하다.

다른 하나는 NaN끼리는 같다 보지 않는 문제이다. 이는 isNaN 빌트인함수를 사용할 수 밖에 없다.

0 === -0 // true
Object.is(-0,+0); // false

NaN === NaN // false
isNaN(NaN) // true

 

대소 관계 비교 연산자

> , <, >= , <= 비교하고 true, false를 반환한다.

 

삼항 조건 연산자

 

조건식 ? 조건식이 true라면 반환 : 조건식이 false라면 반환

삼항 연사자는 if else 문과 유사하다. 하지만, 결정적으로 다르다.

if..else문은 값으로 표현할 수 없지만 삼항 연산자는 값으로 평가할 수 있는 표현식인 문이다.

var x = 10
var result = if(x%2) {result = '홀수'} else {result = '짝수'} // error
var result = x%2 ? '홀수' : '짝수' // 짝수

간단한 경우 삼항 연산자가 편하지만, 복잡한 케이스의 경우 if...else문이 가독성 측면에서 유리하다.

 

논리 연산자

|| (or) , &&(and), !(not) 이다.

!는 암묵적 타입 변환을 통하여 항상 boolean 형을 반환한다.

논리합(||)과 논리곱(&&)은 피연산자 중 하나의 값을 반환하며 이는 단축평가에서 더 상세하게 다룬다.

 

쉼표 연산자

쉼표 연산자는 왼쪽 피연산자부터 차례대로 평가하고 반환한다.

 

그룹 연산자

괄호는 우선 순위가 가장 높다.

 

typeof 연산자

string ,boolean, undefined, symbol, object, function 중 하나의 문자열을 반환한다.

단, null은 object가 반환되는데 이유는 js의 초기 버그로 기존 코드에 영향이 갈 수도 있어서 수정되지 않았다.

또한, 선언되지 않은 식별자를 typeof를 할 경우 ReferenceError가 아닌 undefined를 반환한다.

 

지수 연산자

** 로 이항 연산자 중 가장 우선순위가 가장 높다.

 

기타 연산자

?(옵셔널 체이닝 연산자), ??(null 병합 연산자), delete(프로퍼티 삭제), new(생성자), instanceof(인스턴스 판별), in(프로퍼티 존재 확인)

이 연산자들은 추후 다시 각 장에 맞게 알아본다.

 

연산자의 부수 효과

일반적으로 연산자들은 다른 코드에 영향을 주지 않으나 ++, --, delete, = 는 다른 코드에 영향을 주는 부수효과를 발생시킨다.

 

우선순위

조금 다르지만, 더 자세한 내용은 공식문서를 참고하자.

연산자 우선순위 - JavaScript | MDN