서론: undefined, 그 모호하지만 중요한 개념

소프트웨어 개발, 특히 자바스크립트(JavaScript)와 같은 동적 타입 언어를 다루다 보면 undefined라는 키워드를 자주 마주치게 됩니다.
이것은 단순히 에러 메시지가 아니라, 프로그램의 특정 상태를 나타내는 매우 중요한 원시 값(primitive value) 중 하나입니다.
많은 개발자들에게 undefined는 때로는 혼란스럽고, 때로는 예기치 않은 버그의 원인이 되기도 합니다.
하지만 그 본질을 정확히 이해하고 올바르게 다룰 줄 안다면, 코드를 더욱 견고하고 예측 가능하게 만들 수 있습니다.
이 글에서는 undefined가 무엇인지, 언제 발생하며, null과는 어떻게 다른지, 그리고 이를 안전하고 효율적으로 다루는 다양한 방법에 대해 구체적이고 심층적으로 탐구하고자 합니다.
undefined는 말 그대로 ‘정의되지 않음’을 의미하지만, 그 의미는 단순히 값이 없다는 것을 넘어 ‘아직 값이 할당되지 않았음’ 또는 ‘해당 속성이 존재하지 않음’과 같은 특정 상황을 명확히 알려주는 중요한 지표가 됩니다.

undefined란 무엇인가?

undefined는 자바스크립트에서 제공하는 원시 타입(Primitive Type) 중 하나로, 값이 할당되지 않은 상태를 나타내는 특별한 값입니다.
이는 개발자가 의도적으로 설정하기보다는, 자바스크립트 엔진이 특정 상황에서 자동으로 할당하는 경우가 대부분입니다.
undefined는 ‘값이 없음’을 의미하는 null과는 미묘하지만 중요한 차이를 가집니다.

undefined를 마주치는 일반적인 상황들은 다음과 같습니다:

• 변수 선언 후 초기화되지 않은 상태: let x; 와 같이 변수를 선언했지만 초기 값을 할당하지 않은 경우, 해당 변수에는 undefined가 자동으로 할당됩니다.
• 객체에 존재하지 않는 속성에 접근할 때: const obj = {}; console.log(obj.nonExistentProp); 와 같이 객체에 없는 속성에 접근하면 undefined가 반환됩니다.
• 함수의 매개변수가 전달되지 않았을 때: 함수를 호출할 때 정의된 매개변수에 해당하는 인자(argument)를 전달하지 않으면, 해당 매개변수는 함수 내부에서 undefined 값을 가집니다.
• 함수가 명시적으로 아무것도 반환하지 않을 때: 함수가 return 문을 사용하지 않거나, return;만 단독으로 사용한 경우, 함수는 undefined를 반환합니다.
• 배열의 존재하지 않는 인덱스에 접근할 때: const arr = [1, 2]; console.log(arr[2]); 와 같이 배열의 범위를 벗어난 인덱스에 접근하면 undefined가 반환됩니다.
• void 연산자 사용 시: void 연산자는 항상 undefined 값을 반환합니다. (예: void(0)).

undefined vs null: 미묘하지만 결정적인 차이

undefined와 null은 둘 다 ‘값이 없음’을 나타내지만, 그 의미와 의도에는 중요한 차이가 있습니다.
이 둘의 차이를 명확히 이해하는 것은 자바스크립트 개발에서 매우 중요합니다.

• undefined:
  
  • 의미: ‘값이 할당되지 않았다’ 또는 ‘정의되지 않았다’.
  • 할당 주체: 주로 자바스크립트 엔진/시스템에 의해 자동으로 할당됩니다.
  • 타입: typeof undefined는 "undefined"를 반환합니다.
  • 용도: 변수가 초기화되지 않았거나, 객체의 속성이 존재하지 않거나, 함수 인자가 전달되지 않은 경우 등 시스템이 ‘아직 없음’을 나타낼 때 사용됩니다.

