JavaScript의 ‘undefined’: 개념부터 활용까지 완벽 가이드

JavaScript를 사용하다 보면 ‘undefined‘라는 값을 자주 접하게 됩니다. 이는 단순한 에러 메시지가 아니라, JavaScript 언어의 근간을 이루는 원시(Primitive) 타입 값 중 하나로, 특정 상황에서 값이 할당되지 않았거나 존재하지 않음을 나타내는 중요한 지표입니다. 이 글에서는 ‘undefined‘가 무엇인지, 언제 발생하는지, ‘null‘과는 어떻게 다른지, 그리고 코드에서 이를 효과적으로 다루는 방법에 대해 상세히 알아보겠습니다.

1. ‘undefined’의 본질과 특성

undefined는 JavaScript가 “값이 없다”고 인식하는 여러 방법 중 하나입니다. 이는 개발자가 의도적으로 값을 비워둔 것이 아니라, 시스템이 자동으로 ‘값이 정해지지 않았다’고 판단한 상태를 의미합니다.

주요 특성:

• 원시 타입(Primitive Type): number, string, boolean, symbol, bigint, null과 함께 JavaScript의 7가지 원시 타입 중 하나입니다.
• 자동 할당: JavaScript 엔진에 의해 특정 조건에서 자동으로 변수나 속성에 할당됩니다.
• Falsy 값: 불리언 컨텍스트(if 문 등)에서 false로 평가되는 값 중 하나입니다. (다른 falsy 값: false, null, 0, -0, NaN, '' (빈 문자열), 0n (BigInt 0)).
• typeof 연산 결과: typeof undefined는 문자열 "undefined"를 반환합니다.

console.log(typeof undefined); // "undefined"
console.log(Boolean(undefined)); // false (falsy 값임을 확인)
        

2. ‘undefined’가 발생하는 다양한 상황

undefined는 여러 가지 상황에서 나타날 수 있으며, 이를 이해하는 것은 JavaScript 코드의 동작 방식을 파악하는 데 매우 중요합니다.

1. 값이 할당되지 않은 변수 선언:
   

   var, let 키워드로 변수를 선언하고 초기 값을 할당하지 않으면, 해당 변수는 자동으로 undefined로 초기화됩니다.

   
   let myVariable;
   console.log(myVariable); // undefined
   
   var anotherVariable;
   console.log(anotherVariable); // undefined
                   

2. 존재하지 않는 객체 속성에 접근할 때:
   

   객체에 정의되지 않은 속성에 접근하려고 하면 undefined를 반환합니다. 이는 에러를 발생시키지 않고, 해당 속성이 없다는 것을 알려주는 방식입니다.

   
   const myObject = {
       name: "JavaScript"
   };
   console.log(myObject.name);      // "JavaScript"
   console.log(myObject.age);       // undefined (myObject에 'age' 속성이 없음)
   console.log(myObject.address.city); // TypeError: Cannot read properties of undefined (myObject.address가 undefined이기 때문)
                   

   위 예시의 마지막 줄처럼, undefined 값의 속성에 다시 접근하려 하면 TypeError가 발생할 수 있으니 주의해야 합니다.

3. 함수의 매개변수가 전달되지 않았을 때:
   

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

   
   function greet(name, age) {
       console.log(`이름: ${name}`);
       console.log(`나이: ${age}`);
   }
   
   greet("김철수");
   // 출력:
   // 이름: 김철수
   // 나이: undefined
                   

4. 함수가 return 문 없이 종료되거나 return 뒤에 값이 없을 때:
   

   명시적인 return 문이 없거나, return; 처럼 값을 명시하지 않은 경우, 함수는 undefined를 반환합니다.

   
   function doNothing() {
       // 아무것도 반환하지 않음
   }
   console.log(doNothing()); // undefined
   
   function doSomething() {
       return; // 명시적으로 반환 값 없음
   }
   console.log(doSomething()); // undefined
                   

5. 배열의 범위를 벗어난 인덱스에 접근할 때:
   

   배열의 유효한 인덱스 범위를 벗어나 요소에 접근하면 undefined를 반환합니다.

   
   const myArray = [10, 20, 30];
   console.log(myArray[0]);  // 10
   console.log(myArray[2]);  // 30
   console.log(myArray[5]);  // undefined (인덱스 5에는 요소가 없음)
                   

