JavaScript의 자료형과 특성(3)

undefined와 null의 차이?

자바스크립트의 자료형에는 기본적으로

자료형
숫자
문자
불린

세 가지가 들어간다.

여기에 두가지가 더 있는데 그게 바로

null 과 undefined 다.

null과 undefined는 모두 자바스크립트 내에서 '값이 없다' 는 뜻을 가지고 있다.

이는 일치연산자(===), 동등연산자(==)의 경우와 굉장히 비슷하다. 이는 null과 undefined도 '값이 없다' 라는 뜻을 내포하고 있지만 미세한 차이가 있다는 것을 의미한다.

값이 없음을 의도적으로 표현하는 'null'

값이 없는 null은 대개 값이 없음을 의도적으로 표현할 때 사용한다.
의도적으로 표현할 때 사용한다는 것이 다소 헷갈릴 수 있는데 아래와 같은 예를 보면 더 쉽게 이해가 가능하다.

let velog = null;
console.log(velog);

이와 같은 코드를 실행했을 때 출력되는 결괏값은 null이다. velog라는 변수에 'null' 값이 없다는 것을 코드를 작성하는 사람이 의도적으로 표현한 것이다.

이는 아래와 같은 경우를 보면 더 잘 이해할 수 있는데

let velog = {
name: 'choi',
age: 30,
job: null,
genderMale: false
}

주어진 객체가 위와 같을 때 job의 부분이 null로 표현된 걸 볼 수 있다. 이는 job이라는 값에 '값이 없음'이 지정된 것이다.
직업이 없다. 라고도 풀이가 가능하겠다.

값이 없다는 결과를 나타내는 'undefined'

null과는 반대로 undefined는 코드 작성자가 값이 없음을 의도적으로 표현한 게 아니라, 어떠한 코드를 실행했을 때 '결괏값이 없다'라는 것을 나타낸다.

예를 들어🔎

let choi;
console.log(choi);

👆 위와 같은 코드를 실행했을 때 출력되는 결괏값이 'undefined'다.
choi라는 변수 안에 아무런 값도 넣어주지 않았으므로 '값이 없다' 는 undefined가 결괏값으로 도출된 것이다.

변수를 선언만 하고 아무런 값도 지정해주지 않았는지, 값이 없음을 의도적으로 표현한 것인지가 null과 undefined의 큰 차이점이다.



'null' 과 'undefined'에 대해 또다른 예를 들어보자면.

🔎

1) let velog;
console.log(velog); _/undefined 출력_
2) velog = 'blog';
console.log(velog); _/blog라는 문자열 출력_
3) velog = null;
console.log(null); _/null 출력_

velog라는 함수에 아무런 값도 선언하지 않은 1번의 경우 결괏값이 undefined로 도출이 된다.

'blog' 라는 값을 넣은 2번은 blog 라는 값이 출력되고,
null 이라는 값이 없다는 뜻의 값을 넣은 3번은 null 이 출력된다.

✔ null 과 undefined 의 의미

이제까지의 예시로 확인했듯이 null과 undefined를 정의하면 아래와 같다고 할 수 있다.

null 은 값이 없음을 의도적으로 표현
undefined 는 처음부터 값이 없음을 나타냄

✋ 주의사항

let post = undefined;
console.log(post);

위와 같은 경우로 해도 결괏값으로는 undefined라는 값을 도출할 수 있지만 대개의 경우 null과 undefined는 위의 정의처럼 사용되기 때문에 변수에 undefined라는 값을 넣어 결과를 나타내는 경우 혼란이 올 수 있기 때문에 값이 없음을 의도적으로 표현하고 싶을 때는 null 로 나타내는 게 좋다.