1. “undefined”란 무엇인가?

“undefined”는 프로그래밍, 특히 JavaScript와 같은 동적 타입 언어에서 매우 흔하게 마주치는 값 중 하나입니다. 문자 그대로 ‘정의되지 않은’ 상태를 의미하며, 어떤 변수나 속성에 값이 할당되지 않았거나, 존재하지 않는 무언가에 접근하려 할 때 시스템이 자동으로 부여하는 특별한 값입니다.

1.1. 추상적 의미

일상생활에서 “정의되지 않았다”는 것은 ‘무엇인지 알 수 없는’, ‘명확한 형태나 의미가 없는’ 상태를 뜻합니다. 예를 들어, “이 단어는 사전에서 undefined다”라고 말한다면, 그 단어의 의미가 사전에 기록되어 있지 않다는 의미가 됩니다. 프로그래밍에서 “undefined”도 이와 유사하게 ‘값이 정해지지 않은’, ‘아직 존재하지 않는’ 상태를 나타냅니다.

1.2. 프로그래밍적 의미

프로그래밍 언어에서 “undefined”는 단순한 개념을 넘어 특정 데이터 타입이자 값으로 존재합니다. JavaScript에서는 Undefined라는 원시 타입(primitive type)에 속하며, 이 타입이 가질 수 있는 유일한 값입니다. 이는 메모리 공간은 할당되었지만, 실제 데이터(값)가 아직 채워지지 않은 상태를 나타내는 지표 역할을 합니다. 이는 개발자가 의도적으로 부여하는 null과는 중요한 차이점을 가집니다.

2. “undefined”와 “null”의 차이점

“undefined”와 null은 모두 ‘값이 없음’을 나타내지만, 그 의미와 발생 원인에 있어서 결정적인 차이가 있습니다. 이 둘을 명확히 구분하는 것이 안정적인 코드를 작성하는 데 매우 중요합니다.

2.1. undefined

• 의미: 값이 할당되지 않거나, 존재하지 않는 속성에 접근할 때 시스템이 자동으로 부여하는 값입니다. “값이 아직 정해지지 않았습니다” 또는 “해당 요소가 존재하지 않습니다”를 의미합니다.
• 타입: JavaScript에서 typeof undefined는 "undefined"를 반환합니다.
• 주요 발생:
  
  • 변수를 선언했지만 초기화하지 않았을 때
  • 객체의 존재하지 않는 속성에 접근하려 할 때
  • 함수의 매개변수가 전달되지 않았을 때
  • return 문이 없거나 명시적으로 값을 반환하지 않는 함수의 실행 결과
  • 배열의 범위를 벗어나는 인덱스에 접근할 때

let myVariable; // 변수 선언, 값 할당 안 됨
console.log(myVariable); // undefined 출력

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

function myFunction(param) {
    console.log(param);
}
myFunction(); // param에 값이 전달되지 않아 undefined 출력

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

const myArray = [1, 2];
console.log(myArray[2]); // 배열의 존재하지 않는 인덱스 접근 -> undefined 출력
            

2.2. null

• 의미: 개발자가 ‘의도적으로 값이 없음’을 명시하기 위해 할당하는 값입니다. “값이 비어있음”, “객체가 없음”을 의미합니다.
• 타입: JavaScript에서 typeof null은 "object"를 반환합니다. 이는 JavaScript의 역사적인 버그로 알려져 있으며, null이 원시 타입임에도 불구하고 객체로 표시됩니다.
• 주요 사용:
  
  • 변수를 비우거나, 객체 참조를 해제할 때
  • 함수에서 의도적으로 ‘없음’을 반환할 때
  • 데이터베이스에서 ‘값이 없음’을 표현할 때

let myData = "Hello";
myData = null; // 개발자가 의도적으로 null 할당
console.log(myData); // null 출력

const emptyObject = null; // 객체 참조가 없음을 명시
console.log(emptyObject); // null 출력

function getEmptyValue() {
    return null; // 의도적으로 null 반환
}
console.log(getEmptyValue()); // null 출력
            

2.3. 비교 요약

핵심: undefined는 “값이 아직 정해지지 않았다”는 것이고, null은 “값이 의도적으로 비어있다”는 것입니다. 이 차이를 이해하고 적절히 사용하는 것이 중요합니다.

3. “undefined”가 발생하는 일반적인 경우

“undefined”는 다양한 상황에서 발생할 수 있으며, 이러한 발생 원인을 이해하는 것은 버그를 진단하고 예방하는 데 필수적입니다.

3.1. 선언되었지만 할당되지 않은 변수

변수를 선언했지만 초기값을 명시적으로 할당하지 않으면, 해당 변수에는 자동으로 undefined가 할당됩니다.

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

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

// const 키워드는 반드시 초기화해야 하므로 이 경우는 해당되지 않음
// const userEmail; // SyntaxError: Missing initializer in const declaration
            

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

객체에 실제로 존재하지 않는 속성에 접근하려고 할 때 undefined를 반환합니다.

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

console.log(person.name); // "김철수"
console.log(person.address); // undefined (address 속성은 존재하지 않음)

