[JS] 자바스크립트 '==' 와 '==='의 차이

 

자바스크립트를 시작한 지 얼마 안돼서 일반 프로그래밍 언어에서처럼 '=='를 '==='로 쓰는 줄 알았다. 하지만 이 둘의 차이가 명확히 존재했다. 이를 알게 된 계기는 최근 React 관련 프로젝트를 진행하면서 알게 됐다. 자바스크립트 기본기가 많이 부족하다는 것을 깨달았고, 조만간 React 프로젝트 개발일지를 올리면서 내가 오류를 겪은 코드들을 설명하면서 이 포스트가 링크되지 않을까 싶다.

 

🚀 차이점

'=='와 '===' 연산자의 주된 차이점은, value와 value를 비교할 때, '=='는 그것을 허용한다. 하지만 '==='는 value뿐만 아니라 두 변수의 data type도 비교한다. 여기서 data type이란 Number(숫자), String(문자열), Boolean(논리형) 등등을 의미한다.

 

'=='의 경우

값만을 비교한다

0 == "0" //true
0 == 0   //true

0 == false //true
//값만 비교를 한다.

 

'==='의 경우

값과 데이터 타입을 비교

0 === "0" //false
0 === 0   //true

console.log(typeof 0);    //number
console.log(typeof "0");//string

0 === false //false를 반환
console.log(typeof 0);    //number
console.log(typeof false);//boolean

 

이외의 경우들

🤔 1) null과 undefined를 비교하면?

null == undefined //true


null === undefined //false 
console.log(typeof null);	//object
console.log(typeof undefined);  //undefined

🤔 2) '!='와 '!=='를 비교하면?

0과 "0"은 값이 같으므로 false를 반환한다.

0 != "0" //false

 

0과 "0"은 값은 같지만 데이터 타입이 다르므로 true를 반환한다.

0 !== "0" //true 
console.log(typeof 0);	//number
console.log(typeof "0");  //string

3) 🤔 Arrays의 경우

Arrays 경우에는 왜 이런 결과가 나올까? 현재까지는 기본형 비교만을 했다. 하지만 참조형 타입에서는 기본형에서처럼 비교를 할 수 없다. 아래의 경우를 보면 a1과 a2가 다른 메모리 객체를 가리키기 때문이다. 배열의 요소들이 값이 같다고 해도 본질적으로 다른 값들을 가진다. 다른 reference type들인 Objects, function에도 적용된다. 더 자세한 내용은 이곳을 확인 바란다.

let a1 = [1,2,3,4,5]
let a2 = [1,2,3,4,5]

console.log(a1 ==  a2); // false
console.log(a1 === a2); // false

 

⚡ 우리는 무엇을 써야 하나? 속도 측면?

이론상으론 triple equals operator (===)가 성능이 더 좋을 것 같지만, 같은 알고리즘을 사용하기 때문에 성능의 차이는 크게 없다. 하지만 예기치 않은 결과가 나올 수 있으므로 필요한 경우가 아니면 이중 동등 연산자(==)를 사용하지 않는 것을 권장한다. 왜냐하면 "1" == true , "" == 0 은 true를 반환한다. 이런 예상치 못한 경우들이 있을 수 있다.

 

혹시 틀리거나 잘못된 내용은 댓글로 알려주시면 감사하겠습니다. :)

 

 

📕 Reference: 

https://velog.io/@filoscoder/-%EC%99%80-%EC%9D%98-%EC%B0%A8%EC%9D%B4-oak1091tes

https://codeahoy.com/javascript/2019/10/12/==-vs-===-in-javascript/