1.9null과 undefined

1. 정의와 주요 차이

둘 다 JavaScript에서 '값이 없음'을 나타내고, 둘 다 Primitive Value이라는 공통점이 있다.

세부적으로 들어가면 차이가 있는데, undefined는 값이 할당되지 않은 상태인 반면, null은 의도적으로 비어있는 값임을 표현한다. 따라서 undefined는 아예 선언조차 하지 않았거나, 선언만 하고 값을 할당하지 않은 변수에 자동으로 할당되는 반면, null은 값이 없음을 명시적으로 나타내기 위해 쓴다.

만약 변수 foo를 정의조차 하지 않은 경우,

javascript
foo; // ReferenceError: foo is not defined

만약 foo를 정의했는데 빈 값을 할당했다면,

javascript
const foo = null;
foo; //null

2. 예시

javascript
function updateProfile(user, newName) {
  // newName이 undefined인 경우: 인수가 전달되지 않아 기존 이름을 유지한다.
  if (newName === undefined) {
    console.log("새 이름이 제공되지 않았으므로 기존 이름을 유지합니다:", user.name);
  } 
  // newName이 null인 경우: 사용자가 의도적으로 이름을 없애는 경우.
  else if (newName === null) {
    console.log("사용자가 이름을 삭제하고자 합니다.");
    user.name = ""; // 또는 null로 할당하여 '값이 없음'을 표시한다.
  } 
  // 그 외의 경우: 새로운 이름으로 업데이트한다.
  else {
    console.log("사용자 이름을 업데이트합니다:", newName);
    user.name = newName;
  }
  return user;
}

let user = { name: "Alice" };

// 1. 이름을 업데이트하지 않음: newName이 undefined
updateProfile(user, undefined);
console.log(user); // { name: "Alice" }

// 2. 이름을 삭제함: newName이 null
updateProfile(user, null);
console.log(user); // { name: "" }

// 3. 이름을 'Bob'으로 업데이트함
updateProfile(user, "Bob");
console.log(user); // { name: "Bob" }

3. 주의점

타입 체크를 할 때 ==와 ===를 쓰곤 하는데, 후자를 써야하는 이유가 여기에도 있다. null과 undefined를 비교할 때, ==으로 비교하면 둘은 같다고 나오기 때문이다. 아래는 MDN에서 제공하는 예시들이다.

javascript
typeof null; // "object" (not "null" for legacy reasons)
typeof undefined; // "undefined"
null === undefined; // false
null == undefined; // true
null === null; // true
null == null; // true
!null; // true
Number.isNaN(1 + null); // false
Number.isNaN(1 + undefined); // true