자바스크립트에는 두 개의 비교 방법이 있다. 동등 비교(loose equality, ==)와 일치 비교(strict equality, ===)다.
동등 비교 ==
동등 비교는 피연산자들이 서로 다른 타입일 경우, 자바스크립트가 암묵적으로 타입을 변환한 후에 비교한다.
'10' == 10 // true
0 == false // true
자바스크립트의 암묵적 타입 변환
자바스크립트는 문맥에 따라 값의 타입을 바꾼다.
'10' + 2 // (1)
5 * '10' // (2)
!0 // (3)
if (1) { } // (4)
(1) 2를 문자열로 변환하고, 연산의 결과는 '102'다.
(2) *의 피연산자가 숫자여야 하므로, '10'을 숫자 10으로 변환하며, 연산의 결과는 50이다.
(3) !의 피연산자는 boolean이어야 하므로 0을 false로 변환하여 결과는 true다.
(4) 3번과 동일하게 1을 true로 변환한다.
일치 비교 ===
일치 비교는 타입 변환 없이 비교한다.
'10' === 10 // false
0 === false // false
객체 비교
const obj1 = {name: 'jimin'}
const obj2 = {name: 'jimin'}
const obj3 = obj1
obj1 == obj2 // (1)
obj1 === obj2 // (2)
obj1 == obj3 // (3)
obj1 === obj3 // (4)
이 경우에 비교 연산의 결과는 다음과 같다:
- (1) false
- (2) false
- (3) true
- (4) true
obj1과 obj2가 참조하고 있는 객체는 내용이 완전히 같다. 하지만 자바스크립트는 항상 새롭게 메모리에 객체를 만들기 때문에, 위의 그림과 같이 두 객체가 서로 다른 메모리에 존재한다. obj1과 obj2는 각 객체의 참조 값을 가지고 있으며, 그렇기 때문에 비교 연산을 수행하면 그 결과가 항상 false다.
반면에 obj3은 대입 연산을 통해 obj1의 참조값을 동일하게 가지고 있다. 그렇기 때문에 obj1과 obj3의 참조값을 비교 연산하게 되면 항상 결과는 true다.
'JAVASCRIPT' 카테고리의 다른 글
Javascript Objects vs. Maps (0) | 2022.01.30 |
---|---|
DOM과 Virtual DOM (0) | 2022.01.16 |
자바스크립트 Promise (0) | 2022.01.14 |
자바스크립트 가비지 콜렉션과 순환참조 (0) | 2021.12.10 |
자바스크립트 Execution Context (0) | 2021.12.08 |