JavaScript의 `undefined`: 정의되지 않은 값 이해하기

JavaScript에서 `undefined`는 변수에 값이 할당되지 않았음을 나타내는 특별한 값입니다. `null`과 혼동하기 쉽지만, `undefined`는 JavaScript 엔진에 의해 자동으로 할당되는 반면, `null`은 개발자가 의도적으로 “값이 없음”을 명시적으로 할당하는 값입니다. 이 글에서는 `undefined`의 의미, 발생 원인, 처리 방법, 그리고 `null`과의 차이점에 대해 자세히 알아보겠습니다.

`undefined`는 언제 발생할까요?

`undefined`는 다음과 같은 상황에서 발생합니다:

* **선언만 하고 초기화하지 않은 변수:** 변수를 선언했지만 값을 할당하지 않으면 JavaScript 엔진은 자동으로 `undefined`를 할당합니다.
* **존재하지 않는 객체의 속성에 접근:** 객체에 존재하지 않는 속성에 접근하려고 하면 `undefined`가 반환됩니다.
* **함수에서 return 문이 없을 경우:** 함수에 `return` 문이 없거나 `return` 문 뒤에 값이 없으면 암시적으로 `undefined`를 반환합니다.
* **함수의 매개변수에 값을 전달하지 않은 경우:** 함수를 호출할 때 필요한 매개변수를 전달하지 않으면 해당 매개변수는 `undefined`로 초기화됩니다.

예시

let myVariable;
console.log(myVariable); // undefined

const myObject = {};
console.log(myObject.nonExistentProperty); // undefined

function myFunction() {
  // return 문이 없음
}
console.log(myFunction()); // undefined

function anotherFunction(param) {
  console.log(param);
}
anotherFunction(); // undefined

`undefined` 처리 방법

`undefined`로 인한 오류를 방지하려면 다음과 같은 방법을 사용할 수 있습니다:

* **초기값 할당:** 변수를 선언할 때 초기값을 할당하여 `undefined` 발생을 예방합니다. `let myVariable = 0;` 또는 `let myString = “”;` 와 같이 명시적으로 초기값을 설정하는 것이 좋습니다.
* **조건문 사용:** 변수나 객체 속성의 값이 `undefined`인지 확인하고 처리합니다.

if (myVariable !== undefined) {
  // myVariable이 undefined가 아닌 경우에만 실행
}

if (typeof myObject.property !== 'undefined') {
  // myObject.property가 존재하는 경우에만 실행
}

* **옵셔널 체이닝(?.) 및 null 병합 연산자(??) 활용:** ES2020에 도입된 옵셔널 체이닝과 null 병합 연산자는 `undefined`와 `null`을 효율적으로 처리하는 데 유용합니다.

const value = myObject?.property ?? 'default value';

`undefined` vs `null`

`undefined`와 `null`은 둘 다 “값이 없음”을 나타내지만, 다음과 같은 차이점이 있습니다:

* **`undefined`:** 변수에 값이 할당되지 않은 **초기 상태**를 나타냅니다. JavaScript 엔진에 의해 자동으로 할당됩니다.
* **`null`:** 개발자가 의도적으로 “값이 없음”을 **명시적으로 할당**하는 값입니다. 변수에 값이 없다는 것을 의도적으로 표현하고 싶을 때 사용합니다.

결론

`undefined`는 JavaScript에서 중요한 개념입니다. `undefined`의 발생 원인과 처리 방법을 이해하면 코드의 안정성을 높이고 예상치 못한 오류를 방지할 수 있습니다. 변수 초기화, 조건문 사용, 그리고 옵셔널 체이닝 및 null 병합 연산자를 적절히 활용하여 `undefined` 관련 문제를 효과적으로 해결하세요.