[JavaScript] 자바스크립트 null, undefined 차이 이해하기

자바스크립트에는 "없으러움(?)"을 표현하는 두 가지 자료형이 있다.

바로 null과 undefined.

 

[JavaScript] 자바스크립트 자료형(Data Type) 이해하기에서 정리했던 것처럼 이 둘은 자료형이면서 동시에 값인 독특한 특징이 있고 [JavaScript] 자바스크립트 형변환(Type Conversion) 이해하기 - 1에서 정리했던 것 처럼 두 값 모두 falsy한 값에 해당한다.

 

의미도 비슷하고 falsy한 값이기 때문에, 크게 구분해야 될 필요성을 못 느낄 수도 있지만,

가볍게라도 둘의 차이를 이해하고 구분할 수 있어야 한다.

 

가장 큰 차이는 '명시적 없음'과 '암시적 없음'..?

이 둘은 보통 빈 값이냐, 값을 할당하지 않았냐를 두고 구분한다.

화장실 휴지걸이 이미지로 많이 비교를 하는 모습도 자주 보인다.

화장실에 휴지걸이가 있으면 undefined

휴지걸이에 휴지심만 있면 null

정상적으로 휴지가 있으면 value라는 식의 이미지..?

 

개인적으로 내가 생각하는 이 둘의 가장 큰 차이는
명시적이냐 암시적이냐다. 나는 이게 훨씬 더 이해하기 쉬운 것 같다.

둘 다 없으러운 의미를 가진 값이지만.

코드를 작성하는 사람 입장에서,

null은 명시적이고 undefined는 암시적이다.

 

말 그대로 null은 코드를 작성할 때

내가 의도적으로 명확하게 비어 있다는 것을 
명시적으로 밝힐 때 할당하는 값이고

 

undefined는 할당되지 않은 값이라는 의미다.
사실 이 의미로도 충분히 이해를 못하는 것은 아니지만,
이것은 사실 코드를 해석하는 입장의 의미기 때문에,
코드를 작성하는 입장에서 처음 undefined를 이해할 때는
값을 할당하지 않았으니 없는 값이라고 암시적으로 알려줄 때 
확인되어지는 값으로 이해하는 것이 조금 더 쉬울 수 있다.

let a;
console.log(a); // undefined

a = null
console.log(a); // null;

null과 undefined의 차이를 가장 간략하게 볼 수 있는 예시가 아닐까 싶다.

 

변수 a를 선언만 했을 때 가지고 있는 값은 undefined다.

개발자가 스스로 없음을 명시한 것이 아니라, 

아무런 값도 할당하지 않아서, 자연스럽게 아무런 값이 없는 상태이기 때문에

이 값을 콘솔에 출력해보면 undefined라는 값이 확인된다.

 

반면, null은 값이 없다는 것을 명시적으로 표현하기 위해 할당하는 값이다.

 

물론 undefined를 할당할 수도 있다. 

let a;
console.log(a); // undefined

a = null;
console.log(a); // null

a = undefined;
console.log(a); // undefined

위 코드는 아무런 문제 없이 동작한다.

하지만, undefined 할당은 undefined 원래의 의미를 퇴색시키기 때문에 이런 코드는 작성하지 않는 것이 좋다.

만약 undefined를 의도하고자 한다면 할당하는 방법이 아닌, 다른 방식으로 간접적인 유도를 하는 것이 바람직하다.

 

암시적인 Undefined

사실 null은 명시적으로 할당하는 값이기 때문에, 크게 특별한 것은 없다.
형변환에서도 그랬듯, 코드를 작성하는 입장에서는 암시적인 현상을 파악해 둘 필요가 있다.
이 외에도 다른 경우들이 있을 수 있지만, undefined를 쉽게 볼 수 있는 4가지 경우는 아래와 같다.

 

1. 변수를 선언만 했을 경우

let a;
console.log(a); // undefined

가장 쉽게 볼 수 있는 경우지만, 사실 코드를 작성하면서 변수를 선언만 하는 경우는 그리 흔한 경우는 아니기 때문에 자주 볼만한 경우는 아니긴 하다.

 

 

2. 파라미터가 있는 함수에 아무런 값도 전달하지 않은 경우

function a(x) {
    console.log(x); // undefined
}

a(); 

파라미터가 있는 함수를 호출할 때 아무런 값도 전달해주지 않으면 함수 내에서 사용될 때 undefined 값이 된다.

이 경우는 사실 변수를 선언만 하고 값을 할당해주지 않은 것과 동일한 경우로 볼 수 있다.

 

 

3. return문이 없는 함수를 호출할 경우

function a() {
    let somethingCode;
}

console.log(a()); // undefined

retrun값을 명시하지 않은 함수는 기본적으로 undefined를 리턴한다. 그래서 리턴 문이 없는 함수를 선언한 뒤, 그 함수를 호출할 경우 undefined가 리턴되는 걸 확인할 수 있다.

 

 

4. 객체 내에 없는 속성을 참조할 경우

const a = {
    firstName: 'BigTop',
};

console.log(a.firstName); // BigTop
console.log(a.lastName); // undefined

이 경우가 아마도 undefined를 볼 수 있는 경우 중에서 상대적으로 그나마 제일 흔한 경우가 아닐까 생각된다.
자바스크립트는 객체 내부에 존재하지 않는 프로퍼티를 참조할 경우, 오류가 나타나는 것이 아니라 undefined값을 반환한다. 그렇기 때문에 실수로 속성 이름을 잘못 입력할 경우에도 볼 수 있고, 혹은 객체에 특정한 프로퍼티가 있는지, 속성 유무를 확인할 경우에도 볼 수 있다.

 

처음에는 그렇게 쉽게 사용되는 값들이 아니기도 하고, 실수나 오류인 상황에서 더 자주 보기 때문에 반가운 값이 아닐 수 있다. 하지만, 조금씩 코드를 여러 상황에 맞게 구성하다 보면, 이 둘을 명확하게 구분해야 할 순간들이 반드시 찾아오게 될 텐데, 그때 의미에 맞게 잘 구분해서 사용하는 것이 좋겠다.