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

JavaScript를 다루다 보면 undefined라는 값을 자주 마주치게 됩니다. undefined는 JavaScript에서 중요한 개념이며, 변수의 상태를 이해하는 데 필수적입니다. 이 글에서는 undefined가 무엇인지, 어떤 상황에서 발생하는지, 그리고 어떻게 다루어야 하는지 자세히 알아보겠습니다.

undefined란 무엇인가?

undefined는 JavaScript의 원시 자료형 중 하나로, 변수에 값이 할당되지 않았음을 나타냅니다. 선언만 하고 초기화하지 않은 변수, 존재하지 않는 객체의 속성에 접근할 때, 함수가 값을 반환하지 않을 때 등 다양한 상황에서 undefined가 발생합니다.

undefined가 발생하는 경우

• 선언 후 초기화하지 않은 변수: 변수를 var, let, const로 선언만 하고 값을 할당하지 않으면 해당 변수의 값은 undefined가 됩니다.

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

• 존재하지 않는 객체의 속성 접근: 객체에 존재하지 않는 속성에 접근하려고 하면 undefined를 반환합니다.

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

• 함수의 반환값이 없는 경우: return 문이 없거나 return 문 뒤에 값이 없는 함수는 undefined를 반환합니다.

function myFunction() {
    // 아무것도 반환하지 않음
}
console.log(myFunction()); // 출력: undefined

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

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

undefined와 null의 차이

undefined와 null은 모두 ‘값이 없음’을 나타내는 것처럼 보이지만, 미묘한 차이가 있습니다. undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타내는 반면, null은 개발자가 의도적으로 ‘값이 없음’을 할당한 상태를 나타냅니다. null은 값이 비어있음을 명시적으로 표현하기 위해 사용합니다.

undefined 확인하기

변수의 값이 undefined인지 확인하기 위해서는 엄격한 동등 연산자(===)를 사용하는 것이 좋습니다.

if (myVariable === undefined) {
    // myVariable은 undefined입니다.
}

undefined 다루기

코드에서 undefined로 인한 오류를 방지하기 위해 다음과 같은 방법을 사용할 수 있습니다.

• 변수 초기화: 변수를 선언할 때 초기값을 할당하여 undefined 발생을 예방합니다.
• 조건문 사용: 변수를 사용하기 전에 undefined인지 확인하고 적절한 처리를 수행합니다.
• 옵셔널 체이닝(?.) 및 Null 병합 연산자(??): 객체의 속성에 접근할 때 undefined 또는 null로 인한 오류를 방지하기 위해 사용할 수 있습니다.

let user = {
    address: {
        street: '123 Main St'
    }
};

// 옵셔널 체이닝
console.log(user?.address?.street); // 출력: 123 Main St
console.log(user?.profile?.name);    // 출력: undefined (오류 없음)

// Null 병합 연산자
let city = user?.address?.city ?? 'Unknown City';
console.log(city); // 출력: Unknown City