[Javascript] '=='과 '===' 차이(동치비교 및 동일성)

안녕하세요. 글쓰는 개발자입니다.

고등학교 친구들을 만나고

집에 돌아오자마자 글을 쓰게 되었는데요.

저의 개발자 친구 K와 C랑 셋이서 이야기를 하다가

기술면접 이야기가 나왔고,

K가 Javascript의 '=='과 '==='의 차이를 알려줘서

바로 포스팅하게 되었습니다.

 

결론부터 말씀드리면,

"==="(strict equality) 을 사용하는 것이 바람직 합니다.

 

비교결과 예측이 쉽고, 형 강제(coercion) 변환이 일어나지 않기에

평가가 빠르기 때문입니다.

그럼, 결론을 염두에 두시고 아래 내용을 보시기 바랍니다.

 

 동치연산 비교표

 

아래 내용은 친구 K의 설명과 아래 링크의 설명을 참고했습니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

동치 비교 및 동일성

 

1. == (loose equality)

 

두 값이 같은지 비교하는데 값을 공통 형태로 변환한 후에 비교합니다.

변수 선언시 Type을 따로 지정하지 않는 Javacript의 경우

하나 또는 양쪽이 형 변환을 거치고 두 값을 비교합니다.

예를들어, 문자 '1'과 숫자 1은 엄연히 다르지만,

A == B의 경우 ToNumber(A) === B로 변환되어 비교되며,

결과는 True로 나타나게 됩니다.

즉, 정확한 비교가 안될 가능성이 매우 높다는 뜻이죠.

//MDN 소스코드
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

var num = 0;
var obj = new String("0");
var str = "0";
var b = false;

console.log(num == num); // true
console.log(obj == obj); // true
console.log(str == str); // true

console.log(num == obj); // true
console.log(num == str); // true
console.log(obj == str); // true
console.log(null == undefined); // true

// 둘 다 false, 드문 경우를 제외하고는
console.log(obj == null);
console.log(obj == undefined);

 

2. === (strict equality)

 

강제 형 변환없이 값을 비교하기 때문에 두 값이 서로 다른 형이면, 아니라고 판단합니다.

data type이 고려된 정확한 비교라고 할 수 있습니다.

따라서, ===을 사용하세요!

 

숫자를 제외하고 정확한 비교가 가능합니다.

숫자의 경우 예를 들어, +0과 -0을 같은 값으로 다루는데,

의미상 큰 차이가 없기 때문입니다.

//MDN 소스코드
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

var num = 0;
var obj = new String("0");
var str = "0";
var b = false;

console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false
console.log(obj === null); // false
console.log(obj === undefined); // false

 

좋은 친구를 둔 덕분에 이런것도 알 수 있었고

저도 여태껏 ==만 사용했었습니다.

사실, 여러 소스코드들을 보면서 ===을 쓰는코드도, ==을 쓰는 코드도

봤으면서 제대로 어떤 차이인가 찾아보지 않은 제 자신을 반성하는 계기도 되었습니다.

 

앞으로는 기능상 차이가 없는 것 같아보여도 코드가 다르다면, 어떤 이유로 다르고

어떤 장단점이 있는가 알아봐야겠습니다.