“`html

“Undefined”(정의되지 않음) 개념에 대한 심층적 이해

소프트웨어 개발, 특히 자바스크립트(JavaScript)와 같은 동적 타입 언어에서 ‘undefined‘라는 용어는 매우 빈번하게 마주치는 개념입니다. 이는 단순한 오류 메시지가 아니라, 특정 상황에서 변수나 속성이 가지는 특별한 값(value)이자 상태(state)를 의미합니다. 많은 개발자들이 ‘undefined’를 처음 접했을 때 혼란스러워하거나, 이를 단순히 ‘오류’로 간주하여 간과하는 경우가 많습니다. 그러나 ‘undefined’의 정확한 의미와 발생 원인, 그리고 효과적인 처리 방법을 이해하는 것은 견고하고 오류 없는 코드를 작성하는 데 필수적인 지식입니다. 이 글에서는 ‘undefined’의 본질적인 의미부터, ‘null’과의 차이점, 다양한 발생 시나리오, 그리고 실제 프로그래밍에서의 중요성과 대응 전략에 이르기까지, 이 복잡하면서도 핵심적인 개념을 구체적이고 이해하기 쉽게 설명하고자 합니다.

1. Undefined(정의되지 않음)란 무엇인가?

‘undefined‘는 자바스크립트에서 제공하는 7가지 원시 타입(Primitive Type) 중 하나입니다. (나머지 6가지는 `null`, `Boolean`, `Number`, `String`, `Symbol`, `BigInt`입니다.) 말 그대로 ‘값이 할당되지 않았거나 존재하지 않는 상태‘를 나타내는 특별한 값입니다. 이는 시스템이 어떤 식별자(예: 변수, 객체 속성)에 대해 아직 명확한 값을 부여하지 않았을 때 자동으로 설정되는 기본 상태라고 할 수 있습니다.

• 값으로서의 undefined: ‘undefined’는 특정 변수나 표현식이 어떤 값도 가지지 않을 때 자동으로 할당되는 특별한 데이터 값입니다.
• 타입으로서의 undefined: `typeof` 연산자를 사용하면 ‘undefined’는 그 자체로 하나의 타입으로 인식됩니다.
  

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

• 오류가 아님: 중요한 점은 ‘undefined’가 오류(Error)가 아니라는 것입니다. 이는 프로그램의 정상적인 흐름에서 발생할 수 있는 유효한 상태 값입니다. 물론, ‘undefined’인 값을 잘못 사용하여 `TypeError: Cannot read properties of undefined`와 같은 런타임 오류가 발생할 수는 있지만, ‘undefined’ 자체는 오류가 아닙니다.

2. Undefined와 Null의 차이점: 미묘하지만 중요한 구분

‘undefined’와 함께 가장 많이 비교되는 개념이 바로 ‘null‘입니다. 두 값 모두 ‘값이 없다’는 의미를 내포하지만, 그 ‘없음’의 의도와 주체에 있어 중요한 차이가 있습니다. 이 차이를 명확히 이해하는 것이 자바스크립트 프로그래밍의 핵심입니다.

• undefined:
  
  • 의미: 시스템이 ‘아직 값을 할당하지 않은 상태’ 또는 ‘존재하지 않는 것’을 나타냅니다.
  • 주체: 주로 자바스크립트 엔진에 의해 자동적으로 할당됩니다.
  • 예시: 변수를 선언만 하고 초기화하지 않았을 때, 객체에 존재하지 않는 속성에 접근할 때.

• null:
  
  • 의미: 프로그래머가 ‘명시적으로 값이 없음을 의도한 상태’를 나타냅니다. ‘비어있음’ 또는 ‘존재하지 않음’을 의도적으로 표현할 때 사용합니다.
  • 주체: 개발자에 의해 수동으로 할당됩니다.
  • 예시: 변수를 초기화할 때 ‘비어있음’을 명시적으로 표현하고 싶을 때, DOM 요소에 접근했는데 해당 요소가 없을 때.

비교 코드 예시:

// 1. undefined
let myVariable;
console.log(myVariable); // 출력: undefined (변수가 선언되었으나 값이 할당되지 않음)

const myObject = { name: "Alice" };
console.log(myObject.age); // 출력: undefined (객체에 'age' 속성이 존재하지 않음)

// 2. null
let anotherVariable = null;
console.log(anotherVariable); // 출력: null (개발자가 명시적으로 '값이 없음'을 할당함)

const element = document.getElementById("nonExistentElement");
console.log(element); // 출력: null (해당 ID의 DOM 요소가 존재하지 않음을 의미)

// 3. typeof 비교
console.log(typeof undefined); // 출력: "undefined" (고유한 타입)
console.log(typeof null);      // 출력: "object" (역사적인 버그로 인한 것, 사실은 원시 타입)

// 4. 동등 연산자 (==) vs. 일치 연산자 (===)
console.log(undefined == null);  // 출력: true (값이 동일하다고 판단 - 타입 변환 발생)
console.log(undefined === null); // 출력: false (값과 타입 모두 다름)

`typeof null`이 `”object”`를 반환하는 것은 자바스크립트 초기 구현의 역사적인 버그이며, 수정하기에는 이미 너무 많은 코드가 이 동작에 의존하고 있어 그대로 유지되고 있습니다. 이 때문에 ‘undefined’와 ‘null’을 비교할 때는 항상 엄격한 일치 연산자(`===`)를 사용하는 것이 좋습니다.

3. Undefined가 발생하는 일반적인 시나리오

‘undefined’는 개발 과정에서 다양한 상황에서 마주할 수 있습니다. 각 시나리오를 이해하면, 왜 ‘undefined’가 발생하는지 명확히 파악하고 적절히 대응할 수 있습니다.

3.1. 변수를 선언만 하고 값을 할당하지 않았을 때

`let`이나 `var` 키워드로 변수를 선언했지만, 초기에 어떤 값도 할당하지 않으면 해당 변수에는 자동으로 `undefined`가 할당됩니다. `const`는 선언과 동시에 반드시 초기화해야 하므로 이 경우에는 해당되지 않습니다.

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

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

3.2. 객체에 존재하지 않는 속성(Property)에 접근할 때

객체에서 정의되지 않은 속성에 접근하려고 하면, 해당 속성의 값으로 `undefined`가 반환됩니다.

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

console.log(user.name);    // 출력: "Jane Doe"
console.log(user.email);   // 출력: undefined (user 객체에 email 속성이 없음)

3.3. 함수 호출 시 인자(Argument)를 전달하지 않았을 때

함수가 매개변수를 정의하고 있지만, 함수 호출 시 해당 매개변수에 대한 인자가 전달되지 않으면, 해당 매개변수에는 `undefined`가 할당됩니다.

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

greet("Alice"); // 출력: "Hello, Alice!"
greet();        // 출력: "Hello, undefined!" (name 매개변수에 인자 없음)

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

함수가 `return` 문을 포함하지 않거나, `return` 문에 명시적인 값이 지정되지 않은 경우(예: `return;`), 함수는 기본적으로 `undefined`를 반환합니다.

function doSomething() {
    // 아무것도 반환하지 않음
}

function doAnotherThing() {
    return; // 명시적으로 undefined 반환
}

console.log(doSomething());    // 출력: undefined
console.log(doAnotherThing()); // 출력: undefined

3.5. `void` 연산자를 사용할 때

`void` 연산자는 주어진 표현식을 평가하고, 항상 `undefined`를 반환합니다. 이는 주로 웹 브라우저에서 `javascript:void(0)`와 같이 링크 클릭 시 아무 동작도 하지 않게 할 때 사용됩니다.

console.log(void(0));      // 출력: undefined
console.log(void("hello")); // 출력: undefined

3.6. 배열의 비어있는(Sparse) 요소에 접근할 때

배열을 생성할 때 특정 인덱스에 값을 할당하지 않거나, 배열 길이를 명시했지만 모든 요소를 채우지 않은 ‘희소 배열(Sparse Array)’의 경우, 비어있는 인덱스에 접근하면 `undefined`가 반환됩니다.

const sparseArray = [1, , 3]; // 인덱스 1이 비어있음
console.log(sparseArray[0]); // 출력: 1
console.log(sparseArray[1]); // 출력: undefined
console.log(sparseArray[2]); // 출력: 3

const anotherSparseArray = new Array(5); // 길이가 5인 배열 생성, 모든 요소는 undefined
console.log(anotherSparseArray[0]); // 출력: undefined

4. Undefined가 중요한 이유와 문제점

‘undefined’는 자바스크립트의 정상적인 부분이지만, 잘못 처리하면 심각한 런타임 오류로 이어질 수 있습니다. ‘undefined’를 이해하는 것은 다음과 같은 이유로 중요합니다.

• 흔한 오류의 원인: 가장 흔한 자바스크립트 런타임 오류 중 하나가 “`TypeError: Cannot read properties of undefined (reading ‘someProperty’)`” 입니다. 이는 ‘undefined’ 값을 가진 변수나 표현식에서 특정 속성이나 메서드를 호출하려고 할 때 발생합니다.
  

  const data = undefined;
  // console.log(data.value); // TypeError: Cannot read properties of undefined (reading 'value')

• 조건부 로직의 정확성: 어떤 값이 ‘undefined’인지 아닌지를 정확하게 판별하는 것은 조건부 로직을 작성할 때 필수적입니다.
• 디버깅의 난이도: ‘undefined’가 발생하는 지점을 정확히 찾아내고, 왜 해당 값이 ‘undefined’가 되었는지 역추적하는 것은 디버깅의 중요한 부분입니다.
• API 및 데이터 처리: 외부 API에서 데이터를 받아오거나, 사용자 입력을 처리할 때 예상치 못한 ‘undefined’ 값이 들어올 수 있습니다. 이에 대한 방어적인 코드 작성이 필요합니다.

5. Undefined를 안전하게 처리하는 방법 (방어적 프로그래밍)

‘undefined’로 인한 오류를 방지하고 더 견고한 코드를 작성하기 위한 여러 가지 방법들이 있습니다.

5.1. 엄격한 일치 연산자 (===) 사용

‘undefined’인지 여부를 확인할 때는 동등 연산자(`==`) 대신 항상 엄격한 일치 연산자(`===`)를 사용하는 것이 좋습니다. `==`는 타입 강제 변환을 일으켜 예상치 못한 결과를 초래할 수 있기 때문입니다 (예: `null == undefined`는 `true`).

let value; // value는 undefined
if (value === undefined) {
    console.log("Value is truly undefined.");
}

// bad practice: if (value == undefined) // null도 true로 처리됨

5.2. 기본 매개변수 (Default Parameters, ES6+)

함수 매개변수가 `undefined`일 경우를 대비하여 기본값을 지정할 수 있습니다.

function greetUser(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greetUser("Bob"); // 출력: "Hello, Bob!"
greetUser();      // 출력: "Hello, Guest!"

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

변수나 속성이 `undefined`일 때 대체 값을 제공하는 흔한 방법입니다. (단, `0`, `””`, `false`, `null` 등 falsy 값도 기본값으로 대체될 수 있음에 유의)

const userName = someApiResponse.user || "Unknown User";
console.log(userName);

// 예시: someApiResponse.user가 undefined일 경우 "Unknown User" 할당
//      someApiResponse.user가 0이나 "" (빈 문자열)일 경우에도 "Unknown User" 할당될 수 있음

5.4. 옵셔널 체이닝 (Optional Chaining, ES2020+)

객체의 중첩된 속성에 접근할 때, 중간 경로에 `null` 또는 `undefined`가 있을 경우 오류를 발생시키지 않고 `undefined`를 반환합니다.

const userProfile = {
    name: "Alice",
    address: {
        city: "New York"
    }
};

console.log(userProfile.address?.city);    // 출력: "New York"
console.log(userProfile.contact?.email);   // 출력: undefined (contact 속성이 없음)
// console.log(userProfile.contact.email); // 오류 발생!

5.5. 널 병합 연산자 (Nullish Coalescing Operator, ??, ES2020+)

`||` 연산자와 유사하지만, `null` 또는 `undefined`일 때만 기본값을 적용하고, `0`, `””`, `false`와 같은 falsy 값은 그대로 유지합니다.

const configValue = settings.value ?? "default";
console.log(configValue);

// 예시: settings.value가 undefined 또는 null일 때만 "default" 할당
//      settings.value가 0이나 "" (빈 문자열), false일 경우 해당 값 그대로 유지

5.6. 조건문 활용

가장 기본적인 방법으로, 값이 유효한지 확인 후 로직을 실행합니다.

function processData(data) {
    if (data !== undefined && data !== null) { // 또는 if (data)로 falsy 값도 함께 처리
        // data가 존재하는 경우의 로직
        console.log("Data exists:", data);
    } else {
        console.log("Data is undefined or null.");
    }
}

processData(100);
processData(undefined);
processData(null);

결론

‘undefined’는 자바스크립트 개발에서 피할 수 없는 핵심 개념입니다. 이는 오류가 아닌 ‘값이 할당되지 않았거나 존재하지 않는’ 상태를 나타내는 유효한 원시 값입니다. ‘null’과의 미묘한 차이를 이해하고, ‘undefined’가 발생하는 다양한 시나리오를 파악하는 것은 안정적이고 예측 가능한 코드를 작성하는 첫걸음입니다.

더 나아가, 옵셔널 체이닝, 널 병합 연산자, 기본 매개변수와 같은 최신 자바스크립트 문법과 엄격한 동등 비교를 사용하여 ‘undefined’를 효과적으로 처리하는 방어적인 코딩 습관을 들이는 것이 중요합니다. ‘undefined’의 발생을 예측하고 적절하게 대응함으로써, 우리는 디버깅 시간을 줄이고 사용자에게 더 나은 경험을 제공하는 견고한 애플리케이션을 구축할 수 있습니다. ‘undefined’는 단순히 ‘정의되지 않음’을 넘어, 자바스크립트의 유연성과 잠재적 위험을 동시에 보여주는 중요한 지표임을 기억해야 합니다.

“`
안녕하세요! 프로그래밍에서 매우 중요하지만 때로는 혼란을 야기하기도 하는 개념인 `undefined`에 대해 깊이 있게 다루는 본문 부분을 HTML 형식으로 작성해 드리겠습니다.

