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

자바스크립트를 다룰 때 ==와 ===는 매우 자주 등장하는 연산자입니다. 하지만 둘의 차이를 정확히 이해하지 못하면 의도치 않은 버그가 발생할 수 있습니다.

 

목차

1. == (느슨한 동등 연산자 - Loose Equality)

2. === (엄격한 동등 연산자 - Strict Equality)

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. == (느슨한 동등 연산자 - Loose Equality)

==는 동등 연산자로, 두 값을 비교할 때 타입 변환(type coercion)을 수행합니다. 즉, 비교하는 값의 데이터 타입이 다르더라도 자동으로 형변환을 수행한 후에 비교합니다. 

 

특징

• 타입이 다르더라도 비교 전 타입 변환이 일어납니다.
• 타입 변환은 때로 예측하지 못한 결과를 초래할 수 있습니다.

예시

console.log(5 == '5');          // true (문자열 '5'가 숫자 5로 변환 후 비교)
console.log(false == 0);        // true (false는 숫자 0으로 변환)
console.log(null == undefined); // true (둘 다 비슷한 '없음' 상태로 간주)
console.log('' == 0);           // true (빈 문자열이 숫자 0으로 변환)
console.log([1] == 1);          // true (배열 [1]이 숫자 1로 변환)

 

사용 사례

 

• 타입 변환을 의도적으로 활용해야 하는 경우에 사용합니다.
• 예를 들어, null과 undefined를 느슨하게 동등하게 처리하고 싶을 때

if (value == null) {
    // value가 null이거나 undefined일 때 실행
}

 

 

 

2. === (엄격한 동등 연산자 - Strict Equality)

===는 일치 연산자로, 두 값이 데이터 타입과 값이 모두 같은지 비교합니다. 따라서 ===를 사용하면 타입 변환을 허용하지 않으므로 정확한 값을 비교할 수 있습니다.

 

특징

 

• 두 값의 타입과 값이 완전히 같아야 참이 됩니다.
• 타입 변환이 일어나지 않으므로 예측 가능한 결과를 얻을 수 있습니다.

예시

console.log(5 === '5');          // false (숫자와 문자열의 타입이 다름)
console.log(false === 0);        // false (boolean과 숫자의 타입이 다름)
console.log(null === undefined); // false (타입이 다름)
console.log('' === 0);           // false (문자열과 숫자의 타입이 다름)
console.log([1] === 1);          // false (배열과 숫자의 타입이 다름)

 

 

사용 사례

 

• 대부분의 상황에서 ===를 사용하는 것이 안전합니다.

 

 

 

결론

• ===는 안전하고 예측 가능한 비교를 위해 기본적으로 사용하는 것이 좋습니다.
• ==는 타입 변환을 의도적으로 활용하려는 경우에만 신중하게 사용하세요.

자바스크립트의 유연성은 개발자에게 많은 자유를 주지만, 종종 의도치 않은 동작을 유발하기도 합니다.
==를 사용해야 하는 경우 예측하지 못한 결과를 초래할 수 있으니 최대한 사용을 지양하세요.

 

💡Tip : 린트(eslint) 설정에 "rules":{"eqeqeq":["error","always"]} 옵션을 추가해 보세요.

 

 

추천글

[JS] Promise.all 과 Promise.allSettled 차이

 

[JS] JavaScript의 클로저란?