40. == 과 === 의 차이?

justkod 2022. 8. 26. 09:47

JS에서 코드를 작성할 때, 혹은 알고리즘 문제를 풀 때 A와 B가 같다고 표현할 때 A == B 혹은 A === B 라고 표현하곤한다. 얼핏 알기로는 ===가 더 강하게 같다고 표현하는? 그런 걸로 알고있는데 무엇을 강하게 표현한다는 것인지 정확히 알고 넘어간 것이 아니여서 이번에 한번 찾아보았다.

== 의 특징

자바스크립트에서는 두값을 비교하기 위해 비교 연산자를 사용한다. 두 값을 비교하여 값이 같은지 또는 같지 않은지 결정하는 조금 특이한 비교연산자가 '==' 과 '===' 인데 우선 '==' 에 대해서 알아보자. 먼저 예시를 살펴보자

let a = 10;
let b = '10';

console.log(a == b);
//output: true

== 연산자는 요소를 비교하기 전에 유형 변환을 먼저 수행한다. 유형변환이란 비교하려는 두 피연산자를 비교하는 동안 두 피연산자가 동일한 데이터 유형이 아닌 경우 연산자는 둘 중 하나를 다른 피연산자의 유형으로 변환하는 것을 말한다. 위의 예시에서 b는 연산자에 의해 숫자형으로 변환된 후 a와 비교된다. 그 때 b 와 b의 수치가 같기 때문에 최종적으로 true를 리턴하는 모습을 볼 수 있다. 좀더 다양한 예시에서 이를 더 잘 확인해볼 수 있다.

let a = 10;
let b = 10;
let c = -10;

console.log(a==b);
//output: true

console.log(a==c);
//output: false

console.log(b!=c);
//output: true

console.log(a!=b);
//output: false

위의 예에서 첫 번째 출력은 a와 b의 값이 같으므로 참이고, 두 번째 값은 c와 부호가 다르므로 거짓이다. 마찬가지로 세 번째 출력은 b와 c가 같지 않으므로 참이고, 네 번째 출력은 a와 b가 같으므로 참이다.

숫자를 NaN과 비교하면 == 연산자에 대해 여전히 false를 출력한다.
두 피연산자가 모두 문자열 유형이면 == 연산자는 첫 번째 피연산자의 각 요소가 두 번째 피연산자의 각 요소와 일치하는 경우에만 true를 반환한다. != 연산자는 그 반대의 경우도 마찬가지이다

===의 특징

=== 연산자는 완전 항등 연산자(!== 도 완전 항등 연산자)라고 합니다. === 연산자는 엄격히 같음 비교 알고리즘 을 따릅니다 . 즉, 값을 비교하기 전에 피연산자의 유형 변환을 수행하지 않고 피연산자의 데이터 유형이 동일하지 않더라도 false를 반환한다. 아래 예시를 보자.

let a = 10;
let b = '10';
let c = 10;

console.log(a===b);
//output: false;

console.log(a===c);
//output: true;

여기서 첫 번째 출력은 숫자 유형 이므로 false 이고 b는 문자열 유형이고 두 번째 출력은 둘 다 동일한 데이터 유형과 값을 가지므로 참이다. === 및 !== 연산자는 엄격한 동등 비교 알고리즘을 따라 두 피연산자 를 비교한다. 좀더 많은 예시에서 이를 더 자세히 확인해 볼 수 있다.

//Example 1
34 === '34'    //false
34 !== '34'    //true

//Example 2
let a = NaN;
let b = 10;

a === b        //false
a !== b        //true

//Example 3
null === null             //true
undefined === undefined   //true
null === undefined        //false

// Example 4
let car1 = {
    name: "Audi"
}

let car2 = {
    name: "Audi"
}

console.log(car1 === car1);
//output: true

console.log(car1 === car2);
//output: false

console.log(car1 !== car1);
//output: false

console.log(car1 !== car2);
//output: true

예 1: 여기에서 첫 번째 피연산자는 숫자 데이터 유형이고 두 번째 피연산자는 문자열 데이터 유형이므로 === 연산자는 false 를 반환 하고 !== 연산자는 true를 반환한다.

예 2: 첫 번째 피연산자가 NaN 형식이므로 === 연산자는 false 를 반환 하고 !== 연산자는 true를 반환한다.

예 3: 여기에서 처음 두 비교 출력 은 두 피연산자가 동일한 유형이고 동일한 값을 가지므로 true 이지만 한 피연산자는 null이고 다른 하나는 정의되지 않으므로 마지막 출력은 false 이다.

예 4: 마지막 예에서 car1과 car1은 동일한 인스턴스 를 참조하기 때문에 첫 번째 출력은 true 이고 car1과 car2는 다른 인스턴스를 참조하므로 두 번째 출력은 false 이다.

정리

== :두 값을 느슨하게 비교하므로 피연산자의 데이터 유형이 중요하지 않은 경우에 사용할 수 있다.

=== : 두 값을 엄격하게 비교하므로 피연산자의 데이터 유형이 중요한 위치에 사용된다.

저작자표시 (새창열림)