—

“`html

Undefined: 프로그래밍의 미지의 상태를 파헤치다

프로그래밍을 하다 보면 때때로 예상치 못한 값과 마주하게 됩니다. 그중에서도 특히 자바스크립트(JavaScript)와 같은 동적 타입 언어에서 자주 등장하며 개발자를 혼란스럽게 하는 개념이 바로 undefined입니다. undefined는 단순히 ‘값이 없다’는 의미를 넘어, 변수, 함수, 객체의 상태를 나타내는 중요한 원시 데이터 타입 중 하나입니다. 이 글에서는 undefined가 무엇인지, 언제 발생하는지, null과는 어떻게 다른지, 그리고 이를 효과적으로 다루고 방지하는 방법에 대해 자세히 살펴보겠습니다.

1. Undefined의 본질

undefined는 자바스크립트의 7가지 원시 데이터 타입(Primitive Data Types) 중 하나입니다. (나머지는 null, boolean, number, string, symbol, bigint입니다.) undefined는 값이 할당되지 않은 상태를 나타냅니다. 즉, 어떤 변수를 선언했지만 아직 값을 부여하지 않았거나, 존재하지 않는 객체 속성에 접근하려 할 때 시스템이 기본적으로 할당하는 특별한 값입니다.

가장 중요한 점은 undefined가 개발자가 의도적으로 ‘값이 없음’을 나타내기 위해 사용하는 null과는 다르다는 것입니다. undefined는 주로 시스템이 특정 상황에 따라 암묵적으로 부여하는 상태 값이라고 이해하는 것이 좋습니다.

let myVariable; // 변수를 선언했지만 값을 할당하지 않음
console.log(myVariable); // 출력: undefined

console.log(typeof myVariable); // 출력: "undefined" (typeof 연산자로 확인 가능)

2. Undefined가 발생하는 주요 상황

undefined는 코드를 작성하면서 다양한 시나리오에서 마주칠 수 있습니다. 주요 발생 상황을 이해하는 것은 버그를 줄이고 견고한 코드를 작성하는 데 매우 중요합니다.

2.1. 값을 할당하지 않은 변수

변수를 선언했지만, 초기 값을 명시적으로 할당하지 않은 경우 해당 변수는 자동으로 undefined로 초기화됩니다. 이는 var, let, const 키워드 모두에 해당됩니다. (단, const는 선언과 동시에 값을 할당해야 하므로, 사실상 undefined 상태로 둘 수 없습니다.)

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

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

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

객체에서 존재하지 않는 속성에 접근하려고 시도할 때, 자바스크립트는 에러를 발생시키지 않고 해당 속성의 값으로 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님!"

ES6부터는 매개변수에 기본값을 설정하여 undefined를 방지할 수 있습니다.

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

2.4. 반환 값이 없는 함수

함수가 명시적으로 return 문을 사용하여 값을 반환하지 않거나, return 문만 있고 반환할 값이 명시되지 않은 경우, 함수는 undefined를 반환합니다.

function doSomething() {
    console.log("무언가를 합니다.");
    // 명시적인 return 문이 없음
}

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

function doNothing() {
    return; // 반환할 값이 명시되지 않음
}

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

2.5. 배열의 존재하지 않는 인덱스 접근

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

const fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]); // "사과"
console.log(fruits[2]); // "오렌지"
console.log(fruits[3]); // undefined (인덱스 3에는 요소가 없음)

2.6. void 연산자

void 연산자는 표현식을 평가하고 항상 undefined를 반환합니다. 주로 JavaScript URI에서 링크를 클릭해도 페이지를 이동하지 않도록 할 때 사용되기도 합니다.

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

3. Undefined와 Null의 차이점 및 공통점

undefined와 null은 모두 ‘값이 없음’을 나타내지만, 그 의미와 발생 원인에 중요한 차이가 있습니다. 많은 개발자들이 이 둘을 혼동하는 경우가 많으므로 정확히 구분하는 것이 중요합니다.

3.1. 의미론적 차이

• undefined: “값이 할당되지 않았다.” 시스템이 암묵적으로 부여하는 값으로, 변수가 선언되었으나 아직 어떤 값으로도 초기화되지 않았거나, 존재하지 않는 것에 접근할 때 나타납니다. 즉, ‘알 수 없는’ 또는 ‘정의되지 않은’ 상태를 의미합니다.
• null: “의도적으로 비어있는 값이다.” 개발자가 명시적으로 ‘값이 없음’을 할당할 때 사용됩니다. 객체나 변수에 더 이상 유효한 값이 없음을 나타내기 위해 개발자가 직접 설정하는 값입니다. 즉, ‘비어 있음’ 또는 ‘존재하지 않음’을 명확히 선언할 때 사용합니다.

3.2. 기술적 차이 (typeof 연산자와 비교)

typeof 연산자를 사용했을 때 이 둘의 결과는 다릅니다.

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (이것은 자바스크립트의 오랜 버그로, null이 객체가 아님에도 불구하고 'object'를 반환합니다.)

3.3. 동등 비교 (== vs ===)

undefined와 null은 동등 연산자(==)로 비교하면 true를 반환하지만, 일치 연산자(===)로 비교하면 false를 반환합니다. 이는 ==가 값만 비교하고 타입을 강제로 변환하기 때문이며, ===는 값과 타입 모두를 엄격하게 비교하기 때문입니다.

console.log(undefined == null);  // true (타입은 다르지만, 값이 없다는 의미에서 동등하다고 판단)
console.log(undefined === null); // false (타입이 다름)

3.4. 비교 테이블

4. Undefined 처리 및 방지 전략

undefined는 예상치 못한 동작이나 오류의 원인이 될 수 있으므로, 코딩 시 적절하게 처리하거나 발생을 방지하는 것이 중요합니다.

4.1. 변수 명시적 초기화

변수를 선언할 때 가능한 한 초기 값을 명시적으로 할당하는 습관을 들이세요. 특히 객체나 배열 같은 복합 타입의 변수는 빈 객체({})나 빈 배열([])로 초기화하는 것이 좋습니다.

let myString = "";
let myNumber = 0;
let myObject = {};
let myArray = [];

4.2. 조건문(if)을 이용한 값 확인

변수나 속성에 접근하기 전에 해당 값이 undefined인지 확인하는 조건문을 사용하는 것이 가장 기본적인 방어 방법입니다.

• 엄격한 비교 (===): 가장 권장되는 방법입니다.

if (myVariable !== undefined) {
    // myVariable이 undefined가 아닐 때만 실행
    console.log(myVariable.length);
}

typeof 연산자 사용: 타입까지 명확하게 확인하고 싶을 때 유용합니다.

if (typeof myVariable === 'undefined') {
    console.log("myVariable은 정의되지 않았습니다.");
} else {
    console.log("myVariable은 정의되었습니다:", myVariable);
}

느슨한 비교 (==): null과 undefined를 함께 확인하고 싶을 때 사용할 수 있지만, 의도치 않은 타입 변환이 발생할 수 있어 일반적으로 엄격한 비교가 선호됩니다.

if (myVariable == null) { // myVariable이 undefined 또는 null일 때 true
    console.log("myVariable은 null 또는 undefined입니다.");
}

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

변수나 표현식이 “falsy” 값(false, 0, "", null, undefined, NaN)일 경우 기본값을 할당하는 간단한 방법입니다.

const userName = inputName || "익명"; // inputName이 undefined, null, "", 0 등일 경우 "익명" 할당
console.log(userName);

이 방법은 0이나 ""(빈 문자열)과 같은 유효한 값이 false로 간주되어 기본값이 할당될 수 있으므로 주의해야 합니다.

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

ES2020에 도입된 기능으로, 객체의 중첩된 속성에 접근할 때 해당 속성이 null 또는 undefined인 경우 에러를 발생시키지 않고 undefined를 반환합니다. 이는 객체 속성 접근 시 undefined를 안전하게 처리하는 강력한 방법입니다.

const user = {
    name: "홍길동",
    address: {
        city: "서울"
    }
};

console.log(user.address?.city);    // "서울"
console.log(user.phone?.number);    // undefined (user.phone이 undefined이므로)

// 함수 호출에도 적용 가능
user.greet?.(); // user.greet이 undefined이면 호출되지 않음

4.5. 널 병합 연산자 (Nullish Coalescing Operator – ??)

ES2020에 도입된 또 다른 유용한 연산자로, 좌항의 값이 null 또는 undefined일 경우에만 우항의 값을 반환합니다. 이는 || 연산자와 달리 0이나 "" 같은 “falsy” 값을 유효한 값으로 취급하여 기본값을 설정할 때 유용합니다.

const settingValue = 0;
const defaultValue = 100;

const finalValue = settingValue ?? defaultValue; // settingValue가 null 또는 undefined가 아니므로 0
console.log(finalValue); // 0

const anotherSetting = undefined;
const anotherFinal = anotherSetting ?? defaultValue; // anotherSetting이 undefined이므로 100
console.log(anotherFinal); // 100

4.6. 함수 매개변수 기본값

함수 정의 시 매개변수에 기본값을 설정하여, 인자가 전달되지 않아 undefined가 되는 것을 방지할 수 있습니다.

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

sayHello();               // "안녕하세요, 손님!"
sayHello("김민준");       // "안녕하세요, 김민준!"
sayHello("이수민", "반갑습니다"); // "반갑습니다, 이수민!"

5. 디버깅 시 Undefined 활용

undefined는 단순히 에러의 원인이 아니라, 코드의 특정 지점에서 변수나 값이 예상대로 초기화되거나 전달되지 않았다는 중요한 신호로 작용할 수 있습니다. 디버깅 시 undefined를 만나면 다음을 확인해 보세요.

• 변수 선언과 초기화가 제대로 이루어졌는지?
• 객체의 속성 이름이 올바른지?
• 함수 호출 시 필요한 모든 인자가 제대로 전달되었는지?
• 함수가 의도한 값을 반환하고 있는지? (return 문 확인)
• 비동기 코드에서 데이터가 로드되기 전에 접근하고 있지는 않은지? (비동기 처리 완료 후 접근하도록 로직 수정 필요)

console.log()와 브라우저 개발자 도구의 디버거를 적극 활용하여 undefined가 발생하는 정확한 지점과 원인을 파악하는 것이 중요합니다.

결론

undefined는 자바스크립트에서 ‘값이 할당되지 않은 상태’를 나타내는 기본적인 원시 데이터 타입입니다. 이는 개발자의 실수로 인해 발생하기도 하지만, 때로는 시스템이 의도적으로 나타내는 상태 정보이기도 합니다. null과의 명확한 차이를 이해하고, undefined가 발생하는 다양한 시나리오를 숙지하는 것은 견고하고 오류 없는 코드를 작성하는 데 필수적입니다.

명시적인 변수 초기화, 조건문을 통한 값 검증, 그리고 선택적 체이닝(?.)이나 널 병합 연산자(??)와 같은 최신 문법 활용은 undefined로 인한 잠재적 문제를 예방하고 더욱 안전하며 읽기 쉬운 코드를 만드는 데 큰 도움이 됩니다. undefined를 두려워하지 않고, 그 의미를 정확히 파악하여 디버깅과 코드 개선의 기회로 삼는 것이야말로 숙련된 개발자의 길입니다.

“`

