JavaScript의 `undefined`: 정의되지 않은 값 이해하기
JavaScript에서 `undefined`는 변수에 값이 할당되지 않았음을 나타내는 특별한 값입니다. `null`과 혼동하기 쉽지만, `undefined`는 JavaScript 엔진에 의해 자동으로 할당되는 반면, `null`은 개발자가 의도적으로 “값이 없음”을 명시하기 위해 할당하는 값입니다. 이 글에서는 `undefined`의 의미, 발생 원인, 처리 방법, 그리고 `null`과의 차이점을 자세히 살펴보겠습니다.
`undefined`는 언제 발생할까요?
`undefined`는 다음과 같은 상황에서 발생합니다.
* **선언 후 초기화되지 않은 변수:** 변수를 선언했지만 값을 할당하지 않은 경우, 해당 변수의 값은 `undefined`입니다.
* **존재하지 않는 객체 속성 접근:** 객체에 존재하지 않는 속성에 접근하려고 할 때 `undefined`가 반환됩니다.
* **함수의 반환값이 없는 경우:** 명시적으로 `return` 문을 사용하지 않거나 `return` 문 뒤에 값을 지정하지 않은 함수는 `undefined`를 반환합니다.
* **함수의 매개변수가 전달되지 않은 경우:** 함수를 호출할 때 필요한 매개변수를 전달하지 않으면, 해당 매개변수는 `undefined`로 초기화됩니다.
`undefined` 확인 방법
`undefined`인지 확인하는 가장 좋은 방법은 `===` 연산자를 사용하는 것입니다. `==` 연산자는 타입 강제 변환을 수행하기 때문에 예기치 않은 결과를 초래할 수 있습니다.
“`javascript
let myVariable;
if (myVariable === undefined) {
console.log("myVariable는 undefined입니다.");
}
“`
`undefined` 처리 방법
`undefined`로 인한 오류를 방지하기 위해 다음과 같은 방법을 사용할 수 있습니다.
* **변수 초기화:** 변수를 선언할 때 초기값을 할당합니다.
* **조건문 사용:** 객체의 속성이나 함수의 반환값을 사용하기 전에 `undefined`인지 확인합니다.
* **옵셔널 체이닝(?.)과 Null 병합 연산자(??) 사용:** ES2020에 도입된 옵셔널 체이닝과 Null 병합 연산자를 사용하여 간결하게 `undefined`와 `null`을 처리할 수 있습니다.
“`javascript
const user = {
address: {
street: '123 Main St'
}
};
// 옵셔널 체이닝
let city = user?.address?.city; // user 또는 address가 undefined/null이면 city는 undefined
// Null 병합 연산자
city = city ?? 'Unknown City'; // city가 undefined/null이면 'Unknown City' 할당
console.log(city); // 'Unknown City' 출력
“`
`undefined` vs `null`
`undefined`와 `null`은 모두 “값이 없음”을 나타내지만 미묘한 차이가 있습니다. `undefined`는 변수에 값이 할당되지 않은 상태를 나타내는 반면, `null`은 개발자가 의도적으로 “값이 없음”을 할당한 상태를 나타냅니다. `null`은 일반적으로 변수나 객체 속성을 초기화하거나 함수에서 값이 없음을 반환할 때 사용합니다.
결론
`undefined`는 JavaScript에서 중요한 개념입니다. `undefined`의 의미와 발생 원인을 이해하고 적절하게 처리하는 것은 안정적이고 예측 가능한 JavaScript 코드를 작성하는 데 필수적입니다. 이 글에서 설명한 방법들을 활용하여 `undefined`로 인한 오류를 방지하고 견고한 애플리케이션을 개발하세요.