• null:
  
  • 의미: ‘의도적으로 비어있음을 나타내는 값’ 또는 ‘어떤 객체도 참조하지 않음’.
  • 할당 주체: 개발자가 의도적으로 명시적으로 할당합니다.
  • 타입: typeof null은 "object"를 반환합니다. (이는 자바스크립트의 역사적인 버그로 간주되지만, 여전히 유지되고 있습니다.)
  • 용도: 변수에 객체가 없음을 명시적으로 나타내거나, 특정 값을 초기화하여 비어있음을 표현할 때 개발자의 의도를 담아 사용됩니다.

두 값의 차이를 보여주는 자바스크립트 코드 예시입니다:

let variableUndefined; // 선언만 하고 초기화하지 않음
let variableNull = null; // 의도적으로 null 할당

console.log(variableUndefined);     // undefined
console.log(variableNull);          // null

console.log(typeof variableUndefined); // "undefined"
console.log(typeof variableNull);      // "object" (주의: null의 타입은 object)

console.log(variableUndefined == variableNull);  // true (느슨한 동등성 비교: 두 값 모두 '값이 없음'으로 간주)
console.log(variableUndefined === variableNull); // false (엄격한 동등성 비교: 타입과 값이 모두 달라 false)

위 예시에서 볼 수 있듯이, == 연산자는 undefined와 null을 동일하게 처리하지만,
=== 연산자는 타입까지 비교하므로 둘을 명확히 구분합니다. 일반적으로 undefined와 null을 구분해야 하는 상황이 많으므로 === 사용이 권장됩니다.

undefined를 마주치는 흔한 상황들 (예시와 함께)

undefined가 발생하는 주요 시나리오를 구체적인 코드 예시와 함께 살펴보겠습니다.

1. 변수 선언 후 초기화되지 않은 경우

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

const anotherVariable; // const는 선언과 동시에 초기화해야 하므로 SyntaxError 발생

let이나 var로 변수를 선언하고 값을 할당하지 않으면, 해당 변수는 undefined 값을 가집니다.
const의 경우 반드시 선언과 동시에 초기화해야 하므로, 위 코드처럼 초기화하지 않으면 문법 오류(SyntaxError)가 발생합니다.

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

const user = {
    name: "Alice",
    age: 30
};

console.log(user.name);         // 출력: "Alice"
console.log(user.email);        // 출력: undefined (user 객체에 email 속성이 없음)
console.log(user.address.city); // 에러: TypeError: Cannot read properties of undefined (reading 'city')

객체에 없는 속성에 직접 접근하면 undefined가 반환됩니다.
하지만 존재하지 않는 속성의 또 다른 속성에 접근하려고 하면 undefined 값을 가진 것에 대해 속성 접근을 시도하는 것이므로 TypeError가 발생합니다.
이러한 에러를 방지하기 위해 옵셔널 체이닝 (Optional Chaining) 같은 문법이 유용합니다.

3. 함수 호출 시 매개변수 누락

function greet(name, greeting) {
    console.log(`${greeting}, ${name}!`);
}

greet("Bob"); // 출력: undefined, Bob!
// name은 "Bob"으로 할당되지만, greeting은 전달되지 않았으므로 undefined가 됨

함수를 호출할 때 정의된 매개변수에 해당하는 인자를 전달하지 않으면, 해당 매개변수는 함수 내부에서 undefined 값을 가집니다.
ES6부터는 매개변수에 기본값을 지정하여 이러한 상황을 방지할 수 있습니다:
function greet(name, greeting = "Hello") { ... }

4. 함수가 명시적으로 값을 반환하지 않을 때

function doSomething() {
    // 아무것도 반환하지 않음
    console.log("작업 수행");
}

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

const result1 = doSomething();
const result2 = doAnotherThing();

console.log(result1); // 출력: undefined
console.log(result2); // 출력: undefined

자바스크립트 함수는 명시적인 return 문이 없거나 return;만 단독으로 사용된 경우, 항상 undefined를 반환합니다.

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

const numbers = [10, 20, 30];

console.log(numbers[0]); // 출력: 10
console.log(numbers[2]); // 출력: 30
console.log(numbers[3]); // 출력: undefined (배열의 길이는 3이지만 인덱스는 0부터 2까지)

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

