자주 헷갈리는 null과 undefined 비교 연산자로 알아보기

1. 문자열끼리 비교 (유니코드)

- 문자열 중에서 앞에서 부터 순서대로 비교하게된다.(사전순)

- 소문자의 유니코드 값이 기본적으로 크다.

alert( 'Z' > 'A' ); // true, 'Z'가 'A'보다 유니코드 값이 큼
alert( 'Glow' > 'Glee' ); // true, 'o'는 'e'보다 유니코드 값이 큼
alert( 'Bee' > 'Be' ); // true, 'e'는 빈 값 보다 유니코드 값이 큼

 

2. 다른 형을 가진 값 간의 비교

- 비교하려는 값의 자료형이 다르면, 값 들을 숫자형으로 바꿔 비교하게된다.

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.
alert( true == 1 ); // true, true를 숫자 1로 변환된 후 비교가 진행됩니다.
alert( false == 0 ); // true, false가 숫자 0으로 변환된 후 비교가 진행됩니다.

 

3. 일치연산자 ==과 ===의 차이

- ===의 경우 엄격하게 비교하기 때문에 0과 false 를  null과 undefined를 엄연히 다르게 취급한다.

alert( 0 == false ); // true
alert( '' == false ); // true
alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.

 

4.  null과 undefined 비교하기

- 산술 연산자나 기타 비교 연산자(>,<,<=,>=)를 사용하면 null 은 0으로 undefined 는 NaN으로 변한다.

- null은 오직 undefined 과만 같다.

alert( null == undefined ); // true, 이렇게 둘이 비교하게되면 특별한 규칙이 적용되어 참이 나온다.
alert( null === undefined ); // false, 엄격하게 비교한다.

 

5. null과 undefined 를 0과  비교하기

- 기타 비교 연산자(>,<,>=,<=)의 경우 null을 숫자형 0으로 변환하여 비교한다.

alert( null > 0 );  // (1) false
alert( null < 0 );  // (2) false
alert( null == 0 ); // (3) false
alert( null >= 0 ); // (4) true

 

- 아래 예시처럼 undefined는 숫자형 NaN으로 변환하여 비교를 하는데, NaN이 피연산자인 경우에 항상 false를 반환한다.

alert( undefined > 0 ); // (1) false
alert( undefined < 0 ); // (2) false
alert( undefined == 0 ); // (3) false
alert( undefined >= 0 ); // (4) false

 

null과 undefined가 될 수 있는 변수가 비교연산자(>,<)의 피연산자로 올 때 주의할 필요가 있다.
null과 undefined 여부를 확인하는 코드를 추가하는 습관이 중요하다.