[JavaScript] 📢 '==' 연산자와 '===' 연산자의 차이점 💯 총정리

목차

 '=='와 '==='의 차이 

• '=='는 비교하는 두 개의 값(피연산자)을 강제로 같은 형으로 변환한 후, 비교작업을 한다. 즉, 두 값의 타입이 다르더라도 형 변환된 값이 같다면 true를 리턴한다.
• '==='는 비교하는 두 개의 값(피연산자)의 타입과 값이 모두 같을 경우에는 true를 리턴한다.

JavaScript

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

console.log(false == 0); // true
console.log(false === 0); // false

위 첫번째 예제에서 숫자 1과 문자열 '1'을 비교하였다. '==' 연산자를 사용하여 비교하면, 두 피연산자의 타입이 달라도 true를 리턴하는 것을 확인할 수 있다. 그렇지만, '===' 연산자를 사용하여 비교하면, 둘 다 1이지만, 타입이 다르기 때문에 false를 리턴한다.

 

두 번째 예제에서는 boolean 값이 false와 숫자 0을 비교하였다. '==' 연산자를 사용하여 비교하면, 숫자 0을 false로 취급하여 true를 리턴한다. 그러나, '===' 연산자를 사용하여 비교하면, 두 개의 타입이 다르므로 false를 리턴한다.

 

보통, 정확한 비교를 하려 '==' 보다는 '===' 연산자를 사용하여 비교하는 것이 좋다.

---

 '=='연산자와 '==='를 이용한 unll, undefined 비교 

이번에는 '=='와 '===' 연산자를 이용하여 null, undefined 값을 체크했을 경우 나오는 값은 밑의 코드와 같다.

JavaScript

console.log(undefined == null); // true
console.log(undefined === null); // false

위의 코드를 보면 '==' 연산자를 이용하여 두 값(null과 undefined)을 비교하면 true를 리턴한다. 그러나, '===' 연산자를 이용하여 두 값을 비교하면 타입이 다르기 때문에 false를 리턴한다.

---

 '==' 연산자를 이용한 null, undefined 비교 예제 

JavaScript

let a; // undefined
let b = null; // null

console.log(a == null); // true
console.log(a == undefined); // true
console.log(b == null); // true
console.log(b === undefined); // false

변수를 선언하고 값을 할당하지 않으면 변수는 undefined 값을 가지게 된다. 따라서 변수 a는 undefined 값을 가지게 되며, 변수 b에는 null 값을 할당하였다.

 

'==' 연산자를 사용하여 null 값과 비교할 경우, 변수값이 null 이든 undefined이든 모두 true를 리턴한다. 마찬가지로, '==' 연산자를 사용하여 undefined 값과 비교를 하면, 변수값이 null 이든,  undefined 이든 모두 true를 리턴한다.

---

 '===' 연산자를 이용한 null, undefined 비교 예제 

JavaScript

let a; // undefined
let b = null; // null

console.log(a === null); // false
console.log(a === undefined); // true
console.log(b === null); // true
console.log(b === undefined); // false

'===' 연산자를 이용하여 비교할 경우, 정확하게 두 값이 일치할 경우에만 true를 리턴한다.

---

참고 문헌

• 1[JavaScript]==, === 차이
• 2[Javascript] '=='와 '==='의 차이 (null, undefined)
• 3[Javascript] '==' 연산자와 '===' 연산자의 차이점