1. undefined란 무엇인가?

undefined는 변수나 속성에 값이 할당되지 않은 상태를 나타내는 원시(primitive) 타입의 값입니다. 이는 주로 시스템에 의해 자동으로 할당되며, 어떤 변수가 선언되었지만 초기화되지 않았거나, 존재하지 않는 객체 속성에 접근하려 할 때 나타납니다. undefined는 논리적인 맥락에서 false로 평가되는 falsy 값 중 하나입니다.

원시 타입(Primitive Type)이란?

JavaScript에는 number, string, boolean, null, undefined, symbol, bigint와 같은 원시 타입이 있습니다. 이들은 객체가 아니며, 고정된 값을 가지므로 변경 불가능(immutable)합니다.

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

undefined는 개발자가 의도치 않게 혹은 시스템의 특정 로직에 의해 다양한 상황에서 발생합니다. 다음은 undefined를 흔히 마주치는 대표적인 경우들입니다.

2.1. 변수가 선언되었지만 초기화되지 않았을 때

let이나 var 키워드로 변수를 선언했지만, 명시적으로 어떤 값도 할당하지 않으면 해당 변수에는 자동으로 undefined가 할당됩니다.

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

var anotherVariable;
console.log(anotherVariable); // 출력: undefined

// const는 선언과 동시에 반드시 초기화해야 하므로 이 경우는 해당하지 않습니다.
// const uninitializedConst; // SyntaxError: Missing initializer in const declaration
            

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

객체(Object)에 존재하지 않는 속성(property)에 접근하려고 하면 undefined를 반환합니다. 이는 오류를 발생시키는 대신 '해당 속성이 없다'는 의미로 undefined를 반환하여 프로그램이 계속 실행될 수 있도록 합니다.

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

console.log(user.name);    // 출력: 김철수
console.log(user.email);   // 출력: undefined (user 객체에 email 속성이 없으므로)
            

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

함수를 호출할 때 선언된 매개변수(parameter)의 개수보다 적은 수의 인자(argument)를 전달하면, 전달되지 않은 매개변수들은 undefined 값을 가집니다.

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

greet("박영희"); // 출력: 이름: 박영희, 인사말: undefined (greeting 인자가 전달되지 않음)

function calculateSum(a, b, c) {
    console.log(`a: ${a}, b: ${b}, c: ${c}`);
    return a + b + c; // 이 경우 a+b+undefined는 NaN을 반환합니다.
}
console.log(calculateSum(10, 20)); // 출력: a: 10, b: 20, c: undefined, 반환: NaN
            

2.4. return 문이 없거나 값을 반환하지 않는 함수의 반환 값

함수가 명시적으로 어떤 값도 반환하지 않거나, return 문 뒤에 값이 없는 경우 해당 함수는 undefined를 반환합니다.

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

function returnEmpty() {
    return; // 값을 명시하지 않은 return 문
}
console.log(returnEmpty()); // 출력: undefined
            

2.5. void 연산자의 결과

JavaScript의 void 연산자는 어떤 표현식을 평가한 후 항상 undefined를 반환합니다. 이는 주로 표현식의 부수 효과를 발생시키고 싶지만, 그 결과 값은 필요 없을 때 사용됩니다.

console.log(void 0);        // 출력: undefined
console.log(void(1 + 2));   // 출력: undefined (1 + 2는 계산되지만, void는 undefined를 반환)
            

3. undefined와 null의 차이점

undefined와 null은 모두 '값이 없음'을 나타내지만, 그 의미와 의도는 명확히 다릅니다. 이 둘의 차이를 이해하는 것은 JavaScript 개발에 있어 매우 중요합니다.

• undefined: "값이 할당되지 않았다"는 것을 시스템이 알려주는 상태입니다. 변수가 선언만 되고 초기화되지 않았거나, 존재하지 않는 속성에 접근할 때 등, 의도치 않은 또는 시스템에 의한 부재를 나타냅니다.
• null: "값이 의도적으로 비어있음"을 나타내는 값입니다. 개발자가 명시적으로 변수에 null을 할당하여 '객체가 존재하지 않는다'거나 '어떤 값도 가지지 않는다'는 것을 나타낼 때 사용합니다. 이는 마치 '빈 상자'와 같습니다.

