7장 연산자

---

출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.

자바스크립트의 연산자에서 몰랐거나 확실하지 않게 알고 있었던 것을 정리하였습니다.

산술 연산자

+단항 연산자

//아무런 효과가 없다
+10 //10
+(-10) //-10

var x = '1';
console.log(+x); //1
console.log(x); //'1'

x = true;
console.log(+x); //1
console.log(x); //true

x = false;
console.log(+x); //0
console.log(x); //false

x = 'string';
console.log(+x); //NaN
console.log(x); //'string'

-단항 연산자

//부호를 반전한다.
-(-10) //10

console.log(-'1') //-1
console.log(-true) //-1
console.log(-'string') //NaN

문자열 연결 연산자

console.log('1' + 1); //'11'
console.log(1 + '2'); //'12'
console.log(1 + true); //2, true는 1로 변환
console.log(1 + false) //1, false는 0으로 변환
console.log(1 + null) //1, null은 0으로 변환
console.log(+undefined) //NaN
console.log(1 + undefined) //NaN

비교 연산자

동등 비교 연산자와 일치 비교 연산자로 나뉘며, 동등 연산자는 같은 값인지를 평가하여 boolean 값을 반환한다. 일치 비교 연산자는 좌항과 우항의 값과 타입을 평가하여 boolean 값을 반환한다. 즉, 동등 비교 연산자는 느슨한 비교를, 일치 비교 연산자는 엄격한 비교를 한다.

동등 비교 연산자

암묵적 타입 변환 후 좌항과 우항을 비교한다. 그렇기 때문에 결과 값을 예측하기 어려워 사용을 지양한다.

console.log(1 === 1) //true
console.log('1' == 1) //true
console.log('0' == '') //false
console.log(0 == '') //true
console.log(0 == '0') //true
console.log(false == 'false') //false
console.log(false == '0') //true
console.log(false == null) //false
console.log(false == undefined) //false

일치 비교 연산자

암묵적 타입 변환을 하지 않고 좌항과 우항을 비교한 값을 반환하므로 결과 값을 예측하기 쉽다. 또한 피연산자의 타입 일치 여부를 검사하기 때문에 더욱 정확한 비교가 이루어진다.

console.log(1 === 1) //true
console.log(1 === '1') //false

그러나 다음과 같은 예외 사항이 있으므로 주의하자

console.log(NaN === NaN) //false
console.log(+0 === -0) //true

일치 비교 연산자는 좌항과 우항이 NaN인 값을 비교하지 못한다. 따라서 isNan 함수를 사용하여 비교한다.

ES6부터 도입된 Object.is 함수는 위 문제점을 보완한 완벽한 비교 결과를 반환한다.

console.log(Onject.is(+0, -0)) //false
console.log(Object.is(NaN, NaN)) //true

typeof 연산자

console.log(typeof null) //object

typeof null의 결과 값이 object임을 알 수 있는데 이는 자바스크립트 초기에 발생한 버그다. 그러나 기존코드에 영향을 고려하여 수정하지 않고 있다. 따라서 typeof null의 사용을 주의하자.

console.log(typeof undeclared) //undefined

또한 선언하지 않은 undeclared 변수에 대해서도 참조에러가 아닌 undefined를 출력하는 것을 볼 수 있다.

지수 연산자

ES7부터 도입되었으며 좌항은 base, 우항은 exponent로 거듭제곱한 결과 값을 반환한다.

console.log(2 ** 2) //4console.log(2 ** -2) //0.25console.log(-2 ** 2) //Systax Errorconsole.log((-2) ** 2) //음수인 base는 괄호로 묶어서 사용

기타 연산자

• ?. : 옵셔널 체이닝 연산자
• ?? : null 병합 연산자
• delete : 프로퍼티 삭제
• new : 생성자 함수 호출하여 인스턴스 생성
• instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지를 판별
• in : 프로퍼티의 존재 유무 확인