NULL

JS 동등 일치 비교 연산자 본문

Front-end/Vanilla JS

JS 동등 일치 비교 연산자

1924 2022. 4. 8. 02:38

동등 / 일치 비교 연산자

비교 연산자 의미 사례 설명
== 동등 비교 x == y x와 y의 값이 같음
=== 일치 비교 x === y x와 y의 값과 타입이 같음
!= 부등 비교 x != y x와 y의 값이 다름
!== 불일치 비교 x !==y x와 y의 값과 타입이 다름

 

동등 비교 (==) 연산자는 피연산자를 비교할 때

암묵적 타입 변환을 통해 타입을 일치 시킨 후 같은 값을 갖는지 비교한다.

 

따라서

동등 비교 연산자는 피연산자가 타입은 다르더라도

암묵적 타입 변환 후 같은 값이라면 true를 반환한다.

 

// 동등 비교
5 == 5    // true
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 같은 값을 같는다.
5 == '5'   //true
5 == 8    // false

 

하지만 동등 비교 연산자는 편리한 경우도 있지만

수 많은 부작용을 일으키는 편이라서 사용을 권장하지 않는다.

 

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

 

위의 코드처럼 동등 비교(==)연산자는 예측하기 어려운 결과를 만들어낸다.

따라서 동등 비교 연산자를 사용하지 말고 일치 비교 연산자를 사용하면 된다.

 

일치 비교(===) 연산자는 피연산자가

타입도 같고 값도 같은 경우에 한해서 true를 반환한다.

 

// 일치 비교
5 === 5   // true
5 === '5' // false

 

이와 같이 일치 비교 연산자는 예측하기 쉬우며, 이상했던 앞전 코드예제는 모두 false를 반환한다.

 

 

주의사항

여기서 주의 할 것은 NaN과 숫자 0이다.

 

isNaN(NaN) // true
0 === -0     // true

 

NaN은 자신과 일치하지 않는 유일한 값이다.

따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.

 

 

반대로 부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는

동등비교(==), 일치비교(===)연산자의 반대 개념이다.

'Front-end > Vanilla JS' 카테고리의 다른 글

classList.toggle 개념  (0) 2022.04.09
getElementsByClassName 사용법  (0) 2022.04.09
JS 변수 동적 타이핑  (0) 2022.04.07
js .trim() 내장함수  (0) 2022.01.15
js 로그인 유효성검사  (0) 2022.01.15
Comments