Javascript - null과 undefined의 차이 그리고 확인 및 처리

null과 undefined은 존재하지 않는 것을 나타내는 자바스크립트가 가진 특별한 타입입니다. null은 Java 나 c# 같은 다른 언어에서도 사용되는 리터럴이기 때문에 사용하는 게 어렵지 않지만 undefined라는 타입은 기존에 null을 사용하던 프로그래머와 처음 자바스크립트를 마주한 사람에게는 혼란을 야기시키는 내용 중 하나입니다. null과 undefined의 차이는 무엇이고 어떻게 사용하는 게 좋은 걸까요?

null == undefined

null과 undefined 알아보기

결론적으로 null과 undefined의 의미는 둘다 값의 존재 유무를 표현하는 타입입니다. 자바스크립트에서는 세밀한 부분의 의미는 달라도 문맥적 의미로는 같은 의미를 가진 가진 타입을 2개로 분리해서 정의하다보니 프로그래머 입장에서는 애매모호함을 만들어내 불편을 만들어주는 요소 중 하나입니다. null과 undefined의 명확한 차이점을 이야기하기 전에 예제를 통해 null과 undefined를 조금 더 알아보겠습니다.

// true
console.log(null == undefined);

자바스크립트를 어느정도 사용할 줄 아는 프로그래머라면 일치 연산자(===)를 사용해 타입까지 비교 하지 않았으니 결과가 true로 나온다고 유추할 수 있지만 아직 자바스크립트를 잘 모른다면 쉽게 이해하기는 어렵습니다.

const condition1 = undefined;
const condition2 = null;

if (!condition1) {
    console.log('condition1은 false 입니다.');
}

if (!condition2) {
    console.log('condition2은 false 입니다.');
}

이번에는 조건문에 null과 undefined를 대입해본 예제 코드입니다. 이 코드의 실행 결과는 어떻게 나올까요?

if 조건문에 null과 undefined를 사용한 예제

위의 예제 코드들의 결과를 보니 null과 undefined는 똑같은 객체이고 타입의 이름만 달라 보이네요. null을 알고 있는 프로그래머라면 생각보다 쉽게 이해하고 사용할 수 있다고 느껴집니다. 앞서 이야기한 혼란을 준다는 부분은 찾을 수가 없네요.

null과 undefined의 차이

let message; // undefined
message = null; // null

null과 nundefined가 가진 차이점은 변수에 값이 null이라면 변수가 선언되고 null이라는 값이 주어진 상태이고 undefined라면 변수가 선언되고 아무것도 하지 않은 상태입니다. 즉 null은 직접적으로 값이 없어라고 말한 상태이지만 undefined는 아무것도 하지 않은 상태라고 말할 수 있기 때문에 프로그래머가 의도적으로 값이 주어지지 않은 상태의 동작을 개발하려는 것이 아니라면 undefined의 사용은 부적절하다고 이야기할 수 있습니다.

 

약간은 집착처럼 보일 수 있지만 왜 null과 undefined가 자바스크립트 코드를 작성하는데 혼란을 야기시키는지 확인해볼까요?

const object1 = undefined;
const object2 = null;

if (!object1) {
    console.log('object1은 값이 없습니다.');
}

if (!object2) {
    console.log('object1은 값이 없습니다.');
}

null과 undefined를 알아볼 때 사용한 코드를 변수명만 바꿔보았습니다. if 조건문에서 boolean을 사용하기도 하지만 때로는 객체의 유무를 판단 기준으로 하는 경우도 있는데 이와 같은 경우 초기값을 null, undefined로 사용한 경우 위의 예제처럼 결과가 동일합니다. 그렇기 때문에 처음 자바스크립트를 접하는 프로그래머는 null과 undefined 두 가지 중 어떤 것을 사용하는 것이 좋은지에 대한 고민을 하게 됩니다.

 

다시 한번 이야기드리면 의도적으로 undefined를 사용해야 하는 경우가 아니라면 null을 사용해주세요.

null 혹은 undefined 혹은 빈 값 확인하고 처리하기

const isEmpty = (value) => {
    if (value == null) {
        return true;
    }

    if (value.length) {
        return value.length === 0;
    }

    return Object.keys(value).length === 0;
}

// true
isEmpty(undefined);

// true
isEmpty(null);

// true
isEmpty('');


// false
isEmpty('abcd');

// false
isEmpty({ a: 1 });

// false
isEmpty([1, 2, 3]);

null, undefined, 빈 값을 확인해볼 수 있는 함수를 만들어 보았습니다. 특정 값들을 넣어서 테스트를 해보면 아래와 같은 결과를 얻을 수 있습니다.

null, undefined, 빈 값 테스트