[JS] null과 undefined의 차이

🧡 JavaScript

1. 기본 개념

undefined

정의

• 변수를 선언만 하고 초기화하지 않았을 때, JavaScript 엔진이 자동으로 할당하는 값입니다.
• 함수가 return문 없이 종료되면, 암묵적으로 반환되는 값입니다.

---

사용 상황

• 아직 값이 할당되지 않은 상태를 표현합니다.
• 예를 들어, 선언된 변수에 값이 들어가기 전까지는 해당 변수의 값은 undefined입니다.

let value;
console.log(value); // 출력: undefined

function doSomething() {
  // 아무 값도 반환하지 않으므로 undefined가 반환됩니다.
}
console.log(doSomething()); // 출력: undefined

---

null

정의

• 개발자가 명시적으로 "값이 없음"을 표현하기 위해 할당하는 값입니다.
• 의도적으로 객체나 변수에 “아직 값이 없음”을 표시하고자 할 때 사용합니다.

---

사용 상황

• 특정 변수가 나중에 어떤 값을 가지게 될 예정임을 알리면서, 현재는 비어있음을 표현할 때 유용합니다.
• 데이터베이스 조회 결과가 없거나, API 호출 결과가 비어있을 때 등에서 사용됩니다.

let user = null;
console.log(user); // 출력: null

---

2. 비교 연산자에서의 차이

느슨한 동등 비교(==)

• null과 undefined는 느슨한 동등 비교 시 서로 동등한 값으로 취급됩니다.

console.log(null == undefined); // true

---

엄격한 동등 비교(===)

• 엄격한 동등 비교에서는 자료형까지 일치해야 하기 때문에, 두 값은 서로 다른 값으로 간주됩니다.

console.log(null === undefined); // false

 

비교 방식의 차이는 조건문이나 로직을 작성할 때 의도치 않은 버그를 예방하기 위해 꼭 기억해야 합니다.

---

3. 사용 시 고려사항 및 주의점

의도적인 값 할당

• undefined는 주로 JavaScript 엔진이 자동으로 할당하는 값이므로, 개발자가 직접 사용하기보다는 “아직 값이 없다”는 상태를 나타내는 용도로 이해하는 것이 좋습니다.
• null은 개발자가 명시적으로 “값이 없음”을 나타내고자 할 때 할당합니다.
  • 예를 들어, 초기화 단계에서 변수에 “아직 데이터가 없다”라는 의미로 null을 할당해, 나중에 데이터를 받아오거나 객체를 생성할 때 이를 업데이트할 수 있습니다.

---

typeof 연산자와 역사적 이슈

• typeof null의 결과가 "object"로 나오는 것은 JavaScript 초기 설계 시의 오류로 인해 남아 있는 역사적 유산입니다.
  • 이 점은 null의 실제 용도와는 별개로, 타입 검사를 할 때 주의해야 할 부분입니다.

---

코드 가독성과 유지보수

• 변수에 값을 할당할 때, 의도적으로 “값이 없음”을 표현하고 싶다면 null을 사용하여 코드의 의도를 명확히 할 수 있습니다.
• 반대로, 초기화되지 않은 상태를 확인할 때는 undefined 여부를 체크하는 것이 일반적입니다.

---

4. 학습 정리 및 활용 방안

핵심 요약

• undefined: 변수가 선언은 되었지만 아직 초기화되지 않은 상태를 나타냅니다.
• null: 개발자가 의도적으로 “값이 없음”을 표시하기 위해 사용합니다.

---

실제 개발 활용

• 코드 작성 시 변수의 초기값 설정, API 응답 체크, 조건문 처리 등에서 null과 undefined의 차이를 명확히 이해하고 사용하면, 예기치 않은 오류를 예방할 수 있습니다.

---