[javascript] 동일 비교 연산자 '==' '===' 차이점

배경

• 이전 프로젝트에서는 ESLint를 통해 '==='를 개발 표준으로 설정
• 현재 프로젝트에서는 ESLint 설정 X
  • ASIS : cd == "12345" (많이 사용하고 있던 조건)
  • 변경전 TOBE : cd === "12345" (조건 분기 X)
    • typeof(cd) => number!
  • 변경후 TOBE : cd === 12345 (조건 정상 분기)
• '==' 과 '==='의 차이점을 자세히 알아보자!

'==' '===' 차이점!

비교 연산자	정의	비교 기준
==	느슨한 동일 비교	only 값
===	엄격한 동일 비교	자료형 && 값

비교 샘플

1. 숫자

123 == '123' // true
123 === '123' // false
// typeof(123) : number !== typeof('123') : string

0 == NaN // false
0 === NaN // false
NaN == NaN // false
NaN === NaN // false
// typeof(NaN) : number, 어떤 number와도 동일하지 않음! (Not of Number)

2. undefined

undefined == 0 // false
undefined == null // true
undefined === null // false
// typeof(null) : object !== typeof(undefined) : undefined

3. boolean

true == 1 // true
true === 1 // false
// typeof(true) : boolean

4. array (object)

const arr1 = ['2', '9'];
const arr2 = ['2', '9'];
const arr3 = arr1

arr1 == arr2 // false
arr1 == arr3 // true

arr1 === arr2 // false
arr1 === arr3 // true
// typeof(arr1) : object, 배열 변수 할당 시 메모리 주소값 참조! ('==' '===' 결과 동일)
// json object {} 도 동일

권장사항

• '==='
  1. 자료형 변환 X
  2. 가독성 굿! => 소스만 보고도 변수의 자료형을 정확하게 인지할 수 있음

참고

• '!=' '!==' 도 동일