[FE] 📚 자바스크립트 ==와 ===의 차이

728x90

🤗 오늘의 위클리 페이퍼는

자바 스크립트에서 == 와 ===가 어떻게 다른지에 대한 토픽입니다.

JavaScript에서 ==와 ===는 비교 연산자로, 두 값의 동등성을 비교하는 데 사용됩니다.

이 두 연산자는 비슷해 보이지만, 그 동작 방식과 의미는 다릅니다.

📙 '==' 동등 연산자

(loose equality)

'==' 연산자는 두 값의 동등성을 비교할 때 사용됩니다.
이 연산자는 비교할 때 타입 강제 변환이 이루어지며, 두 값이 같은지 여부를 판단합니다.

👉 동작 방식

두 값이 같은 타입이 아니면, JavaScript 엔진은 두 값을 비교하기 전에 타입을 강제로 변환합니다.
변환된 값들을 비교하여 동등성 여부를 결정합니다.

0 == false; // true, 숫자 0은 불리언 false로 변환됨
1 == true; // true, 숫자 1은 불리언 true로 변환됨
'1' == 1; // true, 문자열 '1'은 숫자 1로 변환됨
'' == 0; // true, 빈 문자열은 숫자 0으로 변환됨
null == undefined; // true, null과 undefined는 동등함

📗 '===' 일치 연산자

(strict equality)

=== 연산자는 엄격한 동등성을 비교할 때 사용됩니다.

이 연산자는 비교할 때 타입 변환을 수행하지 않고, 두 값의 타입과 값 모두를 비교합니다.

👉 동작 방식

두 값의 타입과 값이 모두 동일한 경우에만 true를 반환합니다.
타입이 다르면 바로 false를 반환합니다.

0 === false; // false, 숫자 0은 불리언 false와 타입이 다름
1 === true; // false, 숫자 1은 불리언 true와 타입이 다름
'1' === 1; // false, 문자열 '1'과 숫자 1은 타입이 다름
'' === 0; // false, 빈 문자열과 숫자 0은 타입이 다름
null === undefined; // false, 타입이 다름

✅ 결론

'==' 연산자는 값의 동등성을 비교할 때 타입 강제 변환이 일어나며, 느슨한 동등성을 판단합니다.
'===' 연산자는 값의 동등성과 타입을 엄격하게 비교하며, 정확한 동등성을 판단합니다.

일반적으로 JavaScript에서는 === 연산자를 사용하여 느슨한 동등성의 함정을 피하는 것이 권장됩니다. 타입 변환에 의한 예기치 않은 결과를 방지하고 코드의 명확성을 유지하기 위해 엄격한 동등성 비교를 사용하는 것이 좋습니다.