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

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

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

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

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

`undefined` 확인 및 처리 방법

`undefined`를 확인하는 가장 일반적인 방법은 `===` 연산자를 사용하는 것입니다. `==` 연산자는 타입 강제 변환을 수행하기 때문에 예상치 못한 결과를 초래할 수 있습니다.

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

또는 `typeof` 연산자를 사용할 수도 있습니다.

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

함수 매개변수가 `undefined`인 경우 기본값을 설정하는 것도 좋은 방법입니다.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet(); // "Hello, Guest!" 출력
greet('Alice'); // "Hello, Alice!" 출력

`undefined` vs `null`

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

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

let myVariable; // undefined
myVariable = null; // null

`undefined` 관련 에러 방지

`undefined` 관련 에러를 방지하기 위해 다음과 같은 사항을 유의해야 합니다.

• 변수를 선언하고 초기값을 할당하는 습관을 들입니다.
• 함수에서 항상 `return` 문을 사용하고 반환 값을 명시합니다.
• 객체의 속성에 접근하기 전에 속성이 존재하는지 확인합니다. Optional Chaining (?.) 연산자를 사용하면 더 간편하게 확인할 수 있습니다.
• 함수 호출 시 필요한 매개변수를 모두 전달합니다.

결론

`undefined`는 JavaScript에서 중요한 개념입니다. `undefined`의 의미와 발생 원인, 처리 방법을 이해하고 적절하게 처리함으로써 버그를 예방하고 안정적인 코드를 작성할 수 있습니다.