6. void 연산자를 사용할 때:
   

   void 연산자는 피연산자를 평가한 후 undefined를 반환합니다. 주로 JavaScript URI에서 링크 클릭 시 페이지 이동을 막는 데 사용되었습니다.

   
   console.log(void 0);        // undefined
   console.log(void (1 + 2)); // undefined
                   

3. ‘undefined’와 ‘null’의 결정적인 차이

undefined와 함께 혼동하기 쉬운 값으로 null이 있습니다. 둘 다 “값이 없음”을 나타내지만, 그 의미와 발생 원인에 중요한 차이가 있습니다.

undefined: 시스템적 부재. 값이 “아직 정해지지 않았거나”, “존재하지 않는” 상태를 의미합니다. JavaScript 엔진에 의해 자동으로 할당되는 경우가 많습니다.

null: 의도적 부재. 개발자가 “의도적으로 비어있음”을 나타내기 위해 명시적으로 할당하는 값입니다. “값이 없는 객체”를 표현하는 경우가 많습니다.

주요 비교 지점:

• 의미:
  
  • undefined: 값이 할당되지 않음, 존재하지 않음.
  • null: 값이 비어있음, (의도적으로) 객체가 없음.

• typeof 결과:
  
  • typeof undefined: "undefined"
  • typeof null: "object" (이것은 JavaScript의 초기 버전의 버그로, 지금까지도 하위 호환성을 위해 유지되고 있습니다. null이 원시 타입임에도 불구하고 객체로 표시되는 것에 유의해야 합니다.)

• 동등 비교 (== vs ===):
  
  • null == undefined: true (추상 동등 비교는 타입 변환을 허용하여 둘을 같은 것으로 간주합니다.)
  • null === undefined: false (엄격 동등 비교는 타입까지 일치해야 하므로, 둘은 다른 값입니다.)

let a; // undefined
let b = null; // null

console.log(a);               // undefined
console.log(b);               // null

console.log(typeof a);        // "undefined"
console.log(typeof b);        // "object" (주의!)

console.log(a == b);          // true (타입 변환 후 같음)
console.log(a === b);         // false (타입이 다름)

console.log(a === undefined); // true
console.log(b === null);      // true
        

결론적으로, null은 ‘값이 없다’는 것을 명시적으로 알려줄 때 사용하고, undefined는 JavaScript 엔진이 ‘값이 정의되지 않았다’고 판단할 때 발생한다고 이해하는 것이 가장 정확합니다. 개발자가 변수를 비우고 싶다면 null을 할당하는 것이 일반적인 관례입니다.

4. ‘undefined’를 안전하게 확인하고 처리하는 방법

코드에서 undefined가 예상치 못한 동작이나 에러를 일으키지 않도록 안전하게 확인하고 처리하는 것은 매우 중요합니다.

4.1. 엄격 동등 비교 (===)

가장 안전하고 권장되는 방법입니다. 값과 타입 모두를 비교하므로 null과 혼동할 염려가 없습니다.

let value;
if (value === undefined) {
    console.log("value는 undefined입니다.");
} else {
    console.log("value는 다른 값을 가집니다.");
}
        

4.2. typeof 연산자

변수가 선언조차 되지 않았을 때도 에러 없이 "undefined"를 반환하므로, 전역 변수나 예상치 못한 변수의 존재 여부를 확인할 때 유용합니다.

let myVar;
console.log(typeof myVar); // "undefined"

// 선언되지 않은 변수에 접근 시 typeof는 에러를 발생시키지 않음
console.log(typeof nonExistentVar); // "undefined"

if (typeof myVar === "undefined") {
    console.log("myVar는 undefined이거나 선언되지 않았습니다.");
}
        

4.3. 논리 OR (||) 연산자를 이용한 기본값 할당 (주의 필요)

undefined는 falsy 값이므로, 논리 OR 연산자를 사용하여 기본값을 할당하는 패턴이 흔히 사용됩니다.

function printName(name) {
    const displayName = name || "익명 사용자";
    console.log(`이름: ${displayName}`);
}

printName("홍길동");    // 이름: 홍길동
printName(undefined); // 이름: 익명 사용자
printName(null);      // 이름: 익명 사용자
printName("");        // 이름: 익명 사용자 (주의: 빈 문자열도 falsy이므로 기본값이 할당됨)
printName(0);         // 이름: 익명 사용자 (주의: 0도 falsy이므로 기본값이 할당됨)
        