`undefined`에 대한 결론: 코드의 불확실성을 이해하고 제어하기

코드의 세계에서 `undefined`는 단순한 키워드를 넘어, 시스템이 특정 값이나 상태를 아직 알지 못하거나 정의되지 않았음을 나타내는 근본적인 신호입니다. 이는 오류를 의미하는 것이 아니라, 프로그래밍 언어, 특히 JavaScript와 같은 동적 타입 언어에서 데이터의 부재 또는 미초기화 상태를 표현하는 필수적인 ‘원시 값(primitive value)’이자 ‘타입’입니다. 이 글에서는 `undefined`의 본질을 깊이 있게 탐구하고, 왜 이 개념을 정확히 이해하고 다루는 것이 견고하고 예측 가능한 코드를 작성하는 데 핵심적인지 결론지어 설명하고자 합니다.

우선, `undefined`의 존재는 코드 실행 시점에 일어날 수 있는 다양한 불확실성을 명시적으로 표현하기 위함입니다. 변수가 선언되었지만 값이 할당되지 않았을 때, 객체의 존재하지 않는 속성에 접근하려 할 때, 함수가 명시적으로 값을 반환하지 않을 때, 또는 함수 호출 시 인수가 전달되지 않았을 때 등, `undefined`는 “아직 무엇인가가 결정되지 않았거나 존재하지 않습니다”라는 메시지를 전달합니다. 이는 개발자가 예상치 못한 동작을 미리 인지하고, 이에 대한 적절한 처리 로직을 구현할 수 있도록 돕는 중요한 이정표 역할을 합니다.