typeof 연산자 결과

typeof 연산자로 두 값의 타입을 확인하면 차이를 알 수 있습니다.

console.log(typeof undefined); // 출력: "undefined"
console.log(typeof null);      // 출력: "object" (JavaScript의 역사적인 버그로 인해, 실제로는 원시 타입)
            

동등 비교 (==)와 일치 비교 (===)

동등 비교(==)는 값만 비교하므로 null과 undefined는 동일하다고 판단하지만, 일치 비교(===)는 값과 타입 모두를 비교하므로 다르다고 판단합니다.

console.log(null == undefined);  // 출력: true (값이 동등하다고 판단)
console.log(null === undefined); // 출력: false (타입이 다르므로)
            

4. undefined를 확인하는 방법

코드 내에서 어떤 값이 undefined인지 확인하는 방법은 여러 가지가 있지만, 각각의 장단점을 이해하고 상황에 맞게 사용하는 것이 중요합니다.

4.1. 일치 비교 연산자 (===) 사용

가장 일반적이고 권장되는 방법입니다. 값과 타입이 모두 undefined와 일치하는지 확인합니다.

let myValue;
if (myValue === undefined) {
    console.log("myValue는 undefined입니다."); // 출력
}

const obj = {};
if (obj.prop === undefined) {
    console.log("obj.prop는 undefined입니다."); // 출력
}
            

주의: 만약 myValue가 아예 선언되지 않은 변수라면 if (myValue === undefined)는 ReferenceError를 발생시킵니다. 변수가 선언되었는지조차 확실하지 않을 때는 다음 typeof 방법을 사용하는 것이 안전합니다.

4.2. typeof 연산자 사용

typeof 연산자는 변수가 선언되지 않은 경우에도 오류 없이 "undefined" 문자열을 반환하므로, 변수의 존재 여부 자체가 불확실할 때 안전하게 사용할 수 있습니다.

let existingVar;
console.log(typeof existingVar); // 출력: "undefined"

// 선언되지 않은 변수에 대해 typeof를 사용해도 오류가 발생하지 않습니다.
console.log(typeof nonExistentVar); // 출력: "undefined"

if (typeof nonExistentVar === 'undefined') {
    console.log("nonExistentVar는 선언되지 않았거나 undefined입니다."); // 출력
}
            

4.3. Falsy 값을 이용한 확인 (일반적으로 덜 권장)

undefined는 false로 평가되는 falsy 값입니다. 따라서 조건문에서 직접 사용하여 값이 있는지 없는지 여부를 대략적으로 확인할 수 있습니다.

let data;
if (!data) { // data가 undefined, null, 0, "", false 중 하나이면 true
    console.log("데이터가 존재하지 않습니다."); // 출력
}
            

단점: 이 방법은 undefined 뿐만 아니라 null, 0, ""(빈 문자열), false 등 모든 falsy 값을 같은 '없음'으로 처리합니다. 따라서 특정 값(예: 숫자 0)이 유효한 값인데도 '없음'으로 처리될 수 있으므로, 정확히 undefined만을 확인하고 싶을 때는 === undefined나 typeof를 사용하는 것이 좋습니다.

5. undefined를 효과적으로 다루는 방법 및 모범 사례

undefined는 피할 수 없는 값이며, 이를 제대로 이해하고 처리하는 것은 안정적인 코드를 작성하는 데 필수적입니다.

5.1. 변수 초기화의 습관화

변수를 선언할 때 가능한 한 초기값을 할당하는 습관을 들이세요. 당장 할당할 값이 없다면, 의도를 명확히 하기 위해 null을 명시적으로 할당하는 것을 고려해볼 수 있습니다.

let userName = null; // 초기에는 어떤 사용자도 참조하지 않음
let userCount = 0;   // 초기 카운트는 0
let isActive = false; // 초기 상태는 비활성
            

