자바스크립트, 꼭 ===를 사용해야 할까? ==와 ===의 차이 완벽하게 이해하기

자바스크립트에서 ==와 ===는 값을 비교할 때 자주 사용되는 연산자입니다. 하지만 ===를 무조건 사용하는 것이 정답일까요? 두 연산자의 차이점과 참조형 데이터 타입에서의 동작 방식을 알아보면서, 어떤 상황에서 ==가 적절할 수 있는지 함께 살펴봅시다.

1. ===는 참조값을 비교

=== 연산자는 엄격한 동등 비교(strict equality)를 수행하며, 타입과 값이 모두 동일할 때 true를 반환합니다.
참조형 데이터 타입(객체, 배열, 함수)의 경우, ===는 두 변수가 같은 메모리 주소를 가리키고 있는지를 비교합니다. 객체의 내용이 같더라도 메모리 주소가 다르면 false가 반환됩니다.

const obj1 = { name: 'Alice' }; 
const obj2 = { name: 'Alice' }; 
const obj3 = obj1;

console.log(obj1 === obj2); // false - 내용은 같지만 다른 메모리 주소를 참조 
console.log(obj1 === obj3); // true - 같은 메모리 주소를 참조

2. ==와 ===의 차이

== 연산자는 느슨한 동등 비교(loose equality)를 수행하며, 두 값의 타입이 다를 경우 자동 형 변환(type coercion)을 통해 타입을 일치시킨 후 비교합니다.
반면, ===는 엄격한 동등 비교로 형 변환 없이 타입과 값이 모두 같아야 true를 반환합니다.

console.log(5 == '5'); // true - 문자열 '5'가 숫자 5로 변환되어 비교 
console.log(5 === '5'); // false - 타입이 다르므로 false

3. 참조형 데이터의 경우 ==와 ===는 동일하게 작동

참조형 데이터 타입에서는 ==와 === 모두 참조를 비교합니다. 즉, 두 변수가 같은 메모리 주소를 가리키는지를 확인합니다.
이 경우 객체의 내용이 같더라도, 다른 메모리 주소를 참조하면 false를 반환합니다.

const arr1 = [1, 2, 3]; 
const arr2 = [1, 2, 3]; 
const arr3 = arr1;

console.log(arr1 == arr2); // false - 다른 참조를 가진 배열 console.log(arr1 === arr2); // false - 다른 참조를 가진 배열 console.log(arr1 === arr3); // true - 같은 참조를 가진 배열

정리

==는 자동 형 변환을 통해 값을 비교하고, ===는 형 변환 없이 값과 타입이 모두 같아야 true를 반환합니다.
참조형 데이터 타입에서는 ==와 === 모두 참조값(메모리 주소)을 비교하며, 내용이 같더라도 참조가 다르면 false를 반환합니다.