// 1. 변수가 선언되었지만 값이 할당되지 않았을 때
let myVariable;
console.log(myVariable); // 출력: undefined

// 2. 객체에 존재하지 않는 속성에 접근하려 할 때
const myObject = { name: "Alice" };
console.log(myObject.age); // 출력: undefined

// 3. 함수가 명시적으로 값을 반환하지 않을 때
function doNothing() {
    // 아무것도 반환하지 않음
}
console.log(doNothing()); // 출력: undefined

// 4. 함수 호출 시 인수가 전달되지 않았을 때
function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet(); // 출력: Hello, undefined!

`undefined`와 `null`의 결정적인 차이점

`undefined`를 이해하는 데 있어 가장 중요한 부분 중 하나는 종종 혼동되는 `null`과의 차이를 명확히 아는 것입니다. `undefined`는 시스템에 의해 “값이 할당되지 않았거나 존재하지 않음”을 의미하는 반면, `null`은 개발자가 “의도적으로 값이 비어있음”을 할당한 상태를 나타냅니다. 비유하자면, `undefined`는 ‘텅 빈 상자가 어디에도 없다’는 의미이고, `null`은 ‘상자가 있지만 그 안이 비어있음’을 의미합니다. 이러한 의도성의 차이는 코드의 가독성과 유지보수성에 큰 영향을 미치며, 어떤 상황에서 어떤 값을 사용해야 할지 결정하는 기준이 됩니다.

