[JS] ==와 ===의 차이점

cabbage·2023년 1월 10일

JS

목록 보기

4/43

자바스크립트의 동등 비교 연산자에는 ==와 ===가 존재한다. 하지만 ==와 ===는 다르게 동작한다.

동등 연산자 ==

동등 연산자 ==는 두 개의 피연산자가 동일한지 확인하며, Boolean 값을 반환한다. 엄격한 일치 연산자 ===와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도한다.

동등 연산자의 비교 알고리즘에 대한 간단한 설명

동등 연산자 ==는 두 피연산자를 비교하기 위해 Abstract Equality Comparison Algorithm를 사용한다. 이 알고리즘에 대해 간략하게 설명하면 아래와 같다.

두 피연산자가 모두 객체일 때, 두 피연산자가 동일한 객체를 참조할 때에만 true를 반환한다.
하나의 피연산자가 null이고 다른 하나가 undefined일 때, true를 반환한다.
두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환한다:
- 숫자와 문자열을 비교하는 경우, 문자열을 숫자로 변환한다.
- 하나의 피연산자가 Boolean일 경우
  - true를 1로 변환
  - false를 +0으로 변환
- 하나의 피연산자가 객체이고 다른 하나가 숫자나 문자열이면, 객체를 valueOf()나 toString()을 사용해 기본 데이터 타입으로 변환하도록 한다.
두 개의 피연산자가 동일한 타입일 경우, 다음과 같이 비교된다.
- String: 두 피연산자의 문자 순서가 동일한 문자열일 경우, true를 반환한다.
- Number: 두 피연산자가 동일한 값을 가질 경우, true를 반환한다. +0과 -0은 동일한 값으로 취급한다. 어느 한쪽이 NaN일 경우, false를 반환한다.
- Boolean: 두 피연산자가 모두 true이거나, 모두 false일 경우, true를 반환한다.

동등 연산자 예시

아래 코드는 동등 연산자 ==가 타입변환 없이 비교하는 예시이다.

1 == 1              // true
'hello' == 'hello'  // true

아래 코드는 동등 연산자 ==가 타입변환을 이용해서 비교하는 예시이다.

// 문자열을 숫자로 변환하여 비교
"1" == 1;          // true

// false를 0으로 변환하여 비교
0 == false;        // true

0 == null;         // false
0 == undefined;    // false

// !!null => !true => false => 0
0 == !!null;       // true

// !!undefined => !true => false => 0
0 == !!undefined;  // true

null == undefined; // true

const number1 = new Number(3);
const number2 = new Number(3);

// number1.toString() => '3'
number1 == 3;        // true

// 두 피연산자가 동일한 객체를 참조하지 않음
number1 == number2;  // false

객체들 간의 비교

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

// 두 피연산자가 동일한 객체를 참조하지 않음
object1 == object2 // false

object2 == object2 // true

문자열과 문자열 객체의 비교

new String()으로 생성한 문자열들은 객체이다. 문자열과 비교하는 경우 String 객체가 문자열로 변환된 후 비교된다. 두 피연산자가 모두 String 객체인 경우 객체로써 비교가 이루어지기 때문에 같은 객체를 참조해야 같은 값으로 취급된다.

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

엄격한 일치 연산자 ===

엄격한 일치 연산자 ===는 두 피연산자가 같은지 여부를 확인하고, Boolean 결과를 반환한다. 동등 연산자 ==와는 다르게, 엄격한 일치 연산자 ===는 피연산자들의 타입이 서로 다른지를 항상 확인한다.

엄격한 일치 연산자에 대한 설명

엄격한 일치 연산자는 IsStrictlyEqual 시맨틱을 제공한다.

피연산자들의 타입이 서로 다르면, false를 반환한다.
두 피연산자가 모두 객체라면, 같은 객체를 참조하는 경우에만 true를 반환한다.
두 피연산자가 모두 null이거나 undefined인 경우, true를 반환한다.
두 피연산자가 모두 NaN이면, false를 반환한다.
위 경우가 아니라면, 두 피연산자의 값을 비교한다:
- Number: 반드시 같은 숫자 값을 가져야 한다. +0과 -0은 같은 값으로 취급한다.
- String: 문자열은 반드시 동일한 문자 순서대로 동일한 문자를 가져야 한다.
- Boolean: 모두 true거나 false여야 한다.

엄격한 일치 연산자 예시

아래 코드는 엄격한 일치 연산자 ===가 같은 타입의 피연산자들을 비교하는 예시이다.

"hello" === "hello";  // true
"hello" === "hola";   // false

3 === 3;  // true
3 === 4;  // false

true === true;  // true
true === false; // false

null === null;  // true

아래 코드는 엄격한 일치 연산자 ===가 다른 타입의 피연산자들을 비교하는 예시이다.

"3" === 3;  // false
true === 1; // false
null === undefined;  // false
3 === new Number(3); // false

아래 코드는 엄격한 일치 연산자 ===가 객체를 비교하는 예시이다.

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

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

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