“`html

Undefined: 프로그래밍의 미지의 영역을 탐험하다

프로그래밍의 세계는 논리와 예측 가능성의 연속처럼 보이지만, 때로는 우리의 예상을 벗어나는 미지의 영역과 마주하게 됩니다.
그중에서도 ‘Undefined’는 개발자들이 가장 흔하게 만나면서도, 그 본질과 의미를 깊이 이해하지 못해 혼란을 겪는 개념 중 하나입니다.
마치 빈 공간에 무언가를 놓아두려 했지만, 그 공간 자체가 아직 정의되지 않았거나 비어있는 상태를 상징하는 것처럼, ‘Undefined’는 데이터가 있어야 할 곳에 아직 아무것도 없다는 명확한 메시지를 전달합니다.
이는 단순한 에러 메시지가 아니라, 프로그램의 현재 상태를 알려주는 중요한 신호등 역할을 합니다.

이 글에서는 ‘Undefined’가 무엇인지, 왜 중요한지, 그리고 어떤 상황에서 발생하는지, 나아가 어떻게 이 개념을 효과적으로 다루고 활용할 수 있는지에 대해 심도 있게 탐구할 것입니다.
특히 웹 개발의 핵심 언어인 JavaScript를 중심으로 설명하지만, ‘Undefined’라는 개념은 JavaScript에 국한되지 않고 다양한 프로그래밍 언어의 근간을 이루는 보편적인 사상에 뿌리를 두고 있음을 기억해야 합니다.
우리는 ‘Undefined’가 단순히 ‘오류’가 아니라, 코드를 더욱 견고하고 예측 가능하게 만드는 데 필수적인 요소임을 이해하게 될 것입니다.
지금부터 ‘Undefined’의 신비로운 세계로 함께 떠나봅시다.

Undefined란 무엇인가?

가장 기본적인 정의부터 시작해 봅시다. Undefined는 프로그래밍 언어, 특히 JavaScript에서 특정 변수에 값이 할당되지 않았거나 존재하지 않는 속성에 접근했을 때의 상태를 나타내는 원시(primitive) 값입니다.
이는 ‘아무런 값도 지정되지 않았다’는 의미를 내포하며, 개발자가 의도적으로 값을 부여한 것이 아니라 시스템에 의해 자연스럽게 발생하는 경우가 많습니다.
예를 들어, 변수를 선언했지만 초기화하지 않은 경우, 해당 변수는 ‘Undefined’ 값을 가지게 됩니다.

Undefined와 Null의 중요한 차이

‘Undefined’를 이해할 때 가장 흔히 비교되는 개념은 바로 ‘Null’입니다.
두 가지 모두 “값이 없음”을 나타내지만, 그 의미와 발생 맥락에는 분명한 차이가 있습니다.

• Undefined: 값이 할당되지 않은 상태 또는 존재하지 않는 상태를 나타냅니다.
  대부분 시스템에 의해 자동으로 부여되는 값입니다.
  “나는 존재하지만, 아직 아무런 의미 있는 값을 가지지 않았다”는 뉘앙스에 가깝습니다.
• Null: 값이 의도적으로 비어있음을 나타냅니다.
  이는 개발자가 명시적으로 ‘아무런 값도 없다’고 선언한 상태입니다.
  “나는 존재하며, 의도적으로 비어있는 값을 가졌다”는 뉘앙스를 가집니다.

typeof 연산자를 통한 비교:

let uninitializedVariable; // 선언했지만 초기화하지 않음
let nullVariable = null;   // null 값을 명시적으로 할당

console.log(uninitializedVariable); // 출력: undefined
console.log(nullVariable);          // 출력: null

console.log(typeof uninitializedVariable); // 출력: "undefined"
console.log(typeof nullVariable);          // 출력: "object" (JavaScript의 역사적인 버그로, null은 원래 원시값이지만 typeof는 "object"를 반환합니다.)

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

위 예시에서 볼 수 있듯이, typeof 연산자를 통해 undefined는 "undefined"를 반환하고, null은 "object"를 반환하여 그 차이를 명확히 합니다.
또한, 느슨한 동등 연산자(==)는 undefined와 null을 같은 것으로 간주하지만, 엄격한 동등 연산자(===)는 이 둘을 다르게 취급합니다.
대부분의 경우 엄격한 동등 연산자(===)를 사용하여 undefined와 null을 명확하게 구분하는 것이 권장됩니다.

Undefined가 발생하는 주요 상황들

‘Undefined’는 다양한 상황에서 우리 앞에 나타납니다. 이러한 상황들을 이해하는 것은 디버깅 능력을 향상시키고, 더 견고한 코드를 작성하는 데 필수적입니다.
아래에서는 ‘Undefined’가 발생하는 대표적인 경우들을 구체적인 예시와 함께 살펴보겠습니다.

1. 변수를 선언했지만 초기화하지 않았을 때

가장 일반적인 경우입니다. let이나 var 키워드로 변수를 선언했지만, 아무런 값도 할당하지 않으면 해당 변수는 자동으로 undefined 값을 가집니다.
const 키워드는 선언과 동시에 초기화를 강제하므로 이 경우에는 undefined가 발생하지 않습니다.

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

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

// const initialValue; // SyntaxError: Missing initializer in const declaration
    

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

객체(Object)의 특정 속성(property)에 접근하려 할 때, 해당 속성이 객체 내에 존재하지 않으면 undefined가 반환됩니다.

const user = {
    name: '김개발',
    age: 30
};

console.log(user.name);    // 출력: 김개발
console.log(user.email);   // 출력: undefined (user 객체에 email 속성이 없음)
console.log(user.address.city); // TypeError: Cannot read properties of undefined (address 자체가 없으므로 그 하위 속성 접근 시 에러 발생)
    

마지막 예시처럼, 존재하지 않는 속성의 하위 속성에 접근하려 하면 TypeError가 발생할 수 있으므로 주의해야 합니다. 이는 undefined의 위험성을 보여주는 중요한 사례입니다.

3. 함수가 값을 반환하지 않거나 명시적으로 return; 했을 때

함수는 기본적으로 어떤 값을 반환합니다. 만약 함수 내부에 return 문이 없거나, return; (아무 값 없이)만 있다면, 해당 함수는 undefined를 반환합니다.

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

const result1 = doSomething();
console.log(result1); // 출력: undefined

function doAnotherThing() {
    console.log("다른 작업 수행...");
    return; // 명시적으로 아무 값도 반환하지 않음
}

const result2 = doAnotherThing();
console.log(result2); // 출력: undefined
    

4. 함수의 인자가 전달되지 않았을 때

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

function greet(name, age) {
    console.log(`이름: ${name}, 나이: ${age}`);
}

greet('박코더'); // 두 번째 인자인 age가 전달되지 않음
// 출력: 이름: 박코더, 나이: undefined

function calculateSum(a, b, c) {
    console.log(`a: ${a}, b: ${b}, c: ${c}`);
    return a + b + c; // c가 undefined이므로 NaN(Not a Number) 반환 가능성
}

console.log(calculateSum(10, 20)); // c는 undefined
// 출력: a: 10, b: 20, c: undefined
// 출력: NaN
    

5. 배열에 존재하지 않는 인덱스에 접근할 때

배열(Array)의 범위를 벗어나는 인덱스에 접근하려 할 때도 undefined가 반환됩니다.

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 출력: apple
console.log(fruits[2]); // 출력: orange
console.log(fruits[3]); // 출력: undefined (인덱스 3은 존재하지 않음)
    

6. void 연산자를 사용할 때

JavaScript의 void 연산자는 어떤 표현식이든 평가한 후 undefined를 반환합니다. 이 연산자는 주로 javascript: URL 스킴에서 링크 클릭 시 페이지 이동을 방지하는 용도로 사용되곤 합니다.

console.log(void 0);        // 출력: undefined
console.log(void(1 + 2));   // 출력: undefined (1 + 2는 3이지만, void 연산자에 의해 undefined 반환)

// HTML에서의 예시 (보통 잘 쓰이지는 않음)
// 클릭해도 아무 일도 일어나지 않음
    

Undefined의 중요성 및 발생 시 문제점

‘Undefined’가 발생하는 상황을 이해하는 것만큼 중요한 것은, 왜 이 개념을 중요하게 다루고 발생 시 어떤 문제점이 생길 수 있는지를 아는 것입니다.

• 예측 불가능한 동작 및 버그:
  undefined 값을 가진 변수나 속성을 가지고 어떤 연산을 수행하려 할 때, 대부분의 경우 예상치 못한 결과나 에러가 발생합니다.
  예를 들어, undefined.length나 undefined()와 같이 undefined 값에 대해 메서드를 호출하려 하면 TypeError가 발생하여 프로그램이 멈출 수 있습니다.
• 디버깅의 어려움:
  undefined 에러는 종종 코드의 깊은 곳에서 발생하여 원인을 추적하기 어렵게 만듭니다. 특히 복잡한 데이터 구조나 비동기 코드에서 undefined가 전달되면 디버깅 시간이 길어질 수 있습니다.
• 데이터 무결성 손상:
  데이터베이스나 API로부터 받은 데이터가 예상과 다르게 undefined 값을 포함하고 있다면, 이는 애플리케이션의 데이터 무결성을 해치고 잘못된 정보를 사용자에게 보여줄 수 있습니다.
• 보안 취약점:
  간혹 undefined가 예상치 못한 방식으로 처리될 경우, 보안 취약점으로 이어질 가능성도 배제할 수 없습니다. 이는 드물지만, 중요한 고려 사항입니다.

Undefined를 효과적으로 다루는 방법

‘Undefined’는 피할 수 없는 프로그래밍의 현실입니다. 하지만 이를 올바르게 인지하고 적절하게 다룸으로써 코드를 더욱 안정적이고 예측 가능하게 만들 수 있습니다.

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

undefined 여부를 확인할 때 가장 정확하고 권장되는 방법은 === undefined를 사용하는 것입니다. 이는 null과 undefined를 명확하게 구분하여 잠재적인 버그를 방지합니다.

let value; // undefined

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

if (value == null) { // true, null과 undefined 모두 true로 평가
    console.log("value는 null 또는 undefined입니다.");
}
    

2. typeof 연산자 사용

변수가 선언조차 되지 않았을 가능성이 있는 경우 (예: 전역 스코프에서 특정 변수의 존재 여부를 확인할 때)에는 typeof 연산자를 사용하는 것이 안전합니다.
선언되지 않은 변수에 직접 접근하면 ReferenceError가 발생하지만, typeof는 에러를 발생시키지 않고 "undefined" 문자열을 반환합니다.

// console.log(nonExistentVariable); // ReferenceError: nonExistentVariable is not defined

if (typeof nonExistentVariable === 'undefined') {
    console.log("nonExistentVariable은 선언되지 않았거나 undefined입니다.");
}
    

3. 기본값 할당 (|| 연산자 또는 Nullish Coalescing Operator ??)

undefined 값이 예상되는 경우, 논리 OR 연산자(||)나 널 병합 연산자(Nullish Coalescing Operator, ??)를 사용하여 기본값을 지정할 수 있습니다.

• || (논리 OR 연산자): 좌항이 falsy (false, 0, '', null, undefined, NaN)이면 우항의 값을 반환합니다.
• ?? (널 병합 연산자, ES2020+): 좌항이 null 또는 undefined일 경우에만 우항의 값을 반환합니다. 0이나 ''와 같은 falsy 값은 유효한 값으로 취급합니다.

function getDisplayName(name) {
    // name이 undefined, null, 빈 문자열, 0 등 falsy 값이면 'Guest'를 기본값으로 사용
    const displayName = name || 'Guest';
    console.log(displayName);
}

getDisplayName("홍길동"); // 출력: 홍길동
getDisplayName(undefined);  // 출력: Guest
getDisplayName("");         // 출력: Guest
getDisplayName(0);          // 출력: Guest (원래 0을 값으로 쓰고 싶어도 'Guest'가 됨)

console.log("--- Nullish Coalescing Operator (??) ---");

function getProductPrice(price) {
    // price가 undefined 또는 null일 경우에만 0을 기본값으로 사용
    const finalPrice = price ?? 0;
    console.log(finalPrice);
}

getProductPrice(100);    // 출력: 100
getProductPrice(undefined); // 출력: 0
getProductPrice(null);      // 출력: 0
getProductPrice(0);         // 출력: 0 (0은 유효한 값으로 취급)
    

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

객체의 속성에 접근할 때, 해당 속성이 null 또는 undefined일 수 있는 경우 ?. 연산자를 사용하면 TypeError를 방지할 수 있습니다.
속성 체인 중 어느 하나라도 null 또는 undefined이면, 전체 표현식은 undefined를 반환합니다.

const user = {
    name: '김개발',
    address: {
        city: '서울',
        zipCode: '12345'
    }
};

const admin = {
    name: '관리자'
};

console.log(user.address.city);          // 출력: 서울
console.log(user.phone?.number);         // 출력: undefined (phone 속성이 없음)
console.log(admin.address?.city);        // 출력: undefined (admin 객체에 address 속성이 없음)

// 존재하지 않는 속성에 접근 시 에러 방지
// console.log(admin.address.city); // TypeError: Cannot read properties of undefined
    

5. 함수 매개변수에 기본값 지정 (ES6+)

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

function greet(name = 'Guest') {
    console.log(`안녕하세요, ${name}님!`);
}

greet("이코더"); // 출력: 안녕하세요, 이코더님!
greet();          // 출력: 안녕하세요, Guest님! (name이 undefined이므로 기본값 적용)
greet(undefined); // 출력: 안녕하세요, Guest님!
    

결론: Undefined를 이해하고 활용하기

‘Undefined’는 프로그래밍, 특히 JavaScript에서 피할 수 없는 존재이자, 코드가 실행되는 방식에 대한 중요한 통찰력을 제공하는 개념입니다.
이는 단순히 ‘값이 없음’을 나타내는 것을 넘어, 값이 할당되지 않은 상태, 존재하지 않는 속성, 또는 의도치 않게 비어있는 함수의 반환 값 등 다양한 맥락에서 나타납니다.
‘Undefined’와 ‘Null’의 차이를 명확히 인지하고, typeof, ===, ||, ??, ?.와 같은 연산자들을 적절히 활용하여 ‘Undefined’를 효과적으로 다루는 것은 개발자의 필수 역량입니다.

‘Undefined’를 두려워하거나 무시하기보다는, 이를 코드의 상태를 알려주는 중요한 신호로 받아들이고 적극적으로 관리함으로써 우리는 더 안정적이고, 예측 가능하며, 유지보수하기 쉬운 애플리케이션을 구축할 수 있습니다.
이해하고 다루는 방법을 익힌다면, ‘Undefined’는 더 이상 미지의 영역이 아니라, 여러분의 코드를 더욱 견고하게 만드는 든든한 조력자가 될 것입니다.
이제 ‘Undefined’가 무엇인지 명확히 이해하고, 여러분의 코드 속에서 이를 현명하게 다루어 보시기 바랍니다.

“`
“`html

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

JavaScript를 사용하다 보면 undefined라는 값을 자주 마주치게 됩니다. 이 값은 단순히 ‘정의되지 않음’이라는 표면적인 의미를 넘어, JavaScript의 동작 방식과 깊이 연관되어 있으며 개발자가 반드시 정확히 이해하고 다룰 줄 알아야 하는 중요한 개념입니다. 본 문서에서는 undefined의 기본 개념부터 발생하는 다양한 상황, null과의 차이점, 그리고 이를 안전하게 다루는 방법에 대해 상세히 살펴보겠습니다.

1. undefined의 기본 개념과 특징

undefined는 JavaScript에서 몇 안 되는 원시 타입(Primitive Type) 중 하나입니다. (다른 원시 타입으로는 string, number, boolean, symbol, bigint, null이 있습니다.) 이 값의 핵심적인 특징은 다음과 같습니다.

• 값이 할당되지 않은 상태: 가장 본질적인 의미입니다. 변수를 선언했지만 초기화하지 않았을 때, JavaScript 엔진은 해당 변수에 undefined를 할당합니다.
• typeof 결과: undefined의 타입을 확인하면 문자열 “undefined”를 반환합니다. 이는 undefined가 독자적인 타입임을 명확히 보여줍니다.

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

• Falsy 값: undefined는 JavaScript의 Falsy 값 중 하나입니다. 이는 불리언 컨텍스트(예: if 문)에서 false로 평가된다는 것을 의미합니다.

  let myVar;
  if (myVar) {
      console.log("myVar는 정의되었습니다.");
  } else {
      console.log("myVar는 undefined 또는 falsy 값입니다."); // 이 코드가 실행됩니다.
  }

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

undefined는 개발자가 의도하지 않았거나, 특정 조건에서 자연스럽게 발생하는 경우가 많습니다. 다음은 undefined를 흔히 마주치는 대표적인 상황들입니다.

2.1. 변수 선언 후 초기화하지 않았을 때

var, let, const 키워드로 변수를 선언했지만, 초기 값을 할당하지 않으면 해당 변수는 undefined로 초기화됩니다. (단, const는 선언과 동시에 초기화해야 합니다.)

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

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

// const pi; // 에러: 'const' declaration must be initialized.

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

객체에 실제로 존재하지 않는 속성(property)에 접근하려고 시도하면 undefined가 반환됩니다. 이는 에러를 발생시키지 않고 해당 속성이 없음을 알려주는 방식입니다.

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

console.log(user.name);    // 출력: Alice
console.log(user.email);   // 출력: undefined (user 객체에 email 속성이 없음)
console.log(user.address?.city); // ?. (옵셔널 체이닝)을 사용하지 않았다면, user.address가 undefined이므로 에러 발생 가능

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

함수를 호출할 때, 선언된 매개변수 개수보다 적은 수의 인자를 전달하면, 전달되지 않은 매개변수는 undefined 값을 갖게 됩니다.

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

greet("Bob"); // 출력: undefined, Bob! (greeting 매개변수가 전달되지 않아 undefined가 됨)
greet("Charlie", "Hello"); // 출력: Hello, Charlie!

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

함수에서 return 문이 없거나, return 다음에 아무런 값도 명시하지 않은 경우, 함수는 undefined를 반환합니다.

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

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

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

2.5. void 연산자 사용 시

void 연산자는 주어진 표현식을 평가하고 항상 undefined를 반환합니다. 이는 주로 JavaScript URI(예: <a href="javascript:void(0);">)에서 링크 클릭 시 페이지 이동을 방지하거나, 표현식의 부수 효과만을 원하고 반환 값은 무시할 때 사용됩니다.

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

3. null과의 차이점

undefined와 함께 개발자들을 종종 혼란스럽게 하는 값은 바로 null입니다. 둘 다 ‘값이 없다’는 의미를 내포하고 있지만, 그 사용 목적과 발생하는 주체에서 중요한 차이가 있습니다.

• undefined:
  
  • 의미: 값이 할당되지 않은 상태. 시스템(JavaScript 엔진)이 ‘초기화되지 않았음’을 나타낼 때 사용합니다.
  • 발생 주체: 주로 JavaScript 엔진에 의해 자동으로 부여됩니다.
  • typeof 결과: "undefined"

• null:
  
  • 의미: 어떤 변수에 ‘의도적으로 값이 없음’을 명시적으로 나타낼 때 사용합니다. ‘비어있는 객체 참조’를 의미하기도 합니다.
  • 발생 주체: 개발자가 의도적으로 할당합니다.
  • typeof 결과: "object" (이것은 JavaScript 초기 버전의 버그로 인해 발생한 역사적인 특성이며, 원시 타입인 null이 객체로 나오는 유일한 예외입니다.)

비교 연산자를 통한 차이점

두 값은 동등(==) 비교에서는 같다고 판단되지만, 엄격한 동등(===) 비교에서는 다르다고 판단됩니다.

console.log(undefined == null);  // 출력: true (값이 없다는 의미에서 동등하게 취급)
console.log(undefined === null); // 출력: false (타입이 다르므로 엄격하게는 다름)

console.log(typeof undefined); // 출력: "undefined"
console.log(typeof null);      // 출력: "object" (JavaScript의 역사적인 실수)

4. undefined를 안전하게 다루는 방법

undefined 값은 때로는 예상치 못한 오류(예: Cannot read properties of undefined)를 발생시킬 수 있습니다. 따라서 코드에서 undefined를 안전하게 처리하는 방법을 익히는 것이 중요합니다.

4.1. typeof 연산자 활용

변수가 선언되었는지, 그리고 undefined 값을 가지는지 확인하는 가장 안전하고 보편적인 방법입니다. 특히 선언조차 되지 않은 변수에 접근할 때 에러를 피할 수 있습니다.

if (typeof myUndeclaredVar === 'undefined') {
    console.log("myUndeclaredVar는 정의되지 않았거나 undefined입니다.");
}

let declaredButUndefined;
if (typeof declaredButUndefined === 'undefined') {
    console.log("declaredButUndefined는 정의되었지만 undefined입니다.");
}

4.2. 일치 연산자 === 활용

변수가 undefined 값을 가지고 있는지 정확히 확인합니다. == 대신 ===를 사용하여 null과의 혼동을 피하는 것이 중요합니다.

let someValue = undefined;

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

let anotherValue = null;
if (anotherValue === undefined) {
    console.log("이 메시지는 출력되지 않습니다.");
}

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

undefined를 포함한 Falsy 값 대신 기본값을 할당할 때 유용합니다. 첫 번째 피연산자가 Falsy 값(false, 0, '', null, undefined, NaN)일 경우, 두 번째 피연산자(기본값)가 선택됩니다.

let userName = undefined;
let displayName = userName || "손님"; // userName이 undefined이므로 "손님"이 할당됨
console.log(displayName); // 출력: 손님

let userAge = 0; // 0도 Falsy 값임에 주의
let displayAge = userAge || 25;
console.log(displayAge); // 출력: 25 (userAge가 0이라도 기본값 25가 할당됨)

4.4. Nullish Coalescing 연산자 (??) 활용 (ES2020+)

|| 연산자와 비슷하게 기본값을 설정할 때 사용하지만, ?? 연산자는 피연산자가 null 또는 undefined일 경우에만 기본값을 할당합니다. 0이나 '' 같은 Falsy 값이지만 유효한 값으로 취급되어야 할 때 특히 유용합니다.

let userName = undefined;
let displayName = userName ?? "손님"; // userName이 undefined이므로 "손님"이 할당됨
console.log(displayName); // 출력: 손님

let userAge = 0; // 0은 null이나 undefined가 아님
let displayAge = userAge ?? 25;
console.log(displayAge); // 출력: 0 (userAge가 0이라도 유효한 값으로 취급됨)

let userStatus = ''; // 빈 문자열도 null이나 undefined가 아님
let displayStatus = userStatus ?? '알 수 없음';
console.log(displayStatus); // 출력: ''

4.5. 옵셔널 체이닝 (?.) (ES2020+)

객체의 속성에 접근할 때, 해당 속성이 null 또는 undefined일 수 있는 경우 에러를 발생시키지 않고 undefined를 반환하도록 합니다. 중첩된 객체 속성에 접근할 때 매우 유용합니다.

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

console.log(user.address.city);      // 출력: Seoul
console.log(user.phone?.number);     // user.phone이 undefined이므로 에러 없이 undefined 반환
console.log(user.address.street?.name); // user.address.street가 undefined이므로 에러 없이 undefined 반환

const admin = {};
console.log(admin.profile?.email); // admin.profile이 undefined이므로 에러 없이 undefined 반환

5. undefined 관련 흔한 실수와 팁

• 명시적인 undefined 할당 피하기: 일반적으로 변수를 undefined로 명시적으로 초기화하거나 할당하는 것은 권장되지 않습니다. JavaScript 엔진이 이미 해당 역할을 수행하므로, 대신 ‘값이 없음’을 나타내려면 null을 사용하는 것이 좋습니다.
• if (!someVar) 구문 주의: undefined는 Falsy 값이므로 if (!someVar)는 작동합니다. 하지만 0, '', false, null, NaN도 모두 Falsy 값이므로, 특정 상황에서는 의도치 않은 결과를 초래할 수 있습니다. undefined만을 정확히 확인하려면 typeof나 ===를 사용하는 것이 안전합니다.
• 함수 매개변수 기본값 설정: ES6부터는 함수 매개변수에 기본값을 설정하여 undefined가 전달되는 경우를 방지할 수 있습니다.

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

• 엄격 모드 (Strict Mode) 활용: JavaScript의 엄격 모드('use strict';)는 일부 잠재적인 문제를 야기하는 동작들을 제한하여, 예측 불가능한 undefined 관련 에러를 줄이는 데 도움을 줄 수 있습니다. 예를 들어, 선언되지 않은 변수에 할당하는 것을 방지합니다.

결론: undefined 이해의 중요성

undefined는 JavaScript에서 매우 흔하게 발생하는 값이며, 단순히 ‘정의되지 않음’을 넘어 JavaScript의 동적인 특성과 밀접하게 연결되어 있습니다. 이 글에서 설명한 undefined의 기본 개념, 발생 시나리오, null과의 차이점, 그리고 안전하게 다루는 다양한 방법을 숙지하는 것은 견고하고 예측 가능한 JavaScript 코드를 작성하는 데 필수적입니다.

특히 ?? 연산자와 ?. 옵셔널 체이닝 같은 최신 JavaScript 문법은 undefined와 null을 보다 효율적이고 안전하게 처리할 수 있는 강력한 도구이므로, 적극적으로 학습하고 활용하는 것이 좋습니다. undefined를 정확히 이해하고 올바르게 처리함으로써, 우리는 런타임 오류를 줄이고 코드의 안정성과 가독성을 크게 향상시킬 수 있을 것입니다.

“`
“`html

“`