undefined를 안전하게 다루는 방법

undefined는 예상치 못한 동작이나 에러를 유발할 수 있으므로, 코드에서 이를 안전하게 처리하는 것이 중요합니다.
다음은 undefined를 효과적으로 다루는 몇 가지 방법입니다.

1. typeof 연산자 활용

typeof 연산자는 피연산자의 타입을 문자열로 반환합니다. undefined 값을 가진 변수에 대해 "undefined"라는 문자열을 반환하므로, 이를 통해 변수가 undefined인지 확인할 수 있습니다.

let myVar;
if (typeof myVar === 'undefined') {
    console.log("myVar는 undefined입니다.");
}

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

typeof는 선언되지 않은 변수에 접근할 때도 에러를 발생시키지 않고 "undefined"를 반환한다는 장점이 있습니다. (if (typeof undeclaredVar === 'undefined'))

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

=== 연산자는 값과 타입이 모두 동일한지를 확인합니다. undefined와 null을 명확하게 구분해야 할 때 가장 정확한 방법입니다.

let value = undefined;
let data = null;

if (value === undefined) {
    console.log("value는 정확히 undefined입니다.");
}

if (data === undefined) {
    console.log("data는 undefined가 아닙니다."); // 실행되지 않음
}

특별한 경우가 아니라면, undefined를 확인할 때는 ===를 사용하는 것이 모범 사례로 간주됩니다.

3. 느슨한 동등 연산자 (== null) 활용

== 연산자는 타입 강제 변환(type coercion)을 수행하여 비교합니다. null == undefined는 true를 반환하므로,
null과 undefined 모두를 ‘값이 없음’으로 간주하여 처리하고 싶을 때 유용합니다.

let testVal1 = undefined;
let testVal2 = null;
let testVal3 = 0;
let testVal4 = "";

if (testVal1 == null) { console.log("testVal1은 null 또는 undefined입니다."); } // true
if (testVal2 == null) { console.log("testVal2은 null 또는 undefined입니다."); } // true
if (testVal3 == null) { console.log("testVal3은 null 또는 undefined가 아닙니다."); } // false
if (testVal4 == null) { console.log("testVal4은 null 또는 undefined가 아닙니다."); } // false

이 방법은 0, 빈 문자열(""), false 등 다른 ‘falsy’ 값들은 걸러내고 오직 null과 undefined만 처리할 때 효과적입니다.

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

|| 연산자는 첫 번째 ‘truthy’ 값을 반환합니다. 변수가 undefined (또는 null, 0, "", false)인 경우, 기본값을 할당하는 데 자주 사용됩니다.

function getUserName(user) {
    const name = user.name || "손님"; // user.name이 undefined면 "손님"을 사용
    console.log(`사용자 이름: ${name}`);
}

getUserName({}); // 출력: 사용자 이름: 손님
getUserName({ name: "Charlie" }); // 출력: 사용자 이름: Charlie

이 방법은 간결하지만, 0이나 빈 문자열("")과 같이 유효한 ‘falsy’ 값마저도 기본값으로 대체해버린다는 단점이 있습니다.

5. 옵셔널 체이닝 (Optional Chaining – ES2020)

객체의 깊숙한 속성에 접근할 때, 중간 경로에 null 또는 undefined가 있을 수 있는 경우 에러를 방지하고 undefined를 반환하도록 하는 문법입니다.

const userProfile = {
    id: 1,
    name: "David",
    address: {
        street: "Main St",
        zip: "12345"
    }
};

console.log(userProfile.address?.street); // 출력: "Main St"
console.log(userProfile.contact?.phone);  // 출력: undefined (contact 속성이 없으므로 에러 대신 undefined 반환)

const userWithoutAddress = { id: 2, name: "Eve" };
console.log(userWithoutAddress.address?.zip); // 출력: undefined

?. 연산자를 사용하면 객체의 속성에 안전하게 접근할 수 있으며, 복잡한 중첩 객체 구조에서 특히 유용합니다.

6. Nullish coalescing (?? – ES2020)