const settings = {};
console.log(settings.theme.color); // TypeError: Cannot read properties of undefined (reading 'color')
// settings.theme이 undefined이므로, 그 하위 속성인 color에 접근하려다 오류 발생
            

3.3. 함수 매개변수

함수를 호출할 때, 선언된 매개변수에 해당하는 인자를 전달하지 않으면, 해당 매개변수는 함수 내부에서 undefined 값을 가집니다.

function greet(name, greeting) {
    console.log(`이름: ${name}`);
    console.log(`인사말: ${greeting}`);
}

greet("영희");
// 출력:
// 이름: 영희
// 인사말: undefined (greeting 매개변수에 값이 전달되지 않음)
            

3.4. 반환 값이 없는 함수

함수가 명시적으로 return 문을 사용하지 않거나, return 문 뒤에 값을 명시하지 않으면, 함수는 undefined를 반환합니다.

function doSomething() {
    console.log("작업을 수행합니다.");
    // 명시적인 return 문 없음
}

const result = doSomething();
console.log(result); // undefined

function doNothing() {
    return; // 값을 명시하지 않은 return
}

const emptyResult = doNothing();
console.log(emptyResult); // undefined
            

3.5. 배열의 존재하지 않는 인덱스

배열의 유효한 범위를 벗어나는 인덱스에 접근하려고 할 때 undefined를 반환합니다.

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors[3]); // undefined (인덱스 3은 존재하지 않음)
            

3.6. 기타 상황

• void 연산자: 어떤 표현식이든 void 연산자를 사용하면 항상 undefined를 반환합니다.
  

  
  console.log(void(0)); // undefined
  console.log(void("Hello")); // undefined
                      

• 삭제된 객체 속성: delete 연산자로 객체 속성을 삭제한 후 해당 속성에 접근하면 undefined를 반환합니다.
  

  
  const car = { brand: "Hyundai", model: "Sonata" };
  console.log(car.model); // "Sonata"
  delete car.model;
  console.log(car.model); // undefined
                      

4. “undefined”의 중요성과 효과적인 처리 방법

“undefined”는 단순한 값 오류가 아니라, 프로그램의 논리적 흐름이나 데이터 상태에 대한 중요한 단서를 제공합니다. 이를 올바르게 이해하고 처리하는 것은 안정적이고 예측 가능한 코드를 만드는 데 필수적입니다.

4.1. 오류 방지 및 디버깅

undefined 값에 대해 정의되지 않은 연산을 시도하면 TypeError와 같은 런타임 오류가 발생하기 쉽습니다. 예를 들어, undefined.property 또는 undefined()와 같은 코드는 즉시 오류를 일으킵니다. 이러한 오류를 예측하고 방지하기 위해 undefined를 적절히 처리해야 합니다.

4.2. 안전한 코드 작성

사용자 입력, API 응답, 외부 라이브러리 등은 예상치 못한 undefined 값을 반환할 수 있습니다. 이러한 상황에 대비하여 코드를 작성하는 것이 ‘방어적 프로그래밍’의 기본입니다. 이는 프로그램의 견고성을 높여 예상치 못한 크래시를 줄입니다.

4.3. “undefined”를 처리하는 방법

다양한 상황에 따라 undefined를 처리하는 여러 가지 기법이 있습니다.

4.3.1. 명시적인 값 확인 (typeof 또는 ===)

가장 기본적인 방법은 변수나 속성이 undefined인지 직접 확인하는 것입니다.

let data; // undefined
// if (data === undefined) { ... }
if (typeof data === 'undefined') { // 'undefined' 문자열과 비교하는 것이 더 명확
    console.log("data는 정의되지 않았습니다.");
}

const user = { name: "Alice" };
if (user.age === undefined) {
    console.log("user.age 속성은 존재하지 않습니다.");
}
            

팁: typeof 연산자를 사용하는 것이 더 안전합니다. 왜냐하면 undefined는 전역 객체의 속성이기 때문에, 엄격 모드가 아닌 환경에서는 재할당될 수도 있기 때문입니다. (일반적인 웹 환경에서는 거의 발생하지 않지만, 이론적으로 그렇습니다.)

4.3.2. 기본값 할당 (ES6+)

함수 매개변수나 변수에 기본값을 할당하여 undefined가 전달되거나 초기화되지 않았을 때 대신 사용되도록 할 수 있습니다.

// 함수 매개변수 기본값
function greet(name = "손님") {
    console.log(`안녕하세요, ${name}님!`);
}
greet(); // 안녕하세요, 손님!

// 변수 초기화 시 기본값 (단축 평가)
const userName = inputName || "익명"; // inputName이 falsy(false, 0, "", null, undefined)일 때 "익명" 할당
console.log(userName);

// 주의: || 연산자는 0, 빈 문자열, false도 기본값으로 처리하므로 주의 필요
const count = 0;
const actualCount = count || 10; // actualCount는 10이 됨 (의도치 않을 수 있음)
console.log(actualCount);
            

4.3.3. 논리적 OR 연산자 (||)를 이용한 기본값 설정