let unassignedVar; // undefined: 시스템이 값을 모름
let emptyVar = null; // null: 개발자가 명시적으로 값이 없다고 지정함

console.log(typeof unassignedVar); // 출력: undefined
console.log(typeof emptyVar);    // 출력: object (JavaScript의 역사적 버그)

console.log(unassignedVar == emptyVar);  // 출력: true (느슨한 동등 비교)
console.log(unassignedVar === emptyVar); // 출력: false (엄격한 동등 비교)

`undefined`의 중요성 및 활용

그렇다면 `undefined`는 단순히 값이 없음을 나타내는 것 이상의 어떤 의미를 가질까요? 이 값은 개발자가 코드를 더욱 견고하고 예측 가능하게 만드는 데 필수적인 도구로 활용될 수 있습니다.

1. 오류 방지 및 디버깅: `undefined`는 런타임 오류로 이어질 수 있는 ‘참조 오류(ReferenceError)’나 ‘타입 오류(TypeError)’를 방지하는 중요한 경고 신호입니다. 예를 들어, 존재하지 않는 객체 속성에 접근하려 할 때 `undefined`가 반환되므로, 개발자는 미리 `if` 조건문 등으로 이를 확인하여 추가적인 동작을 제어할 수 있습니다. 이는 디버깅 과정을 훨씬 효율적으로 만듭니다.
2. 조건부 로직의 핵심: JavaScript에서 `undefined`는 ‘거짓 같은(falsy)’ 값으로 평가됩니다. 즉, `if (myVariable)`과 같은 조건문에서 `myVariable`이 `undefined`일 경우 조건은 `false`로 평가됩니다. 이를 활용하여 값의 존재 여부에 따라 다른 로직을 실행할 수 있습니다. (단, `0`, `””`, `null`, `false` 등 다른 falsy 값도 함께 걸러지므로 주의해야 합니다.)
3. API 설계의 명확성: 특정 함수나 API가 결과를 반환하지 않거나, 특정 조건에서 유효한 데이터를 제공할 수 없을 때 명시적으로 `undefined`를 반환하도록 설계할 수 있습니다. 이는 API를 사용하는 개발자에게 “이 경우에는 값이 제공되지 않는다”는 명확한 계약을 제시하는 것입니다.

