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

무엇이 다른가?

"=="와 "==="의 차이점은 무엇일까, 예를 들어, 숫자를 숫자 리터럴과 피교하면 '=='는 그것을 허용하지만 

'==='는 두 변수의 형식이 동일하지 않는 경우, 값뿐만 아닌 두 변수의 유형도 확인하므로, 허용하지 않는것,

즉 '==='는 'false'으로 반환하고 '=='는 'true'로 반환한다.

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

자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 

중요하다. 위에서 말했듯, ===는 변수유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다.

다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다.

---

• '==' 연산자를 이용해 서로 다른 유형의 두 변수 [값] 비교
• '==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true).

---

#간단한 예제

🔍  숫자와 불리언 비교

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

0 == false // true

• 두 피연산자의 유형이 다르기 때문에 -> false 출력

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) '!=' 와 '!==' 비교연산자의 차이는?

유형 변환 비교와 엄격한 비교의 [값]과 [자료형]의 다름을 boolean 형식으로 반환한다.

• 값이 다르지 않음으로 (자료형 비교 X)
  

  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) 보다 코드 
  가독성을 높이도록 한다.

참고자료

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