[Javascript] == 와 === 의 차이

코드를 작성하던 도중,

 

== 와 === 의 차이가 갑작스럽게 궁금해졌다.

!= 와 !== 도 있는 걸로 알고 있는데, 두 연산자의 차이가 무엇일까.

 

javascript 와 관련된 재밌는 이미지

 

이 글을 읽고서 해당 사진이 완벽하게 이해가 된다면, == 와 ===의 차이를 알게 된 것이다.

 

📌 '==' 와 '===' 의 차이점

자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원한다.

=== 는 변수 유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다.

 

---

• ☝ '==' 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교
• ✌ '==='는 엄격한 비교를 하는 것으로 알려져 있다 ([값 & 자료형] -> true)

---

💡 연습

0 == false // true

- 0 값은 false 와 동일하기 때문에, fasle

---

0 === false         // expected output: false
console.log(typeof 0);     // expected output: "number"
console.log(typeof false);    // expected output: "boolean"

- 0의 타입값은 '숫자' 이고, false 의 타입값은 '불린형' 이기 때문에 fasle.

---

2 == "2" // expected output: true

- 2와 "2" 는 값이 같기 때문에, true

---

2 === "2"       // expected output: false
console.log(typeof 2);     // expected output: "number"
console.log(typeof "2");    // expected output: "string"

- 비교하는 두 피연산자의 유형이 다르기 때문에, fasle

---

null == undefined // expected output: true

null 과 undefined의 값은 같지만,

---

null === undefined       // expected output: false
console.log(typeof null);      // expected output: "object"
console.log(typeof undefined);     // expected output: "undefined"

두 피연산자 (null, undefined) 의 타입값은 다르기 때문에 false.

 

---

2 != "2" // expected output: false

두 피연산자의 값이 똑같기 때문에 false.

---

2 !== "2"     // expected output: true
console.log(typeof 2);   // expected output: "number"
console.log(typeof "2");   // expected output: "string"

2 와 "2" 의 타입값이 다르기 때문에 true 가 나온다.

 

📚 정리

변수를 비교하거나 어떤 비교를 할 때는 '==' 보다는 '===' 연산자를 사용하는 것이 좋다.

 

📕 참고

c17an.github.io/javascript/==-%EA%B3%BC-===/

[자바스크립트] - == 과 === 의 차이

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

자바스크립트: '==' 와 '===' 는 다르다!