`undefined`를 다루는 실용적인 전략

현대 JavaScript에서는 `undefined`를 효과적으로 다루기 위한 다양한 문법적 설탕(syntactic sugar)과 기능이 제공됩니다. 이를 활용하여 코드를 더 간결하고 안전하게 만들 수 있습니다.

• `typeof` 연산자를 이용한 타입 체크: 가장 안전하고 권장되는 방법입니다. 변수가 `undefined`인지 명확하게 확인합니다.
  

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

• 엄격한 동등 비교 (`=== undefined`): `typeof`와 유사하게, 변수의 값이 정확히 `undefined`인지를 확인합니다. `null`과 같은 다른 falsy 값과 혼동할 염려가 없습니다.
  

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

• 널 병합 연산자 (`??`): ES2020에 도입된 이 연산자는 값이 `null` 또는 `undefined`일 경우에만 기본값을 제공합니다. `||` 연산자와 달리 `0`이나 `”` 같은 다른 falsy 값은 걸러내지 않습니다.
  

  const userName = undefined;
  const displayName = userName ?? "손님"; // 출력: "손님"
  
  const userAge = 0;
  const actualAge = userAge ?? 10; // 출력: 0 (0은 null 또는 undefined가 아니므로)
  

• 선택적 체이닝 (`?.`): ES2020에 도입된 이 연산자는 객체 속성에 접근할 때, 해당 속성이 `null` 또는 `undefined`이면 오류를 발생시키지 않고 `undefined`를 반환합니다. 복잡한 중첩 객체에 접근할 때 매우 유용합니다.
  

  const user = {
      profile: {
          address: {
              city: "Seoul"
          }
      }
  };
  
  console.log(user.profile?.address?.city);  // 출력: "Seoul"
  console.log(user.profile?.contact?.email); // 출력: undefined (오류 발생 안 함)
  

