[JavaScript] == 와 === 의 차이

 

이중 등호(==)와 삼중 등호(===)의 차이

자바스크립트에서 이중 등호(==)와 삼중 등호(===)는 모두 비교에 사용되며, 비교 대상간의 동일성 또는 동일성의 정도를 파악하는데 사용된다. 두 가지 모두 비교 대상이 동일하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 결과를 내는 방식은 같지만, 이 둘은 서로 다른 기준을 사용해 동일성을 판단한다.

ⓒ freeCodeCamp

 

이중 등호(==)는 비교를 하기 전 유형 강제를 수행하기 때문에 종종 '느슨한 등호'라고도 한다. 즉, 비교하려는 피연산자의 데이터 타입이 다른 경우 자바스크립트 엔진은 비교를 가능하게 하기 위해 피연산자 중 하나를 다른 피연산자와 동일하게 자동 변환한다.

 

const a = 100;
const b = '100';

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

 

위 예제에서 변수 a와 b가 있는데, a는 숫자 타입이고 b는 문자열 타입이다. 여기서 a와 b를 비교하면 참을 출력한다. 이는 비교하기 전에 변수 a 의 유형이 문자열로 변환되기 때문이다.

비교가 끝나면 두 변수 모두에서 값을 확인한다. 값이 같으면 참, 다르면 거짓이 된다. 비교 과정에서 실제 값이 변경되는 것은 아니고, 비교하는 동안 암시적으로 유형만 변환되는 것이다.

 

타입 강제 규칙

다음 예제의 출력 값은 무엇일까?

const a = true;
const b = 'true';

console.log(a == b);

답은 'false'다.

자바스크립트에서의 타입 강제를 위한 규칙을 살펴보면 답을 이해할 수 있다.

• 피연산자 중 하나가 문자열이면, 다른 피연산자는 문자열로 변환된다.
• 두 피연산자 중 하나가 숫자인 경우, 다른 피연산자는 숫자로 변환된다.
• 두 피연산자 중 하나가 boolean 이면, 숫자로 변환된다. (참은 1, 거짓은 0)
• 한 피연산자가 객체이고 다른 피연산자가 초기값인 경우, 객체는 비교가 수행되기 전 초기값으로 변환된다.
• 피연산자 중 하나가 null이거나 undefined인 경우, 다른 피연산자도 null이거나 undefined여야 true를 반환한다. 그렇지 않다면 false를 반환한다.

위의 세 번째 규칙을 통해 위 문제의 답이 왜 false인지 이해할 수 있다. 비교 전에, 변수 a의 값이 숫자로 변환된다. 따라서 숫자 1과 'true'를 비교할 때에는 변수가 다른 타입으로 변환되어 있기 때문에 거짓이 된다.

 

삼중 등호(===)의 작동 방식

'엄격한 등호'라고도 하는 삼중 등호(===)는 이중 등호(==)의 작동 방식과 유사하게 작동하지만, 비교하기 전에 피연산자의 유형을 변환하지 않는다는 중요한 차이점이 있다.

변수를 비교하는 동안 먼저 유형이 다른지 확인하고, 유형이 다르면 false, 일치하면 값을 확인한다. 값이 같고 숫자가 아닌 경우 true를 반환한다.

마지막으로 두 피연산자가 모두 숫자이고 NaN이 아니면서 같은 값을 가지면 true를 반환하고 아닐 경우 false를 반환한다.

const a = 100;
const b = '100';

console.log(a === b);

이중 등호(==)에서는 true를 반환하지만, 삼중 등호(===)에서는 false이다. 변수 a 타입은 숫자이고, 변수 b 타입은 문자열이기 때문이다. 비교할 때 삼등식은 피연산자의 타입부터 확인하는데, 여기서는 타입부터 달랐다.

const a = true;
const b = 1;

console.log(a === b);

위 예제는 어떨까? 변수 a 타입은 boolean 이고, 변수 b 타입은 숫자이다. 역시나 삼중 등호(===)로 비교하면 변수 타입이 다르기 때문에 false를 반환한다.

 

결론

자바스크립트에서 == 연산자와 === 연산자는 두 값이 같은지 아닌지를 판단하는 데 사용하는 비교 연산자이다. == 연산자는 비교를 가능하게 하기 위해 필요한 경우 타입 강제를 수행하는 느슨한 동일성 비교를 진행한다. 반면, === 연산자는 타입 강제를 하지 않고 피연산자가 동일한 타입(동일한 값)을 가져야 하는 엄격한 동일성 비교를 수행한다.

자바스크립트에서 타입 강제는 때때로 예상하지 못한 결과를 초래할 수 있기 때문에 느슨한 비교 연산자(==) 대신, 엄격한 비교 연산자(===)를 사용하는 것이 좋다.

 

참고

freeCodeCamp

How is == Different from === in JavaScript? Strict vs Loose Equality Explained