?? 연산자는 null 또는 undefined인 경우에만 오른쪽 피연산자의 값을 반환하고, 그 외의 ‘falsy’ 값(0, "", false)에 대해서는 왼쪽 피연산자의 값을 그대로 유지합니다. || 연산자의 단점을 보완합니다.

const userInput = ""; // 사용자 입력이 빈 문자열
const defaultName = "익명";

const nameWithOR = userInput || defaultName;    // 출력: "익명" (빈 문자열이 falsy이므로)
const nameWithNullish = userInput ?? defaultName; // 출력: "" (빈 문자열은 null도 undefined도 아니므로)

let age = 0; // 나이가 0
const defaultAge = 18;

const ageWithOR = age || defaultAge;        // 출력: 18 (0이 falsy이므로)
const ageWithNullish = age ?? defaultAge;   // 출력: 0 (0은 null도 undefined도 아니므로)

?? 연산자는 0이나 빈 문자열("")과 같은 유효한 값을 기본값으로 대체하고 싶지 않을 때 이상적인 방법입니다.

undefined 관련 모범 사례 및 피해야 할 점

모범 사례

• 변수 초기화 습관화: 변수를 선언할 때는 가능한 한 초기 값을 할당하여 undefined 상태를 피하는 것이 좋습니다.
• 함수 매개변수 기본값 설정: ES6의 기본 매개변수 문법을 활용하여 함수 인자 누락으로 인한 undefined를 방지합니다. (예: function func(param = defaultValue) { ... })
• 타입 체크 및 null/undefined 검사 철저히: 중요한 로직을 수행하기 전에 변수의 값이 undefined 또는 null이 아닌지 항상 확인하는 습관을 들입니다.
• 옵셔널 체이닝과 Nullish coalescing 활용: 최신 자바스크립트 문법을 활용하여 간결하고 안전하게 undefined를 처리합니다.
• const 사용: 변경되지 않을 값에는 const를 사용하여 의도치 않은 undefined 할당을 막고, 코드의 안정성을 높입니다.

피해야 할 점

• undefined를 명시적으로 할당하는 것을 지양: 개발자가 의도적으로 ‘값이 없음’을 표현하고 싶다면 null을 사용하는 것이 더 명확합니다. undefined는 시스템이 ‘아직 값이 없음’을 나타낼 때 사용됩니다.
• == 연산자를 무분별하게 사용: 타입 강제 변환이 예상치 못한 결과를 초래할 수 있으므로, 대부분의 경우 === 연산자를 사용하는 것이 더 안전합니다.
• undefined를 에러 처리용으로 사용: undefined는 에러가 아닌 특정 상태를 나타내는 값입니다. 예상치 못한 상황이나 잘못된 입력에 대해서는 에러 객체(Error)를 던지거나 명시적인 에러 메시지를 사용하는 것이 좋습니다.

결론: undefined의 가치를 이해하고 활용하기

undefined는 자바스크립트의 핵심적인 부분이며, 그 동작 방식을 정확히 이해하는 것은 모든 자바스크립트 개발자에게 필수적입니다.
이는 단순한 ‘값이 없음’을 넘어, ‘값이 할당되지 않은 상태’나 ‘존재하지 않는 속성’과 같은 특정 상황을 정확히 알려주는 중요한 신호입니다.
undefined와 null의 차이를 인지하고, typeof, ===, ?., ?? 등 다양한 연산자를 활용하여 undefined를 안전하게 다루는 방법을 익힌다면,
더욱 견고하고 예측 가능한 코드를 작성할 수 있을 것입니다.

undefined는 오류가 아니라, 프로그램의 상태를 이해하고 적절히 대응할 수 있도록 돕는 유용한 정보입니다.
이를 무시하거나 잘못 처리하면 예기치 않은 버그로 이어질 수 있지만, 올바르게 이해하고 활용한다면 코드의 품질과 신뢰성을 크게 향상시킬 수 있을 것입니다.
이 글이 undefined에 대한 여러분의 이해를 돕고, 더 나은 코드를 작성하는 데 기여하기를 바랍니다.