[JavaScript] - 연산자 ==, ===

알고리즘을 계속 풀다보니까

==과 === 연산자가 있는데 둘의 차이점에 대해서 잊어버려서 조사를 해봤는데

생각보다 더 알아야하는 내용이 많은 것 같아서

이렇게 글로 저장하려고 한다.

 

'==' (Equal Operator), '===' (Strict Equal Operator)

둘의 가장 큰 차이점

== 는 둘이 같은 지를 확인하는데 Data Type 에 상관없이 값이 같은 지를 확인한다.

=== 는 Data Type 까지 즉, 값과 타입 까지 모두 같은지를 확인한다.

 

console.log(1 == 1); // true
console.log(1 == "1"); // true
console.log(1 === "1"); // false
console.log(1 === 1); // true

 

 

---

이제 여기서 알아야 하는 내용

 

그러면 undefined와 null 에 대해서 이 해당 연산자를 사용할 때는 어떻게 될까 ?

console.log(null == undefined); // true
console.log(null === undefined); // false

 

이렇게 == 연산자로 비교하면 true

=== 연산자로 비교하면 false가 나온다. 

 

이제는 보통 true는 1 false는 0으로 나타내는데 이것을 해당 연산자로 비교하면 어떻게 될까 ?

console.log(true == 1); // true 
console.log(true === 1); // false 
console.log(false == 0); // true 
console.log(false === 0); // false

 

이렇게 ==와 ===의 연산자의 차이가 있다는걸 확인할 수 있다.

 

이제 마지막으로 객체 타입 비교 시에는 어떻게 될까?

1. array

const a = [1, 2, 3];

const b = [1, 2, 3];

const c = b;

console.log(a == b); // false
console.log(a === b); // false
console.log(b == c); // true
console.log(b === c); // true

 

2. obj

const a = {name : "jihun"};

const b = {name : "jihun"};

const c = b;

console.log(a == b); // false
console.log(a === b); // false
console.log(b == c); // true
console.log(b === c); // true

 

이렇게 되는 이유

 

객체를 만든다는 것은 주소를 할당 하는 것이기 때문에

a, b 의 객체를 만들때 서로 다른 주소를 할당 받는다.

그리고 이를 비교할때는 서로의 주소를 비교하는 것이기 때문에 

 

a,b 의 비교는 서로 다른 주소를 참조 하기에 false가 나오고

b,c 는 같은 주소를 참조하고 있기 때문에 true가 나오는 것이다.

 

즉, 내용이 같아도 참조 주소가 다르기 때문에 false가 나온다.

---

결론

 

==보다 === 으로 비교하는게 협업이나 안정성 측면에서 유리하기 때문에 (==는 원치않은 타입 변환이 발생)

=== 으로 사용하는 것이 좋다.

 

 

참고자료

https://steemit.com/kr-dev/@cheonmr/js-operator 

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