javascript NULL 비교

javascript NULL 비교 금지

 

변수에 필요한 값이 할당되었는지 확인할 때 null과 비교하는 방법은 흔히 잘못 사용하는 패턴입니다.

var Value = {

    process : function(items){

        if(items!= null){

        items.sort();

        items.forEach(function(items){

            // do something

        });

    }

}

 

위 코드는 process() 메서드의 items 변수에 sort()와 forEach()를 사용하는 것으로 보아 items 변수가 배열이라는 전제하에 작성한 코드입니다.

items 변수가 배열이 아니면 로직을 수행할 수 없습니다. 이 코드는 변수 값이 null인지 확인은 하고 있지만, 에러를 막기에는 문제가 있습니다. items 변수에는 1이라는 값도 문자열도 그 외 어떠 객체든지 올 수 있습니다. 이러한 값은 문법적으로는 null이 아니어서 process() 메서드에서 sort() 메서드를 호출하면 에러가 발생합니다.

 

변수를 단순히 null과 비교하면 변수 값에 대한 정보가 부족해 로직을 계속 진행해도 안전한지 알 수 없습니다.

다행히 자바스크립트는 변수에 원하는 값이 할당되었는지 확인하는 방법을 다양하게 제공합니다.

 

1. 기본 데이터 타입 알아내기

자바스크립트에는 문자열, 숫자, 불린, null, undefined 총 5개의 기본 데이터 타입이 있습니다.

기대하는 값이 문자열, 숫자, 불린, undefined라면 typeof 연산자를 사용합니다. 변수에 typeof 연산자를 사용하면 변수 값의 타입명을 문자열로 반환합니다.

 

typeof를 사용하면

문자는 "string"을 반환합니다.

숫자는 "number"을 반환합니다.

불린은 "boolean"을 반환합니다.

undefined는 "undefined"을 반환합니다.

 

사용방법은 typeof 'value' 또는 typeof('value')와 같이 사용도 가능합니다.

 

typeof 연산자는 선언되지 않은 변수에 사용해도 에러가 발생하지 않습니다. 선언한 변수이든, 선언하지 않은 변수이든 값이 undefined이면 둘 다 "undefined"로 반환합니다.

 

기본 데이터 타입에서 마지막으로 다룰 타입은 null입니다. null은 변수에 값이 할당되었는지 확인할 때 사용하면 안 됩니다. 단순히 변수를 null 값으로만 비교하면 무슨 값을 원하는지 알 수 없습니다. 단, null 비교가 허용되는 예외 사항이 있는데 기대하는 값이 정말 null이라면 null을 직접 사용해도 됩니다. 여기서 null 값과 비교할 때는 반드시 비교 연산자로 === 또는 !==를 사용해야 합니다.

 

조건에 맞는 DOM 요소가 없으면 document.getElementById() 메서드는 실제로 null을 반환합니다.

이 메소드는 확실히 null을 반환하거나 요소를 반환합니다. null은 기대하던 값 중 하나이므로 !== 연산자를 사용해 null과 비교해도 됩니다.