JavaScript - ==, === 차이점

==, === 둘 다 비교연산자이다.

 

1. == (동등 연산자)

• loose equality 연산자.
• 두 개의 피연산자가 동일한지 확인하며, boolean 결과를 반환한다.
• 비슷해보이면 같다고 판단한다.
• 데이터 유형을 엄격하게 검사하지 않고, 필요한 경우 자동으로 형 변환을 수행한다.
• ex)

1 == '1' // true

0 == false // true

상세 설명

1. 두 피연산자가 동일한 타입일 경우 다음과같이 비교한다.

• 객체 : 두 피연산자가 동일한 객체를 참조할때만 true.

/* 객체타입 비교 예시 */
const object1 = {
  key: "value",
};

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

object1 == object2 // false
object1 == object1 // true

     아래는 number object이기때문에 같은 값이지만 같은 객체를 참조하고있지 않기때문에 false.

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

number1 == 3; // true
number2 == 3; //true
number1 == number2; // false

• 문자열 : 두 피연산자가 동일한 문자를 동일한 순서로 가질때만 true
• 숫자 : 두 피연산자가 동일한 값을 가질때만 true. 만약 두 연산자 모두 NaN이라면 false.(NaN은 항상 NaN과 다르다.)
• boolean : 두 피연산자가 동일한 값을 가질 때만 true
• 심볼 : 두 피연산자가 동일한 심볼을 참조할 때만 true

2. 두 피연산자가 동일한 타입이 아닐경우 다음과 같이 비교한다.

• 하나의 피연산자가 null이거나 undefined인 경우 : 다른 하나가 무조건 null 이거나 undefined여야 true.

null == undefined // true
0 == null // false
0 == undefined // false
0 == !!null // true
0 == !!undefined // true

• 하나의 피연산자가 객체이고, 다른하나가 원시타입인경우, 객체를 원시타입으로 변환
• 하나의 피연산자가 심볼이라면 다른 하나도 심볼이어야만 true
• 하나의 연산자가 boolean이고, 다른 하나가 boolean이 아닌 경우, boolean을 숫자로 변환(true = 1, false = 0)

0 == false // true

• 숫자와 문자열 : 문자열을 숫자로 변환. 변환실패의 경우 결과값은 NaN이므로 false.
• 숫자와 BigInt : 숫자값으로 비교. 숫자가 infinity 혹은 NaN이라면 false
• 문자열과 BigInt : 문자열을 BigInt() 생성자와 같은 알고리즘으로 변환. 변환 실패시 false.

3. string과 string object의 비교

string object와 string을 비교한다면 string object가 string으로 변환된 후 비교하기때문에 같은 문자열을 가지고 있다면 true.

하지만 string object끼리 비교한다면 객체로써 비교가 이루어지기때문에 같은 참조를 가지고있어야 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

4. Date와 string 비교

날짜타입과, 날짜타입을 문자열로 형변환한 변수는 동일하다고 본다.

const d = new Date("December 17, 1995 03:24:00");
const s = d.toString(); 
console.log(d == s); //true

---

2. === (일치연산자)

• 값과 데이터 유형을 모두 엄격하게 비교 후 boolean값을 반환한다.
• 두 값이 정확히 동일한 유형이며 값도 같아야한다.
• 데이터의 형변환이 자동으로 수행되지 않는다.
• ex)

1 ==='1' // false

0 === false // false

상세 설명

• 피연산자가 다른 유형이라면 false

3 === new Number(3); // false

• 두 피연산자가 모두 객체인 경우, 동일한 참조를 가지는 경우에만 true
• 두 피연산자가 둘 다 null이거나, 둘 다 undefined인경우 true

null === undefined; // false

• 피연산자중 하나가 NaN이라면 false 반환

---

결론

• 일치연산자(===)를 사용하는것이 안전하다.
• NaN의 비교를 위해서는 isNaN함수를 사용한다. (문자열의 경우 true 반환)

isNaN(NaN) // true
isNaN(1) // false
isNaN(undefined) // true
isNaN("abc") // true

 

 

 

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Equality

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

https://gobae.tistory.com/24