자바스크립트의 null과 undefined

"우아한 타입스크립트 with 리액트" - 원시 타입을 읽던 중 좀 헷갈리는 개념이 있어 글을 쓰게 되었습니다.

자바스크립트는 undefined 와 null 이라는 원시 타입이 존재합니다.

원시 타입: 데이터를 저장하는 타입

undefined와 null

undefined: 정의되지 않았다는 의미로 초기화되어 있지 않거나 존재하지 않음을 나타냅니다.

null: 명시적, 의도적으로 값이 아직 비어있을 수 있음을 나타냅니다.

type Person1 {
	name: string;
  	job?: string;
}
    
type Person2 {
	name: string;
	job: string | null;
}

책에서는 다음과 같이 서술되어 있었습니다.

모든 사람은 이름과 직업을 가진다고 가정해보자. 사람마다 현업에 종사하고 있을 수도 있고 무직일 수도 있다. Person1은 job이라는 속성이 있을 수도 또는 없을 수도 있음을 나타낸다. 즉, job이라는 속성 유무를 통해 무직인지 아닌지를 나타낸다. Person2는 job이라는 속성을 사람마다 갖고 있지만 값이 비어있을 수도 있다는 것을 나타낸다. 따라서 명시적인 null 값을 할당해 무직인 상태를 나타낸다고 볼 수 있다.

즉, 모든 사람의 직업은 가질 수도 있고, 없을 수도 있음(무직)을 나타냅니다.

하지만, 값이 입력되지 않은 사람 == 무직
이렇게 해석하기엔 모호한 부분이 생겨 유튜브 zerocho님 영상을 보게 되었습니다.

링크

const obj1 = {
  name: 'park',
  job: undefined
}

const obj2 = {
  name: 'kim',
  job: null
}

영상을 정리하자면

null: 무직
undefined: 빈 값

null은 명시적으로 쓰이므로 없다.
undefined는 값이 입력되지 않았다. (즉, 값이 할당되지 않았다.)
이렇게 해석하니 모호한 부분이 좀 해결될 수 있었던 것 같습니다.

정리

찾아보니 undefined를 값으로 할당하는 경우는 많이 없다고 합니다.
즉, "없다" 라는 표현은 null을 할당이 되지 않은 경우는 undefined로 해석하는 것이 좋다고 생각합니다.