== vs === vs typeof

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 다섯 번째인 == vs === vs typeof 항목을 공부하면서 간단하게 작성한 글이다.

 

자바스크립트에서 두 변수가 같은지 확인하기 위해서 사용하는 연산자는 '=='와 '===' 이 있다. 두 연산자 모두 변수가 같으면 true 아니면 false를 반환한다. 두 연산자의 차이점은 '==' 은 피연산자들의 type이 다르더라도 값이 같으면 true를 반환하지만 '==='은 type과 값이 모두 같아야 true를 반환한다. 그래서 '==='은 strict equals 또는 identically equal 이라고도 한다. 그래서 두 변수가 동일한지 확인 할 때 주로 '==='을 사용한다.

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

그렇다면 '==' 연산자가 어떻게 type이 다른 피연산자들을 비교를 하는지 알아보도록 하자.

 

1. 두 피연산자를 확인해서 만약 서로 같은 Type이라면 '===' 연산자를 호출해서 결과를 반환한다. 만약 아니라면: 
2. 두 피연산자가 null과 undefined인지 확인한다(null == undefined). 만약 그렇다면 true를 반환한다. 만약 아니라면:
3. string과 numbe를 비교하는지 확인한다. 만약 그렇다면 string을 number로 Type Coercion(타입 변환)을 하고 '==' 연산자를 호출한다. (다시 1번부터 진행한다.) 만약 아니라면:
4. boolean과 다른 타입을 비교하는지 확인한다. 만약 그렇다면 boolean을 number로 Type Coercion(타입 변환)을 하고 '==' 연산자를 호출한다. (다시 1번부터 진행한다.) 만약 아니라면:
5. object를 number, string, symbol과 비교하는지 확인한다. 만약 그렇다면 object를 Primitive Type으로 변환하고 '==' 연산자를 호출한다. (다시 1번부터 진행한다.) 만약 아니라면:
6. 더 이상 확인할 수 있는 게 없으니 fasle를 반환한다.

typeof

자바스크립트의 경우에는 변수의 type은 언제든지 변경될 수 있기 때문에 지금 현재에 무슨 type인지 알 수가 없다. 그래서 현재 변수의 type을 알아내기 위해 typeof를 사용한다.

let b = 1;
console.log(typeof b); // number
b = '1';
console.log(typeof b); // string

console.log(typeof null); //object

위 코드에서 null의 타입이 object라고 출력되는 것을 볼 수 있는데, 이것은 자바스크립트 초기 오류로 null은 null 타입이 맞다. 그러나 이것을 수정하면 다른 많은 곳에서 에러가 발생할 수 있기 때문에 고치지 않는 것으로 결정했다.