[JavaScript] '=='와 '==='의 차이점?

최근 js를 기초부터 바닐라js부터 다지자는 생각으로 공부 중이었다.

그러던 와중 예전부터 궁금했지만 지나치던 것들을 하나하나 이해하면서 블로그에 올리면서 정리하잔 생각이 들었다.

그런 생각을 하던 중에 발견한 한 사진을 보고 찾아보기 시작했다.

==때문에 화나!

---

대학교나 그 전부터 C, C++, JAVA 등 다른 언어들도 기초(?)정도를 공부했던 난

JavaScript에서 '==='란 등호를 보고 저게뭐지..?란 생각을 했었고, 사람들에게 물어보면

"그냥 '=='보다 '==='가 더 정확하니까 '==='를 쓰는게 좋아"라고 막연하게 알려주곤 했다.

물론 나도 그렇게만 받아드렸다.

그래서 한 번 오늘 찾아보고 이해하게 되어 정리를 해본다.

---

MDN에서는 이렇게 설명해주었다.

JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(===)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(==)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<=)의 경우 원시값으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.

 

간단하게 설명을 하자면..

엄격일치비교연산자 (===)

추상동등비교연산자 (==)

'==='는 같은자료형(String, Number 등)과 안에 내용(3, "3" 등)을 동시에 비교하고,

'=='는 비교 전에 자료형을 둘 다 같은걸로 변환한 후의 값을 비교한다.

 

아래 예시를 보면서 이해를 돕겠다.

---

동등연산자 (==) : 자료형의 상관 없이 내용만 같으면 true

1   ==  1        // true
1   == '1'       // true
0   == false     // true
0   == null      // false
0   == undefined // false
null  == undefined // true

(비교하다 갑자기 궁금해진)

null의 데이터타입은 Object

undefined의 데이터타입은 undefined

 

일치연산자(===) : 자료형 변환을 하지 않고 두 연산자가 일치하는지 엄격히 검사.

3 === 3   // true
3 === '3' // false
1 === true // false

---

결론

JavaScript에서 비교연산자를 사용할 때에는 (===)나 (!==)를 사용하는게 좋으며,

자료형이 다르다면 (==)를 사용하는 방식보다는 직접 자료형을 변환하여 (===)로 비교하는게

코드 가독성을 높일 것이다.

 

MDN 주소