본문 바로가기

JAVASCRIPT

Javascript 비교연산자

자바스크립트에는 두 개의 비교 방법이 있다. 동등 비교(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. (1) false
  2. (2) false
  3. (3) true
  4. (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