[JavaScript] ==, === 비교 연산자

JavaScript의 ==, === 연산자에 대해서 알아봅니다.

• mdn 문서에서 자세하게 설명해 주고 있는 내용입니다. 그러나 친절하게 설명되어 있지 않아 이해하기에 다소 시간이 걸립니다.
• mdn보다 자세하지는 않지만, 다양한 예시와 친절한 설명으로 쉽게 이해 수 있게 설명해 보았습니다.

== 연산자

• == 연산자는 loose equality operator 라고 부릅니다.
• 양쪽을 느슨하게 비교하여 같다면 true를, 다르다면 false를 반환합니다.

느슨하게 비교한다는 것은

• 타입이 달라도 값이 같다면 같은 것으로 판단한다는 뜻입니다.
• 즉, 타입 변환을 통해 같을 수 있다면 같은 것으로 판단한다는 것입니다.

== 연산자의 규칙 ★★

• loose equality operator는 다음과 같은 규칙으로 동작합니다.

1. 한 쪽이 undefined 또는 null 이라면 다른 쪽도 undefined 또는 null 이어야만 true

undefined == null  // true

// 사용 예: variable이 undefined이거나 null인 경우를 체크할 때 사용 
const variable = undefined
if (variable == null) {
  console.log("값이 존재하지 않음!")
} else {
  console.log(`변수 값: ${variable}`);
}

2. 한 쪽이 Boolean이고 다른 한쪽이 아니라면, false는 0, true는 1로 변환 후 다시 느슨하게 비교한다.

0 == null
// false
// 한 쪽이 null 이면 다른쪽이 null | undefined 일때만 true

false == null
// false
// 한 쪽이 Boolean 인데 다른쪽이 아니므로 false 가 0으로 변환되고 다시 느슨하게 비교
// 0 == null 의 결과와 동일해진다.

false == undefined
// false
// 바로 위 예제와 같은 원리

3. 한 쪽이 NaN이라면 무조건 false가 반환된다. 양쪽이 모두 NaN일지라도!

NaN == NaN  //false
NaN == undefined  // false
NaN == null  // false

4. string과 number를 비교할 땐 string이 number로 변환된 후 비교된다.

12 == '12'  // true
'' == 0  // true

'' == 0의 결과에 대한 해석:

• Number('') 의 결과는 0입니다.

console.log(Number(''))  // 0

• 이는 JavaScript에 존재하는 형 변환 규칙이며 그냥 외우는 수밖에 없습니다.

console.log(+'')  // 0

• 숫자와 문자열을 연산할 때 숫자형이 표현 범위가 더 넓은 문자열 자료형으로 변환되는 것이 일반적이지만 JavaScript에서 숫자와 문자열을 느슨하게 비교할 때만큼은 예외입니다.

5. 한 쪽이 primitive이고 한 쪽이 Object라면 Object를 primitive로 변환 후, 느슨하게 값을 비교한다.
   (Object를 primitive로 변환한다는 것은 toString()을 적용한다는 것이다.)

const c = [true, 0.5, "hey"];
const d = c.toString(); // "true,0.5,hey"
c == d;  // true

[] == 0  // true
[] == '0'  // false : '' == '0' 와 같음

6. Object끼리 비교하면 동일한 객체의 참조일 때 true, 그 외에는 모두 false

const obj1 = { 'a': 1 }
const obj2 = { 'a': 1 }
const obj3 = obj2

obj1 == obj2  //false : 내용은 같으나, 서로 다른 객체를 참조
obj2 == obj3  //true : 같은 객체를 참조

falsy & truthy 와 loose equality 는 다르다

• if문, 반복문 등의 조건문에 false, true 대신 이를 대변할 수 있는 값을 넣을 수 있습니다.

const a = undefined
  
if (a)
  console.log("true")
else
  console.log("false")

// "false" 출력

• 이처럼 조건문에서 false를 대변할 수 있는 값을 falsy value 라고 하며 다음과 같은 값들이 있습니다.
  null, undefined, NaN, 0, '', ...

• 조건문에서 true를 대변할 수 있는 값은 truthy value 라고 하며 여기에는 falsy value가 아닌 값들이 모두 해당됩니다.
  [], {'a': 1}, 123, 'hello', ...

이 개념을 loose equality와 혼동하시면 안됩니다. falsy value라고 해서 false와 느슨하게 비교했을 때 같다고 나오지 않습니다. 명백히 다른 개념입니다.

false == undefined  //false
false == null  //false
false == 0  //true
false == NaN  //false : NaN 을 비교하면 무조건 false
false == ''  //true

false == '' 의 결과 해석

• 2번 규칙에 의해 false 가 0으로 변환된 후 느슨하게 비교하므로 0 == '' 와 동일해집니다.
• 0 == ''는 0 == Number('') 와 동일하므로 true 가 반환됩니다.

===

• === 연산자는 strict equality operator 라고 부릅니다.
• 즉, 엄격하게 비교하여 같다면 true, 다르다면 false를 반환합니다.

엄격하게 비교한다는 것은

• 타입과 값이 모두 같은 경우에만 같은 것으로 판단한다는 뜻입니다.

=== 연산자의 규칙

1. 양쪽의 type이 다르면 무조건 false

"3" === 3; // false
true === 1; // false
null === undefined; // false

2. 객체끼리 비교할 때는 loosely compare의 내용과 동일하다. (동일한 객체 참조인 경우에만 true)

const obj1 = { 'a': 1 }
const obj2 = { 'a': 1 }
const obj3 = obj2
obj1 === obj2  //false
obj2 === obj3  //true

마무리하며..

• == 와 === 두 연산자의 차이를 이해하는 것은 JavaScript 개발에 있어서 중요한 기초가 됩니다.
• 특히 == 연산자는 꽤나 복잡한 규칙을 지니고 있기 때문에 제대로 사용하기 위해서는 꼼꼼히 공부할 필요가 있습니다.
• 이 포스팅이 javascript의 두 비교 연산자를 이해하는 데 도움이 되셨길 바랍니다.