주의: || 연산자는 undefined 외에도 null, false, 0, ''(빈 문자열) 등 다른 falsy 값에 대해서도 기본값을 할당하므로, 이들을 유효한 값으로 처리해야 하는 경우에는 적절하지 않을 수 있습니다.

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

객체의 속성에 접근할 때, 중간 단계의 속성이 null 또는 undefined일 경우 에러를 발생시키지 않고 undefined를 반환합니다. 복잡한 객체 구조에서 특히 유용합니다.

const user = {
    name: "Jane Doe",
    address: {
        city: "Seoul"
    }
};

console.log(user.address?.city);    // "Seoul"
console.log(user.phone?.number);    // undefined (user.phone이 undefined이므로)
console.log(user.address.street?.name); // undefined (user.address.street이 undefined이므로)

// 에러가 발생하는 경우 (?.을 사용하지 않고 중간 값이 undefined일 때)
// console.log(user.phone.number); // TypeError: Cannot read properties of undefined
        

4.5. Null 병합 연산자 (Nullish Coalescing Operator, ??) – ES2020

|| 연산자의 한계를 보완하기 위해 도입되었습니다. ?? 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환합니다. 다른 falsy 값 (0, '', false 등)은 유효한 값으로 취급합니다.

function getConfig(configValue) {
    const value = configValue ?? "기본 설정값";
    console.log(`설정 값: ${value}`);
}

getConfig("사용자 정의값"); // 설정 값: 사용자 정의값
getConfig(undefined);     // 설정 값: 기본 설정값
getConfig(null);          // 설정 값: 기본 설정값
getConfig("");            // 설정 값: (빈 문자열) (빈 문자열은 nullish가 아니므로 그대로 반환)
getConfig(0);             // 설정 값: 0 (0은 nullish가 아니므로 그대로 반환)
getConfig(false);         // 설정 값: false (false는 nullish가 아니므로 그대로 반환)
        

5. ‘undefined’ 활용 및 주의사항

• 명시적인 undefined 할당 피하기:
  

  일반적으로 개발자가 변수에 undefined를 명시적으로 할당하는 것은 권장되지 않습니다. 어떤 변수를 “비어있는” 상태로 만들고 싶다면, null을 할당하는 것이 의도를 더 명확히 전달합니다.

  
  // 나쁜 예:
  let data = fetchData();
  // ... 로직 ...
  data = undefined; // 명시적으로 undefined 할당 (의도 파악 어려움)
  
  // 좋은 예:
  let data = fetchData();
  // ... 로직 ...
  data = null; // 데이터를 비우고 싶은 의도가 명확함
                  

• 방어적 프로그래밍:
  

  외부 API 응답, 사용자 입력, 선택적 매개변수 등 예측 불가능한 값에 대해서는 항상 undefined 여부를 확인하고 처리하는 방어적 프로그래밍 습관을 들이는 것이 중요합니다. 이는 런타임 에러를 방지하고 애플리케이션의 안정성을 높입니다.

• 글로벌 undefined:
  

  과거에는 전역 undefined 변수를 덮어쓸 수 있었으나, 최신 JavaScript 환경(ES5 이상)에서는 undefined가 쓰기 불가능한 속성(read-only)이므로 안전합니다. 하지만 오래된 환경을 고려하거나 불필요한 혼란을 피하기 위해 undefined를 변수로 선언하거나 값을 재할당하는 것을 피해야 합니다.

결론

JavaScript의 undefined는 단순히 “값이 없다”는 의미를 넘어, 값이 아직 할당되지 않았거나 존재하지 않는 특정 상태를 나타내는 중요한 원시 타입 값입니다. 이는 에러가 아니라 JavaScript 엔진의 자연스러운 동작 결과입니다.

undefined와 null의 차이를 명확히 이해하고, 코드에서 undefined가 언제 발생하는지 인지하며, 엄격 동등 비교(===), typeof, 선택적 체이닝(?.), Null 병합 연산자(??) 등 적절한 방법으로 이를 안전하게 처리하는 것은 견고하고 예측 가능한 JavaScript 애플리케이션을 개발하는 데 필수적인 지식입니다. 이러한 이해를 바탕으로 더욱 효율적이고 안정적인 코드를 작성하시길 바랍니다.