JavaScript의 단축 평가(Short-circuit evaluation)를 활용하여 undefined(또는 falsy 값)일 때 기본값을 설정할 수 있습니다. 위 예시 참조.

4.3.4. 선택적 체이닝 (Optional Chaining, ?. – ES2020)

객체의 중첩된 속성에 접근할 때, 중간 경로에 null이나 undefined가 있으면 TypeError가 발생합니다. 선택적 체이닝은 이를 안전하게 처리할 수 있도록 해줍니다. 해당 속성이 null 또는 undefined이면 즉시 평가를 중단하고 undefined를 반환합니다.

const userProfile = {
    id: 1,
    info: {
        address: {
            city: "Seoul"
        }
    }
};

console.log(userProfile.info.address.city); // "Seoul"
console.log(userProfile.info.phone); // undefined (phone 속성 없음)

// userProfile.contact가 undefined인데, .email에 접근하려 하면 오류 발생
// console.log(userProfile.contact.email); // TypeError

// 선택적 체이닝 사용:
console.log(userProfile.contact?.email); // undefined (오류 없이 안전하게 처리)
console.log(userProfile.info.address?.zipCode); // undefined
            

4.3.5. Nullish Coalescing 연산자 (?? – ES2020)

|| 연산자는 false, 0, ""(빈 문자열)도 falsy 값으로 취급하여 기본값을 할당합니다. 하지만 ?? 연산자는 오직 null과 undefined만을 ‘nullish’ 값으로 간주하고, 이 경우에만 오른쪽의 값을 사용합니다. 이는 0이나 빈 문자열도 유효한 값으로 취급하고 싶을 때 유용합니다.

const userInput = null;
const finalValue1 = userInput ?? "기본값"; // "기본값"
console.log(finalValue1);

const userCount = 0;
const finalCount1 = userCount || 100; // 100 (0이 falsy로 처리됨)
const finalCount2 = userCount ?? 100; // 0 (0은 nullish가 아니므로 그대로 사용)
console.log(finalCount1, finalCount2);

const userNameInput = "";
const finalName1 = userNameInput || "익명"; // "익명" (빈 문자열이 falsy로 처리됨)
const finalName2 = userNameInput ?? "익명"; // "" (빈 문자열은 nullish가 아니므로 그대로 사용)
console.log(finalName1, finalName2);
            

5. “undefined”를 다룰 때의 주의사항 및 팁

5.1. 느슨한 동등 비교 (==) 피하기

JavaScript에서 == 연산자는 타입 변환(coercion)을 수행합니다. 특히 null == undefined는 true를 반환합니다. 이는 예상치 못한 결과를 초래할 수 있으므로, 항상 === (일치 비교)를 사용하여 타입까지 엄격하게 비교하는 것이 좋습니다.

console.log(null == undefined); // true
console.log(null === undefined); // false
            

5.2. 변수 명시적 초기화 습관

변수를 선언할 때 가능한 한 초기값을 할당하는 습관을 들이세요. 당장 값이 없더라도 null 또는 적절한 빈 값([], {}, "")으로 초기화하면 undefined 발생을 줄이고 코드의 의도를 명확히 할 수 있습니다.

let data = null; // undefined 대신 null로 명시적 초기화
const items = []; // 빈 배열로 초기화
const config = {}; // 빈 객체로 초기화
            

5.3. 타입스크립트(TypeScript) 활용

타입스크립트는 컴파일 시점에 타입 검사를 수행하여 undefined와 관련된 잠재적 오류를 미리 잡아낼 수 있도록 돕습니다. 예를 들어, strictNullChecks 옵션을 활성화하면 null이나 undefined가 될 수 있는 값에 대한 명시적인 처리를 강제하여 더욱 견고한 코드를 작성할 수 있게 합니다.

5.4. 코드 가독성 향상

undefined는 코드의 흐름을 방해하고 디버깅을 어렵게 만들 수 있습니다. undefined가 발생할 수 있는 지점을 명확히 인식하고, 위에서 언급한 처리 방법을 적용하여 코드의 안정성과 가독성을 높이는 것이 중요합니다.

결론

“undefined”는 JavaScript 개발에서 피할 수 없는 중요한 개념입니다. 단순히 ‘값이 없다’는 의미를 넘어, 시스템이 특정 상황에서 자동으로 부여하는 특별한 값이며, null과는 분명히 구분됩니다. 변수가 초기화되지 않았거나, 존재하지 않는 속성에 접근하는 등 다양한 상황에서 발생할 수 있습니다.

이러한 “undefined”의 발생 원인을 명확히 이해하고, typeof나 ===를 이용한 명시적인 확인, 기본값 할당, 그리고 최신 문법인 선택적 체이닝(?.)과 Nullish Coalescing(??) 연산자를 활용하여 안전하고 견고한 코드를 작성하는 것이 중요합니다. “undefined”를 효과적으로 처리함으로써 런타임 오류를 줄이고, 코드의 가독성 및 유지보수성을 크게 향상시킬 수 있습니다.

이제 “undefined”를 더 이상 낯선 개념이 아닌, 개발 과정에서 적극적으로 관리하고 활용해야 할 중요한 요소로 인식하시길 바랍니다.