JavaScript '==' 와 '===' 차이
알고리즘 스터디 중 JS로 문제를 푸는 스터디원의 코드를 보고 이야기한 내용을 정리합니다.
위 두 연산자는 스크립트에 존재하는 두 연산자입니다.
두 연산자의 차이를 알아봅니다.
- '==' 연산자(동등 연산자)
피연산자들의 '값'의 일치여부를 비교하여 결과를 반환합니다.
- '===' 연산자(일치 연산자)
피연산자들의 '값' && '타입'의 일치여부를 비교하여 결과를 반환합니다.
- '==' 연산자(동등 연산자) 예제 코드
"1" == 1; // true
1 == "1"; // true
0 == ''; // true
0 == false; // true
0 == null; // false
0 == undefined; // false
null == undefined; // true
처음엔 피연산자들의 '값'만 비교하는구나 하고 넘어갔습니다.
0 == false 같은 케이스도 JS에서는 0과 false모두 falsy 한 값이니까 당연히 true ! 라고 생각했습니다.
그런데 샘플 코드 중 한가지 의문을 가졌습니다.
0 == '' 은 왜 true지?
0 == null, 0 == undefined, null == undefined 의 결과가 쉽게 이해가 가지 않았습니다.
구글링을 해본 결과
'==' 연산자(동등 연산자)는 falsy/truthy 값으로 비교하는 게 아니라 형 변환이 이뤄진 후 값을 비교한다고 합니다.
아무렇게나 형 변환이 이뤄지는 것은 아니고, 규칙이 존재했습니다.
규칙은 MDN Web Docs에서 찾을 수 있었습니다.
Docs 전문을 읽어보시는 것도 추천합니다.
MDN Web Docs : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Equality
- '===' 연산자(일치 연산자) 예제 코드
console.log("hello" === "hello"); // true
console.log("hello" === "hola"); // false
console.log(3 === 3); // true
console.log(3 === 4); // false
console.log(true === true); // true
console.log(true === false); // false
console.log(null === null); // true
console.log("3" === 3); // false
console.log(true === 1); // false
console.log(null === undefined); // false
'===' 연산자(일치 연산자)는 어려움 없이 이해할 수 있었습니다.
MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality
정리하자면, '==' 연산자(동등 연산자)보다 '===' 연산자(일치 연산자)가 더 엄격한 비교를 수행합니다.
따라서, JS에서는 특별한 경우가 아닌 경우 '===' 연산자(일치 연산자)를 사용하는 걸 권장한다고 합니다.
JavaScript는 알면 알수록 심오한 녀석인 것 같습니다.
참고자료
https://stackoverflow.com/questions/7605011/why-is-0-true-in-javascript
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Equality
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality
'JavaScript' 카테고리의 다른 글
| [JavaScript] 대화상자 삭제하기 (0) | 2021.10.17 |
|---|
댓글