“Undefined”의 이해: 프로그래밍 세계의 ‘정의되지 않음’을 탐구하다

일상생활에서 ‘정의되지 않음’은 혼란이나 모호함을 의미할 수 있습니다. 하지만 컴퓨터 프로그래밍, 특히 JavaScript와 같은 동적 언어에서는 ‘Undefined’가 단순한 오류가 아니라, 특정 상태를 나타내는 중요한 키워드이자 개념입니다. 이는 프로그램이 특정 변수나 속성에 유효한 값을 아직 가지고 있지 않음을 명확히 알려주는 시스템의 방식입니다. 이 글에서는 ‘Undefined’가 무엇이며, 왜 존재하고, 언제 나타나며, 다른 유사한 개념들과 어떻게 다른지, 그리고 이를 어떻게 효과적으로 다룰 수 있는지에 대해 자세히 살펴보겠습니다. ‘Undefined’를 올바르게 이해하고 활용하는 것은 견고하고 예측 가능한 코드를 작성하는 데 필수적인 역량입니다.

1. Undefined란 무엇인가?

가장 본질적인 의미에서 ‘Undefined’는 ‘값이 할당되지 않았음’을 나타냅니다. 이는 변수가 선언되었지만 아직 어떠한 값으로도 초기화되지 않았거나, 객체의 존재하지 않는 속성에 접근하려고 할 때, 또는 함수가 명시적으로 반환하는 값 없이 종료될 때 등 다양한 상황에서 나타나는 원시(Primitive) 타입의 값입니다.

중요한 점은 ‘Undefined’가 오류(Error)가 아니며, 프로그램의 실행을 멈추게 하지 않는다는 것입니다. 대신, 특정 변수나 속성에 현재 유효한 값이 없다는 사실을 시스템이 우리에게 알려주는 방식입니다. 많은 프로그래밍 언어에서 이러한 ‘값의 부재’ 상태를 표현하지만, JavaScript에서는 이를 명시적인 ‘Undefined’ 값으로 표현하며 중요한 의미를 가집니다.

let myVariable;
console.log(myVariable); // Output: undefined
// 'myVariable'은 선언되었지만 어떤 값도 할당되지 않았습니다.
        

2. Undefined가 나타나는 주요 상황

‘Undefined’는 개발 과정에서 의도치 않게 만나기도 하지만, 때로는 특정 로직을 구현하는 데 있어 유용하게 사용될 수 있습니다. 다음은 ‘Undefined’가 발생하는 대표적인 경우들입니다.

2.1. 초기화되지 않은 변수

변수를 선언했지만 초기에 아무 값도 할당하지 않으면, 해당 변수의 기본값은 ‘Undefined’가 됩니다. 이는 var, let, const 모두에 적용되지만, const는 선언 시 반드시 초기화되어야 하므로 이 경우에는 해당되지 않습니다.

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

var anotherUninitializedVar;
console.log(anotherUninitializedVar); // undefined

// const declaredConst; // SyntaxError: Missing initializer in const declaration
        

2.2. 존재하지 않는 객체 속성 접근

객체에 존재하지 않는 속성에 접근하려고 할 때, 해당 속성의 값은 ‘Undefined’로 반환됩니다.

const user = {
    name: "김철수",
    age: 30
};

console.log(user.name);    // "김철수"
console.log(user.email);   // undefined (user 객체에 email 속성이 없습니다.)
        

2.3. 함수 매개변수 누락

함수를 호출할 때, 정의된 매개변수에 해당하는 인자(argument)를 전달하지 않으면, 해당 매개변수는 함수 본문 내에서 ‘Undefined’ 값을 가집니다.

function greet(name) {
    console.log(`안녕하세요, ${name}님!`);
}

greet("이영희"); // 안녕하세요, 이영희님!
greet();       // 안녕하세요, undefined님! (name 매개변수가 전달되지 않음)
        

2.4. 명시적인 반환 값이 없는 함수

함수가 return 문을 사용하지 않거나, return 문 뒤에 아무런 값을 지정하지 않으면, 해당 함수는 ‘Undefined’를 반환합니다.

function doNothing() {
    // 아무것도 반환하지 않습니다.
}

function returnVoid() {
    return; // 명시적으로 아무 값도 반환하지 않음
}

console.log(doNothing());   // undefined
console.log(returnVoid());  // undefined
        

2.5. 배열의 범위를 벗어난 인덱스 접근

배열의 유효한 인덱스 범위를 벗어나 접근하려고 할 때, 해당 위치에는 값이 없으므로 ‘Undefined’가 반환됩니다.