5.2. 방어적 프로그래밍 (Defensive Programming)

객체의 속성이나 함수의 인자가 undefined일 수 있다는 것을 항상 염두에 두고 코드를 작성합니다. 특히 외부 API 응답이나 사용자 입력 등 신뢰할 수 없는 데이터에 접근할 때 중요합니다.

• 옵셔널 체이닝 (Optional Chaining, ?.): 객체의 중첩된 속성에 접근할 때 중간에 undefined나 null이 있는지 확인하지 않고 안전하게 접근할 수 있도록 도와줍니다.
  

  
  const user = {
      address: {
          street: "강남대로"
      }
  };
  
  console.log(user.address.street);       // 출력: 강남대로
  console.log(user.phone?.number);        // user.phone이 undefined이므로, undefined 반환 (오류 없음)
  console.log(user.profile?.avatar?.url); // user.profile이 undefined이므로, undefined 반환 (오류 없음)
                      

• 널 병합 연산자 (Nullish Coalescing Operator, ??): null 또는 undefined일 때만 기본값을 제공합니다. (0이나 ""는 유효한 값으로 취급)
  

  
  const userName = someUser.name ?? "손님"; // someUser.name이 null 또는 undefined이면 "손님"
  const pageLimit = settings.limit ?? 10;   // settings.limit이 null 또는 undefined이면 10 (0은 그대로 0)
                      

  || (OR 연산자)와의 차이점: ||는 falsy 값(0, "", false, null, undefined) 모두에 대해 기본값을 할당하는 반면, ??는 null과 undefined에 대해서만 작동하여 더 정확하게 '값이 없음'을 처리합니다.

• 함수 매개변수 기본값 (Default Parameters): ES6부터는 함수 매개변수에 기본값을 설정하여 undefined가 전달될 경우 대비할 수 있습니다.
  

  
  function sendMessage(message, sender = "익명") {
      console.log(`${sender}로부터: ${message}`);
  }
  
  sendMessage("안녕하세요!");           // 출력: 익명로부터: 안녕하세요!
  sendMessage("반갑습니다.", "홍길동"); // 출력: 홍길동로부터: 반갑습니다.
                      

5.3. undefined를 명시적으로 할당하지 않기

일반적으로 개발자가 변수에 undefined를 직접 할당하는 것은 권장되지 않습니다. undefined는 시스템이 '값이 할당되지 않은 상태'를 나타낼 때 사용하도록 맡겨두는 것이 좋습니다. 만약 특정 변수의 값을 비우고 싶다면, 명시적인 '값이 없음'을 나타내는 null을 사용하는 것이 의도를 더 명확하게 전달합니다.

let currentSelection = null; // 선택된 값이 없음을 명시적으로 나타냄

// 나중에
currentSelection = "아이템 A";

// 다시 선택을 해제할 때
currentSelection = null; // undefined 대신 null을 사용
            

6. 결론

undefined는 JavaScript를 비롯한 많은 프로그래밍 언어에서 '값이 할당되지 않은 상태'를 나타내는 중요한 원시 값입니다. 이는 단순히 오류를 의미하는 것이 아니라, 시스템이 특정 변수나 속성이 아직 초기화되지 않았거나 존재하지 않음을 알려주는 일종의 '메시지'로 볼 수 있습니다.

undefined와 null의 미묘하지만 중요한 차이를 이해하고, 옵셔널 체이닝, 널 병합 연산자, 매개변수 기본값 등과 같은 현대적인 JavaScript 문법을 활용하여 방어적으로 코드를 작성한다면, 예기치 않은 런타임 오류를 줄이고 더욱 견고하고 유지보수하기 쉬운 애플리케이션을 개발할 수 있을 것입니다.

이제 undefined를 단순히 '없는 값'으로 치부하기보다는, 그 의미와 발생 원인을 정확히 이해하고 상황에 맞는 적절한 처리 방법을 적용하여 프로그래밍 실력을 한 단계 더 발전시켜 나가시길 바랍니다.