자바스크립트: '==' 와 '===' 는 다르다!

무엇이 다른가?

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

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

• 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에 말했듯이, ===는 변수 유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다.
• '==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교
• '==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> 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"

• 서로 호환되지 않는 두 변수를 비교하면 컴파일 오류* 를 일으키는 자바 평등 연산자(Java Equality 연산자)와 많이 비슷하다.

궁굼한 케이스

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"

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

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

권장사항

• 변수를 비교하거나 어떤 비교를 위해 항상 '===' 연산자를 사용 할 것을 권장한다.

• 가능한 '==' 연산자를 사용하지 않도록 하고, 대신 직접 자료형을 변환하여(casting) 보다 코드 가독성을 높이도록 한다.