const numbers = [10, 20, 30];

console.log(numbers[0]); // 10
console.log(numbers[2]); // 30
console.log(numbers[3]); // undefined (인덱스 3은 배열의 범위를 벗어납니다.)
        

3. Undefined와 다른 “빈” 개념들 비교

‘Undefined’는 값이 없음을 나타내는 중요한 개념이지만, 프로그래밍에서는 이와 유사해 보이는 다른 ‘빈’ 개념들이 존재하여 혼란을 줄 수 있습니다. 이들의 차이를 명확히 이해하는 것이 중요합니다.

3.1. Undefined vs. Null

• 타입: typeof undefined는 “undefined”를 반환하고, typeof null은 “object”를 반환합니다. 이는 JavaScript의 역사적인 버그로 간주되지만, 여전히 유효한 동작입니다.
• 동등 비교: 동등 연산자(==)를 사용하면 undefined == null은 true입니다. 하지만 일치 연산자(===)를 사용하면 undefined === null은 false입니다. 이는 두 값이 타입은 다르지만, 값이 없다는 측면에서는 유사하게 취급될 수 있음을 보여줍니다.

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"

console.log(undefined == null);  // true (값만 비교, 타입 변환 발생)
console.log(undefined === null); // false (값과 타입 모두 비교)

let myValue = null; // 개발자가 명시적으로 '값이 없음'을 지정
console.log(myValue); // null
        

3.2. Undefined vs. NaN (Not-a-Number)

• NaN: 유효하지 않은 수학 연산의 결과로 주로 나타나는 숫자 타입의 특수한 값입니다 (예: 0 / 0, "abc" * 1). 이는 ‘숫자가 아님’을 의미하지만, 여전히 숫자 타입에 속합니다.
• Undefined: 값 자체가 없음을 의미하는 원시 타입입니다.

console.log(typeof NaN);       // "number"
console.log(typeof undefined); // "undefined"

console.log(0 / 0);            // NaN
console.log(parseInt("hello")); // NaN
        

3.3. Undefined vs. 빈 문자열 (”), 0, false

이 세 가지 값(빈 문자열, 숫자 0, 불리언 false)은 JavaScript에서 “falsy” 값으로 간주되어 조건문에서 false처럼 동작합니다. 하지만 이들은 분명히 값을 가지고 있습니다. 반면 ‘Undefined’는 어떠한 값도 가지고 있지 않은 상태를 의미합니다.

let emptyString = '';
let zeroNumber = 0;
let booleanFalse = false;

console.log(typeof emptyString);  // "string"
console.log(typeof zeroNumber);   // "number"
console.log(typeof booleanFalse); // "boolean"
console.log(typeof undefined);    // "undefined"

if (emptyString) { /* 실행 안 됨 */ }
if (zeroNumber) { /* 실행 안 됨 */ }
if (booleanFalse) { /* 실행 안 됨 */ }
if (undefined) { /* 실행 안 됨 */ }
// 모두 falsy로 평가되지만, 그 의미는 다릅니다.
        

4. Undefined를 다루는 방법

코드의 안정성과 예측 가능성을 높이기 위해 ‘Undefined’ 값을 적절히 확인하고 처리하는 것은 매우 중요합니다.

4.1. typeof 연산자 사용

변수가 ‘Undefined’인지 확인하는 가장 일반적인 방법 중 하나입니다. 문자열 “undefined”와 비교합니다.

let someVar;
if (typeof someVar === 'undefined') {
    console.log("someVar는 정의되지 않았습니다.");
}

const obj = {};
if (typeof obj.nonExistentProp === 'undefined') {
    console.log("obj.nonExistentProp는 존재하지 않습니다.");
}
        

4.2. 엄격한 동등 연산자 (===) 사용

undefined는 JavaScript의 전역 객체(global object)의 속성이자 원시 타입의 값이므로, undefined 리터럴과 직접 비교할 수 있습니다. == 대신 ===를 사용하여 타입 강제 변환 없이 정확하게 비교하는 것이 좋습니다.

let maybeDefined;
if (maybeDefined === undefined) {
    console.log("maybeDefined는 undefined입니다.");
}
// null과의 혼동을 피하려면 ===를 사용하는 것이 좋습니다.
console.log(null === undefined); // false
        

4.3. 논리 OR (||) 연산자

변수가 undefined (또는 null, 0, '', false 등 모든 falsy 값)일 경우 기본값을 할당하는 데 유용합니다.

function getUsername(user) {
    const name = user.name || "손님"; // user.name이 undefined면 "손님" 사용
    console.log(name);
}

