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

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

`undefined`는 언제 발생하나요?

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

• 선언만 하고 초기화하지 않은 변수: 변수를 선언했지만 값을 할당하지 않으면 JavaScript 엔진은 자동으로 `undefined`를 할당합니다.

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

• 함수에서 return 문이 없을 경우: 함수에 명시적인 `return` 문이 없으면 암묵적으로 `undefined`를 반환합니다.

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

• 객체에 존재하지 않는 프로퍼티에 접근할 경우: 객체에 존재하지 않는 프로퍼티에 접근하려고 하면 `undefined`를 반환합니다.

const myObject = { name: "John" };
console.log(myObject.age); // 출력: undefined

• 함수의 매개변수에 값을 전달하지 않을 경우: 함수를 호출할 때 필요한 매개변수를 전달하지 않으면, 해당 매개변수는 `undefined`로 초기화됩니다.

function greet(name) {
    console.log("Hello, " + name + "!");
}
greet(); // 출력: Hello, undefined!

`undefined` 처리 방법

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

• 변수 초기화: 변수를 선언할 때 초기값을 할당합니다.

let myVariable = ""; // 빈 문자열로 초기화
let myNumber = 0; // 0으로 초기화

• 조건문 사용: 변수가 `undefined`인지 확인하고 처리합니다.

if (myVariable === undefined) {
    // myVariable이 undefined일 경우 처리할 로직
    myVariable = "Default Value";
}

• 옵셔널 체이닝(?.)과 Null 병합 연산자(??) 사용: 객체의 프로퍼티에 접근할 때 `undefined` 또는 `null`로 인한 오류를 방지합니다.

const user = { address: { street: "123 Main St" } };
console.log(user?.address?.street); // 출력: 123 Main St
console.log(user?.profile?.name ?? "Unknown"); // 출력: Unknown

`undefined` vs `null`

`undefined`와 `null`은 모두 “값이 없음”을 나타내지만 미묘한 차이가 있습니다.

• `undefined`: 변수가 선언되었지만 값이 할당되지 않은 상태.
• `null`: 개발자가 의도적으로 “값이 없음”을 할당한 상태. 객체가 존재하지 않음을 명시적으로 표현할 때 사용.

엄격한 비교 연산자(`===`)를 사용하면 `undefined`와 `null`을 구분할 수 있습니다. 하지만, 느슨한 비교 연산자(`==`)를 사용하면 `undefined`와 `null`은 같다고 판단됩니다.

결론

`undefined`는 JavaScript에서 흔하게 발생하는 값이지만, 제대로 이해하고 처리하지 않으면 예상치 못한 오류를 발생시킬 수 있습니다. 이 글에서 설명한 내용을 통해 `undefined`를 효과적으로 처리하고 더욱 안정적인 JavaScript 코드를 작성하시기 바랍니다.