[JS] '==' 와 '===' 는 다르다

무엇이 다른가?

저는 자바 언어를 먼저 배운 입장에서 자바스크립트에 깊게 노출되지 않았기 때문에 충격을 받았다. 비록 자바스크립트의 어떤 기능, 사건 처리, 그리고 어떤 jQuery 속임수에 상당히 익숙했지만, 자바스크립트에 대한 미묘한 세부 사항들을 알지 못했다. 다시 마음을 잡고 웹 개발의 기본을 공부하기로 마음 먹은 저는 '==' 와 '===' 연산자의 차이를 알지 못한다고 스스로 말하면서 올바른 생각을 했다.

정답부터 말하자면, '=='와 '===' 연산자의 주된 차이점은, 예를 들어, 숫자를 숫자 리터럴과 비교하면, '=='는 그것을 허용하지만, '===' 두 변수의 형식은 동일하지 않은 경우, 값뿐만 아니라 두 변수의 유형도 확인하므로, 허용하지 않는 것이다. 즉, '==='는 'false'으로 반환하고, '=='는 'true'로 반환다.

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

자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에 말했듯이, ===는 변수 유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다.

#간단한 예제

숫자와 불리언 비교

✔ 0값은 false와 동일하므로 -> true 출력

0 == false // true 
✔ 두 피연산자의 유형이 다르기 때문에 ->false

0 === false // expected output: false 
console.log(typeof 0); 	// expected output: "number"
console.log(typeof false); // expected output: "boolean"
🔍 숫자와 문자열 비교
✔ 자동 유형변화 비교

2 == "2" // expected output: true
✔ 두 피연산자의 유형이 다르기 때문에 ->false

2 === "2" // expected output: false 
console.log(typeof 2);	// expected output: "number"
console.log(typeof "2");  // expected output: "string"

#궁굼한 케이스들

1) null 와 undefined 비교했을 때 어떤 결과가 나올 것인가?

✔ 자동 유형변화 비교

null == undefined // expected output: true
✔ 두 피연산자의 유형이 다르기 때문에 ->false

null == undefined // expected output: false 
console.log(typeof null);	// expected output: "object"
console.log(typeof undefined);  // expected output: "undefined"

2) '!=' 와 '!==' 비교연산자의 차이는?

✔ 값이 다르지 않음으로 (자료형 비교 안함)

2 != "2" // expected output: false
✔ 두 피연산자의 유형이 다른 것이 맞기 때문에 -> true

2 !== "2" // expected output: true 
console.log(typeof 2);	// expected output: "number"
console.log(typeof "2");  // expected output: "string"

비교 연산자를 이용하여, 'NaN'을 비교하면?

NaN (Not a Number)은, 어떤 것과도 같지 않다는 것을 기억해야 한다.

 

자바스크립트: '==' 와 '===' 는 다르다! (velog.io)