[JS] 동등 연산자 '=='에 대해 알아보자

들어가며

자바스크립트에는 두 값이 같은 지를 비교하는 동등 연산자 '=='가 있습니다. 이번 시간에는 이 연산자가 무엇이고, 어떻게 비교를 수행하는지 알아보도록 하겠습니다.

 

동등 연산자 '=='

동등 연산자(equality)는 두 피연산자가 동일한지 비교한 후, boolean 결과를 반환합니다. 이때 자바스크립트가 자동으로 타입 변환을 수행한 후 비교합니다. 이 때문에 예기치 못한 상황이 발생할 수 있습니다.

 

동등 연산자(==와 !=)는  IsLooselyEqual semantic을 제공합니다.

 

비교 규칙은 아래와 같습니다.

1. 같은 타입일 경우
   • Object(객체): 두 피연산자가 같은 객체를 참조할 때만 true를 반환합니다.
   • String(문자열): 두 피연산자가 동일한 문자를 동일한 순서로 가질 때만 true를 반환합니다.
   • Number(숫자): 두 피연산자의 값이 같을 때만 true를 반환합니다. (+0과 -0은 같은 걸로 간주합니다. 둘 중 하나가 NaN인 경우, 항상 false를 반환합니다; NaN은 NaN과 절대 같지 않습니다.)
   • Boolean(부울): 두 피연산자의  값이 모두 true 또는 모두 false일 때만 true를 반환합니다.
   • BigInt: 두 피연산자의  값이 같을 때만 true를 반환합니다.
   • Symbol(심볼): 두 피연산자가 동일한 심볼을 참조할 때만 true를 반환합니다.
2. null과 undefined는 같은 값으로 간주합니다.
   둘 중 하나가 null 또는 undefined일 경우, 다른 값도 null 또는 undefined일 때만 true를 반환합니다.
3. 둘 중 하나가 객체이고 다른 하나가 원시 타입(primitive)인 경우, 객체를 원시 타입으로 변환 후 비교합니다.
4. 이 단계에서는 두 피연산자가 원시 타입으로 변환됩니다. 나머지 변환은 케이스 별로 다릅니다.
   • 둘이 같은 타입일 경우, 1번 단계에서 설명한 규칙에 따라 비교합니다.
   • 하나만 심볼인 경우, false를 반환합니다.
   • 하나만 부울인 경우, 부울 값을 숫자로 변환합니다. true는 1로, false는 0으로 변환됩니다. 이후 다시 비교합니다.
   • 숫자와 문자열을 비교하는 경우, 문자열을 숫자로 변환합니다. 변환이 실패하면 NaN이 되고, false를 반환합니다.
   • 숫자와 BigInt를 비교하는 경우, 숫자의 값을 기준으로 비교합니다. 만약 숫자가 ±Infinity나 NaN이라면 false를 반환합니다.
   • 문자열과 BigInt를 비교하는 경우, 문자열을 BigInt로 변환합니다. 변환이 실패하면 false를 반환합니다.

 

타입 변환이 없는 경우

1 == 1; // true
"hello" == "hello"; // true

 

타입 변환이 있는 경우

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

const number1 = new Number(3);
const number2 = new Number(3);
number1 == 3; // true
number1 == number2; // false

 

객체 비교

const object1 = {
  key: "value",
};

const object2 = {
  key: "value",
};

console.log(object1 == object2); // false
console.log(object1 == object1); // true

 

문자열과 문자열 객체 비교

const string1 = "hello";
const string2 = String("hello");
const string3 = new String("hello");
const string4 = new String("hello");

console.log(string1 == string2); // true
console.log(string1 == string3); // true
console.log(string2 == string3); // true
console.log(string3 == string4); // false
console.log(string4 == string4); // true

 

날짜와 문자열 비교

const d = new Date("1995-12-17T03:24:00");
const s = d.toString(); // e.g. "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
console.log(d == s); //true

 

배열과 문자열 비교

const a = [1, 2, 3];
const b = "1,2,3";
console.log(a == b); // true

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

 

 

마치며

동등 연산자 '=='는 자바스크립트에서 두 값을 비교해 주는 연산자입니다. 다만, 값 비교 시 자동으로 타입 변환이 일어나기 때문에, 예기치 못한 상황이 발생할 수 있으므로 사용에 주의가 필요합니다.

 

피드백이나 의견은 언제나 환영합니다 :D

감사합니다.

 

See also

[JS] 일치 연산자 '==='에 대해 알아보자

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality

 

References

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality

https://en.wikipedia.org/wiki/Relational_operator