getUsername({ name: "박영희" }); // 박영희
getUsername({});                // 손님 (name 속성이 없으므로 undefined)
getUsername({ name: null });    // 손님 (name 속성이 null이므로)
getUsername({ name: '' });      // 손님 (name 속성이 빈 문자열이므로)
        

4.4. Nullish Coalescing (??) 연산자 (ES2020)

?? 연산자는 ||와 유사하지만, 왼쪽 피연산자가 null 또는 undefined일 경우에만 오른쪽 피연산자의 값을 반환합니다. 0이나 '', false는 유효한 값으로 취급됩니다.

function getConfig(config) {
    const theme = config.theme ?? "dark"; // config.theme가 null/undefined일 때만 "dark"
    const maxItems = config.maxItems ?? 10;
    const enableFeature = config.enableFeature ?? true;

    console.log(`테마: ${theme}, 최대 항목: ${maxItems}, 기능 활성화: ${enableFeature}`);
}

getConfig({ theme: "light", maxItems: 5, enableFeature: false }); // 테마: light, 최대 항목: 5, 기능 활성화: false
getConfig({});                                                   // 테마: dark, 최대 항목: 10, 기능 활성화: true
getConfig({ maxItems: 0, enableFeature: null });                 // 테마: dark, 최대 항목: 0, 기능 활성화: true
        

4.5. Optional Chaining (?.) 연산자 (ES2020)

객체의 중첩된 속성에 접근할 때, 중간 경로에 있는 속성이 null 또는 undefined일 경우 오류가 발생하는 것을 방지합니다. 이때 전체 표현식은 undefined를 반환합니다.

const userProfile = {
    id: 1,
    info: {
        name: "김민준",
        address: {
            city: "서울"
        }
    }
};

const userProfile2 = {
    id: 2
    // info 속성이 없습니다.
};

console.log(userProfile.info.address.city);     // 서울
console.log(userProfile.info.address.zipCode);  // undefined (zipCode 없음)
// console.log(userProfile2.info.address.city); // TypeError: Cannot read properties of undefined (reading 'address')

// Optional Chaining 사용:
console.log(userProfile.info?.address?.city);          // 서울
console.log(userProfile.info?.address?.zipCode);       // undefined (zipCode 없음)
console.log(userProfile2.info?.address?.city);         // undefined (info 없음)
console.log(userProfile2.nonExistent?.deeplyNested);   // undefined (nonExistent 없음)
        

5. Undefined를 피하기 위한 좋은 습관 (Best Practices)

• 변수 초기화: 변수를 선언할 때 가능한 한 빨리 기본값을 할당하여 ‘Undefined’ 상태를 최소화합니다. 특히 const를 사용하여 초기화되지 않은 변수를 만들지 않도록 합니다.
• 함수 매개변수 기본값: 함수 매개변수에 기본값을 지정하여, 인자가 전달되지 않았을 때 ‘Undefined’가 되는 것을 방지할 수 있습니다.
  

  
  function greetDefault(name = "손님") {
      console.log(`안녕하세요, ${name}님!`);
  }
  greetDefault(); // 안녕하세요, 손님님!
                  

• 유효성 검사: 외부에서 들어오는 데이터(API 응답, 사용자 입력 등)는 항상 ‘Undefined’ 또는 ‘null’일 가능성을 염두에 두고 유효성 검사를 수행합니다.
• 명확한 반환 값: 함수가 특정 상황에서 값을 반환하지 않아야 한다면, return null; 또는 return [];, return {};와 같이 의도된 ‘값이 없음’을 명시적으로 반환하여 ‘Undefined’와의 의미적 혼동을 피할 수 있습니다.

결론

‘Undefined’는 단순히 ‘정의되지 않음’을 넘어, 프로그래밍의 견고함과 예측 가능성을 위한 중요한 개념입니다. 이는 프로그램의 현재 상태를 알려주는 유용한 신호이며, 이를 올바르게 이해하고 적절히 처리하는 것은 오류를 방지하고, 코드를 더욱 안정적이며 유지보수하기 쉽게 만드는 데 필수적입니다.

typeof, ===, ||, ??, ?.와 같은 다양한 도구를 활용하여 ‘Undefined’ 값을 현명하게 다루고, 변수 초기화와 매개변수 기본값 설정 같은 좋은 프로그래밍 습관을 통해 ‘Undefined’로 인한 잠재적인 문제를 줄일 수 있습니다. 이제 여러분은 ‘Undefined’를 단순한 미지의 영역이 아닌, 논리적인 코드 흐름의 한 부분으로 인식하고 현명하게 다룰 수 있을 것입니다.