NULL
JS 동등 일치 비교 연산자 본문
동등 / 일치 비교 연산자
비교 연산자 | 의미 | 사례 | 설명 |
== | 동등 비교 | 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