• 함수 매개변수의 기본값: ES6부터 함수 매개변수에 기본값을 설정할 수 있어, 해당 인수가 전달되지 않아 `undefined`가 되는 경우를 방지할 수 있습니다.
  

  function greeting(name = "Unknown") {
      console.log(`Hello, ${name}!`);
  }
  greeting();        // 출력: Hello, Unknown!
  greeting("Alice"); // 출력: Hello, Alice!
  

결론: `undefined`는 친구이다

결론적으로, `undefined`는 프로그래밍 언어, 특히 JavaScript에서 피할 수 없는, 그러나 동시에 매우 유용한 개념입니다. 이는 오류의 징후가 아니라, 코드 내에서 발생할 수 있는 ‘값의 부재’ 또는 ‘미초기화 상태’를 명시적으로 나타내는 언어의 기본적인 특성입니다. 개발자는 `undefined`의 의미와 발생 시나리오를 정확히 이해하고, `typeof`, `=== undefined`, `??`, `?.`, 기본 매개변수 등과 같은 적절한 도구들을 사용하여 이를 효과적으로 관리해야 합니다.

`undefined`를 단순한 오류나 골칫거리로 여기기보다는, 코드의 안정성과 예측 가능성을 높이는 데 기여하는 중요한 정보이자 기회로 받아들여야 합니다. 이를 통해 우리는 더 견고하고, 유지보수하기 쉬우며, 사용자에게 예측 가능한 경험을 제공하는 코드를 작성할 수 있을 것입니다. `undefined`를 능숙하게 다루는 것은 단순히 문법을 아는 것을 넘어, 코드가 작동하는 방식에 대한 깊은 이해를 반영하는 개발자의 중요한 역량입니다.