자바스크립트 == 과 ===의 차이

 

 

대부분 사람은 == 은 쓰지 말고 === 을 지향하라는 말을 많이 들어봤을 것입니다.

물론 저도 그렇게 생각합니다.

하지만 왜 그런지 이유를 아는 것도 중요하죠

 

그럼 이제 == 과 === 의 비교 원리에 대해서 알아봅시다.

 

📖 == (동등 비교 연산자)

동등 비교 연산자는 좌항과 우항의 값이 같으면 true를 반환합니다.

여기서 둘의 타입이 다르면 자바스크립트 엔진이 하나의 타입으로 통일해서 비교하려는 성질을 갖습니다.

예를 들어보겠습니다.

 

// 타입이 같으면 그대로 비교한다.
5 == 5; // true

// 타입이 다르면 암묵적 타입 변환을 통해 타입을 일치시켜서 동등하면 true를 반환합니다.
// '5'를 number로 바꾸면 5가 되니 true입니다.
5 == '5' // true

// 빈 문자열은 number로 바뀌면 0이니 true이다.
0 == '' // true

// '0'이 number로 타입변환되면 0이니 true이다.
0 == '0'

// '0' 과 '' 같은 문자열이니 타입을 변환하지 않고 비교하게 되어 false이다.
'0' == '';  // false


false == 'false'; // 어떤 타입으로 통일시켜도 값이 다르니 false
false == null; // false와 null(메모리를 할당받지 못한 상태)은 비교할 수 없으니 false
false == undefined; // false와 undefined(값이 없는 상태)은 비교할 수 없으니 false

false == '0'; // false는 number로 변환하면 0이고 '0' number로 변환하면 0이니 true

 

 

이러한 성질 때문에 예측하기 어려우므로 사용하지 말라는 것입니다.

 

이러면 앞에서 보인 스폰지밥 밈도 이해가 가시죠?

0 == "0" 는 true입니다.

0 == [] 는 true죠 둘 다 number로 변환하면 0이니까요

 

하지만 아쉽게도 [] == "0"는 false입니다

이 때에는 "0"가 number로 변하지 않고 값이 있음으로 해석하게 됩니다.

반대로 [](빈 배열)은 값이 없음으로 해석되어 둘은 false로 평가됩니다.

이 출력 결과를 보시면 이해가 되실 겁니다.

" " 값이 있는 문자열은 [] 값이 없는 빈 배열과 다릅니다

"" 값이 없는 문자열은 [] 값이 없는 빈 배열과 같습니다.

 

 

📖 === (일치 비교 연산자)

일치 비교 연산자는 값과 타입 모두 같은지 검사합니다.

위에서 보여드렸던 코드에서 ==만 바꿔서 비교해드리겠습니다.

// 타입과 값이 같아 그대로 비교한다.
5 === 5; // true

// 타입이 일단 다르니 false를 반환한다.
5 === '5' // false

// 타입이 일단 다르니 false를 반환한다.
0 === '' // false

// 타입이 일단 다르니 false를 반환한다.
0 == '0' // false 

// 타입은 같지만 값이 다르니 false 반환한다.
'0' == '';  // false


false == 'false'; // 타입이 일단 다르니 false를 반환한다.
false == null; // false와 null(메모리를 할당받지 못한 상태)은 비교할 수 없으니 false
false == undefined; // false와 undefined(값이 없는 상태)은 비교할 수 없으니 false

false == '0'; // 타입이 일단 다르니 false를 반환한다.

 

=== 연산자는 이렇게 타입과 값을 모두 체크하니 예측하기 쉬워졌습니다.

 

 

✔ 결론

==을 쓰지 말고 === 을 씁시다.

 

앞에 스폰지밥 밈처럼 == 을 사용할 때 어떤 것이 같고 다른지는 이해할 필요, 외울 필요는 없는 것 같습니다.

저걸 외워서 프로젝트에 적용하게 되면 가독성이 안 좋아질뿐더러 어떻게 동작할지 예상하기 어려울 뿐이죠.