[JS] null과 undefined의 차이

자바스크립트의 Nullish Coalescing(null 병합 연산자 ??)를 알게된 후에 null과 undefined의 차이를 정확히 알지 못한다는 것을 깨달았고 이번 기회에 정확한 개념을 짚고넘어갈 필요가 있었다.

---

먼저 null 병합 연산자를 공부하면서 왜 null과 undefined의 차이를 알아야했는지 살펴보자.

아래의 코드는 어떠한 문자열을 입력받아 출력하는 함수인 printMessage를 작성한것이다. 이때 전달받은 인자가 null 또는 undefined일 때는 "Empty Message"를 출력하게된다. 하지만 아래의 코드는 함수형 프로그래밍 관점에서 작성했을 때 좋은 코드는 아니다. 왜냐하면 if문과 같은 제어문을 사용하여 message를 "어떻게"에 치중되어있기 때문이다. 이를 좀 더 직관적으로 "무엇을"에 집중할 수 있도록 코드를 작성하려면 null 병합 연산자인 ??를 사용할 수 있다.

function printMessage(message) {
  if (message === null || message === undefined) {
    return "Empty Message";
  }
  return message;
}

console.log(printMessage("hello"));
console.log(printMessage());

아래의 코드는 위의 printMessage의 함수와 같은 로직으로 if문 대신 null 병합 연산자를 사용한 코드이다. 여기서 ??의 의미는 연산자 ?? 왼쪽(message)가 존재한다면 message를 사용하고 존재하지 않는다면 "Empty Message"를 출력한다는 의미이다.

function printMessage(message) {
  return message ?? "Empty Message";
}

console.log(printMessage("hello"));
console.log(printMessage());

그렇다면 위의 코드에서 null 병합 연산자 대신에 함수의 인자인 message에 기본인자를 정의하면 되지 않을까라는 생각을 할 수 있다. 아래의 코드를 보면 message의 기본 인자를 설정해준 상태이다. 이때 함수를 호출했을 때 undefined가 전달되면 기본인자가 출력되고 null이 전달되면 그대로 null이 출력된다.

function printMessage(message = "Empty Message") {
  return message;
}

console.log(printMessage("hello")); // "hello"
console.log(printMessage()); // "Empty Message"
console.log(printMessage(null)); // null

위와 같은 상황이 왜 발생했는지 null과 undefined의 차이를 통해 알아보자.

---

먼저 위와 같은 상황에서 인자가 undefined일 때만 기본인자를 사용하기 때문에 발생하는 상황이다. 그렇다면 null과 undefined는 모두 값이 비어있다는 것을 의미하는데 왜 두 개의 동작에서 차이가 발생하는 것일까?

 

자바스크립트 엔진은 변수를 선언하고 초기화할 때 변수에 undefined 값을 대입한다. 즉, 변수를 정의는 했지만 아직 값을 할당하지 않았기 때문에 undefined는 초기화되지 않았다는 의미이다.

 

그리고 null의 경우에는 개발자가 의도적으로 변수의 값을 비우는 것을 의미한다. 만약 이전에 값을 정의한 변수에 null을 대입한다면 해당 변수를 더 이상 참조하지 않겠다는 의미로 사용될 수 있다. 이때 자바스크립트 엔진은 더 이상 참조되지 않은 변수들에 대해 가비지 콜렉션을 진행할 것이다.

---

• null 병합 연산자 "??"는 ?? 왼쪽의 변수가 있을 때는 해당 변수를 그대로 사용하고 없을 때는 오른쪽에 정의한 값을 사용한다.
• undefined와 null은 모두 값이 비어있음을 의미한다.
• undefined는 자바스크립트 엔진에서 변수를 초기화하기 전의 상태로 비어있음을 의미하고
• null은 개발자가 의도적으로 변수의 값을 비우는 것을 의미한다.