== vs === vs typeof

 

 

자바스크립트의 값을 비교할 때 주로 ==, ===, typeof 이 3가지를 사용합니다.
3가지 방법의 차이를 알아보겠습니다.

 

동등 연산자 ==, !=

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

동등 연산자는 두 피연산자를 비교하여 boolean 값을 반환합니다.
이 때 타입이 서로 다른 피연산자도 비교한다는 특징이 있습니다.

• 두 피연산자가 모두 객체라면 같은 객체를 참조할 때 true
• null 과 undefined 를 서로 비교할 때 true
• 타입이 다른 경우 동일한 타입으로 암시적 형변환해서 비교
  • 숫자와 문자열 비교 시 문자열을 숫자로 변환
  • boolean 과 비교 시 true 는 1, false 는 0으로 변환
  • 객체와 숫자, 객체와 문자열 비교 시 객체를 valueOf(), toString()을 사용해 비교

위와 같이 느슨한 비교를 한다는 특징 때문에 동등 연산자로 비교하는 것은 보통 지양됩니다.

 

일치 연산자 ===, !===

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

동등 연산자와 같은 값들을 비교했을 때 결과가 다른 것을 확인할 수 있습니다.
일치 연산자는 암시적 형변환이 발생하지 않고 타입까지 검사합니다.

• 서로 다른 타입의 비교 시 false
• 두 피연산자가 객체인 경우 같은 객체를 참조할 때 true
• 두 피연산자가 모두 null 이거나 undefined 인 경우 true
• 피연산자 중 하나가 NaN 이라면 false
• 숫자, 문자, boolean 끼리의 비교는 서로 동일한 값인 경우에만 true

위와 같은 비교를 하기 때문에 일치 연산자로 비교를 하는 것이 거의 모든 상황에서 비교적 안전합니다.

 

typeof

console.log(typeof 20); // number
console.log(typeof 'hello'); // string
console.log(typeof true); // boolean
console.log(typeof {}); // object
console.log(typeof foo); // undefined

typeof 연산자는 피연산자의 타입을 반환합니다.
자바스크립트의 내장 타입만 반환하며 null 을 제외한 기본 타입과 function, object 가 있습니다.
선언되지 않은 변수에 사용할 경우 undefined 값을 반환합니다.

 

정리

• 동등 연산자 ==, != 는 타입이 다른 경우 암시적 형변환을 통해 값을 비교한다
• 일치 연산자 ===, !== 는 타입까지 비교한다
• typeof 연산자는 피연산자의 타입을 반환한다