[JavaScript] `==`, `===` (Feat. 값에 의한 참조, 주소에 의한 참조?)

 

안녕하세요. Three입니다.

Java를 공부할 때, equals(), `=`, `==` 를 비교하고 그 개념을 기억하고 있었는데요.

[Java] String 클래스의 equals(), ==, = 의 차이점

 

그러나 자바스크립트를 공부하며 자바에서의 개념과 많이 헷갈리게 되더라고요...

⭐️ 그래서 ⭐️ 자바스크립트의 `=`, `==`, `===` 의 차이에 대해 공부해보려고 합니다.

이번 글을 통해  `=`, `==`, `===` 차이를 명확히 알아보도록 하겠습니다 :)

 

---

 

원시 타입에 대한 `==`, `===` 비교에서는 값에 의한 참조 혹은 주소에 의한 참조가 중요치 않습니다.

그러나 객체와 같은 참조 타입을 다룰 때에는

주소에 대한 직접적인 비교가 가능하기 때문에, 정확히 구분하여 알고 있는 것이 중요한데요.

 

아래의 예시를 통해 정확히 알아보도록 하겠습니다.

 

☝🏻 1. 원시 타입에서의 `==`, `===`

const num = 5;
const string = "5";

num == string; // true
num === string; // false

`==` 연산자	원시 타입에서는 타입이 다르더라도 강제 형 변환을 통해 비교가 이루어집니다. 따라서 5와 "5"가 같은 값으로 간주되어 true를 반환합니다.
`===` 연산자	엄격한 비교를 수행하며, 값과 타입이 모두 일치해야만 true를 반환합니다. 따라서 5와 "5"의 타입이 다르므로 false를 반환합니다.

 

👩‍👧 2. 참조 타입에서의 `==`, `===`

그런데 왜 참조 타입의 예시에서는 같은 타입을 가지고 있더라도 `==`, `===` 모두 다르다고 하는 걸까요?

const person1 = { name: 'kim' };
const person2 = { name: 'kim' };

person1 == person2; // false
person1 === person2; // false

`==` 연산자	객체 비교 시, 값만을 비교하며 객체의 내용이 동일하더라도 참조가 다르면 false를 반환합니다.
`===` 연산자	엄격한 비교를 수행하며, 값과 타입이 모두 일치해야만 true를 반환합니다. 객체 비교에서는 객체의 참조까지 동일해야만 true가 됩니다.

 

👨‍👨‍👦 3. 주의사항

객체나 배열과 같은 참조 타입은 변수에는 실제 값이 아닌 참조(주소)가 저장됩니다.

따라서 ==와 === 연산자로 참조 타입을 비교할 때에는 객체의 내용이 아닌 참조가 비교되므로 주의가 필요합니다.

// 속성 비교
const areEqual = person1.name === person2.name; // true

// 또는 객체를 복제한 후 비교
const areEqualCloned = JSON.stringify(person1) === JSON.stringify(person2); // true