미지의 영역, ‘Undefined’의 이해: 도입부

우리가 세상을 이해하고, 정보를 처리하며, 문제를 해결하는 과정에서 마주하는 가장 근본적인 개념 중 하나는 바로 ‘존재하지 않음’ 또는 ‘알 수 없음’에 대한 것입니다. 이는 단순히 ‘0’이나 ‘아무것도 없음’과는 다른, 훨씬 더 복잡하고 미묘한 의미를 내포합니다. 그리고 이러한 개념을 컴퓨터 과학, 수학, 논리학 등 다양한 학문 분야에서 명확하게 정의하고 다루기 위해 사용되는 핵심 용어가 바로 ‘Undefined’ (정의되지 않음)입니다.

‘Undefined’는 우리 일상생활에서도 비유적으로 사용될 수 있지만, 특히 엄밀한 논리와 규칙이 지배하는 수학적 계산이나 컴퓨터 프로그래밍의 세계에서는 그 의미가 매우 구체적이고 결정적인 역할을 합니다. 이는 어떤 값이 아직 할당되지 않았거나, 특정 연산의 결과가 유효하게 존재하지 않거나, 주어진 조건으로는 그 상태를 명확히 판별할 수 없을 때 나타나는 특별한 상태를 지칭합니다. 단순히 ‘비어 있음’을 나타내는 ‘Null’이나 ‘0’과는 확연히 구분되는 독자적인 성격을 가집니다.

이 글은 ‘Undefined’라는 개념이 무엇이며, 왜 중요한지, 그리고 어떤 맥락에서 주로 사용되는지를 구체적이고 이해하기 쉽게 설명하고자 합니다. 수학적 관점에서 왜 어떤 연산이 ‘정의되지 않음’으로 귀결되는지부터 시작하여, 컴퓨터 프로그래밍, 특히 웹 개발에서 흔히 접하는 ‘Undefined’의 다양한 사례와 그로 인해 발생할 수 있는 문제점, 그리고 이를 효과적으로 다루는 방법에 이르기까지 다방면으로 탐구할 것입니다.

1. ‘Undefined’의 본질적인 의미와 중요성

‘Undefined’는 단순히 ‘결핍’이나 ‘부재’를 넘어선 의미를 가집니다. 이는 특정 맥락에서 어떤 값이나 상태가 규칙적으로 결정될 수 없거나, 존재 자체가 불가능한 상황을 나타내는 신호로 작용합니다. 예를 들어, 수학에서 ‘0으로 나누는 행위’는 그 결과가 무한대가 아니라 ‘정의되지 않음’으로 간주됩니다. 이는 어떤 수를 0으로 곱하여 다른 수가 될 수 없다는 수학적 정의에 기반합니다. 만약 5를 0으로 나누어 어떤 특정 값(x)이 나온다고 가정한다면, 0에 x를 곱했을 때 5가 되어야 하는데, 0에 어떤 수를 곱해도 0이 되므로 이는 모순이 발생하기 때문입니다. 이러한 ‘정의되지 않음’은 수학적 체계의 일관성과 무결성을 유지하는 데 필수적입니다.

컴퓨터 과학에서는 ‘Undefined’가 조금 다른 의미로 사용되지만, 본질은 유사합니다. 변수를 선언했지만 초기 값을 할당하지 않았을 때, 객체에 존재하지 않는 속성에 접근하려 할 때, 또는 함수가 명시적인 반환 값 없이 종료될 때 등, 컴퓨터 시스템이 특정 값의 존재 여부나 그 내용을 확정할 수 없을 때 ‘Undefined’ 상태가 됩니다. 이는 프로그램의 예측 불가능한 동작이나 오류 발생으로 이어질 수 있으므로, 개발자에게는 이 ‘Undefined’ 상태를 정확히 이해하고 관리하는 것이 매우 중요합니다.

2. 수학적 관점에서의 ‘Undefined’

수학에서 ‘Undefined’는 주로 다음과 같은 경우에 발생합니다.

• 0으로 나누기 (Division by Zero): 가장 대표적인 예시입니다. 어떤 숫자 a를 0으로 나누는 연산 a/0은 수학적으로 정의되지 않습니다. 앞서 설명했듯이, 이는 곱셈의 역연산으로서의 나눗셈 정의에 모순을 일으키기 때문입니다. 0/0 또한 마찬가지로 부정(Indeterminate) 상태로 간주되며, 역시 정의되지 않습니다.
  

  5 / 0  => Undefined
  0 / 0  => Undefined (Indeterminate Form)

• 함수의 정의역 밖 (Outside the Domain of a Function): 특정 함수의 입력값이 해당 함수의 정의된 범위를 벗어날 때 결과값이 정의되지 않습니다.
  
  • 음수의 제곱근: 실수 범위에서 sqrt(-1)은 정의되지 않습니다. (복소수 범위에서는 i로 정의되지만, 실수 체계 내에서는 undefined입니다.)
  • 0 또는 음수의 로그: log(0)이나 log(-5)는 정의되지 않습니다. 로그 함수는 양수만을 정의역으로 합니다.
  • 탄젠트 함수: tan(x)는 x = π/2 + nπ (n은 정수)일 때 정의되지 않습니다. 이는 tan(x) = sin(x)/cos(x)에서 cos(x)가 0이 되는 지점이기 때문입니다.

• 특정 수학적 구조의 부재: 간혹 특정 수학적 구조 내에서 불가능한 연산을 시도할 때 발생하기도 합니다. 예를 들어, 특정 대수적 구조에서 역원이 존재하지 않는 원소에 대한 역원 연산을 시도하는 경우 등이 있습니다.

수학에서 ‘Undefined’는 해당 연산이나 함수가 현재의 수학적 체계 내에서 일관된 의미를 가질 수 없음을 명확히 알려주는 중요한 신호입니다. 이는 수학적 모순을 방지하고, 이론의 견고함을 유지하는 데 기여합니다.

3. 컴퓨터 과학 및 프로그래밍 관점에서의 ‘Undefined’

프로그래밍에서 ‘Undefined’는 수학과는 조금 다른, 그러나 매우 유사한 맥락에서 사용됩니다. 주로 어떤 값이 아직 할당되지 않았거나, 존재하지 않는 대상에 접근하려 할 때 발생하는 상태를 나타냅니다. 이는 특히 동적 타입(Dynamic Typing)을 사용하는 언어에서 흔히 볼 수 있으며, JavaScript가 대표적인 예시입니다.

프로그래밍에서의 ‘Undefined’는 다음과 같은 상황에서 나타납니다.

• 초기화되지 않은 변수: 변수를 선언했지만 명시적으로 어떤 값도 할당하지 않았을 때, 해당 변수는 ‘Undefined’ 값을 가집니다.
  

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

  이 경우, myVariable은 메모리 공간을 할당받았지만, 그 안에 어떤 유효한 데이터도 채워지지 않은 상태입니다. 시스템은 이 변수가 ‘있지만, 내용은 모른다’고 인식합니다.

• 존재하지 않는 객체 속성 또는 배열 요소 접근: 객체에 존재하지 않는 속성에 접근하려 하거나, 배열의 범위를 벗어난 인덱스에 접근할 때 ‘Undefined’가 반환됩니다.
  

  const myObject = { name: "Alice" };
  console.log(myObject.age); // 출력: undefined (age 속성이 myObject에 존재하지 않음)
  
  const myArray = [10, 20];
  console.log(myArray[2]); // 출력: undefined (인덱스 2는 존재하지 않음)

  이러한 상황은 프로그램이 유효하지 않은 메모리 주소나 데이터 구조에 접근하려 할 때 발생하며, 개발자가 의도하지 않은 동작을 야기할 수 있습니다.

• 반환 값이 없는 함수: 함수가 명시적으로 어떤 값도 return하지 않을 경우, 함수 호출의 결과는 ‘Undefined’가 됩니다.
  

  function doSomething() {
      // 아무것도 반환하지 않음
      console.log("작업 완료");
  }
  const result = doSomething();
  console.log(result); // 출력: undefined

  이는 함수가 특정 작업을 수행했지만, 그 작업의 결과로 어떤 데이터도 제공하지 않겠다는 것을 의미합니다.

• 함수의 매개변수 누락: 함수를 호출할 때 정의된 매개변수보다 적은 수의 인수를 전달하면, 전달되지 않은 매개변수는 ‘Undefined’ 값을 가집니다.
  

  function greet(name, age) {
      console.log(`이름: ${name}, 나이: ${age}`);
  }
  greet("Bob"); // 출력: 이름: Bob, 나이: undefined (age 매개변수가 전달되지 않음)

‘Undefined’와 ‘Null’의 차이점 (매우 중요!)

프로그래밍에서 ‘Undefined’만큼이나 자주 등장하며 혼동되기 쉬운 개념이 바로 ‘Null’입니다. 이 둘은 모두 ‘값이 없음’을 나타내지만, 그 의미와 의도에는 중요한 차이가 있습니다.

• Undefined: 시스템이 ‘아직 어떤 값도 할당되지 않았음‘ 또는 ‘값이 존재하지 않음‘을 나타낼 때 사용합니다. 이는 주로 자동으로 부여되는 상태입니다. 개발자가 직접 undefined를 할당하는 경우는 흔치 않으며, 보통 어떤 문제가 발생했거나 값이 예상대로 존재하지 않을 때 만나게 됩니다.
  

  let uninitializedVar; // 변수 선언만 하고 값 할당 안 함
  console.log(uninitializedVar); // undefined
  
  const obj = {};
  console.log(obj.nonExistentProperty); // undefined

• Null: 개발자가 ‘의도적으로 어떤 값이 비어 있음‘ 또는 ‘객체가 더 이상 존재하지 않음‘을 명시적으로 나타낼 때 사용합니다. 이는 값을 비우거나 초기화하기 위한 목적으로 직접 할당하는 값입니다.
  

  let emptyValue = null; // 개발자가 '값이 없음'을 의도적으로 할당
  console.log(emptyValue); // null
  
  let user = { name: "Charlie" };
  user = null; // user 객체를 참조하지 않음을 명시적으로 설정 (가비지 컬렉션 대상)

간단히 말해, undefined는 ‘알 수 없음, 정의되지 않음’의 의미가 강하고, null은 ‘의도적으로 비워둔 값 없음’의 의미가 강합니다. 이 둘을 명확히 구분하는 것은 코드의 안정성과 가독성을 높이는 데 필수적입니다.

4. ‘Undefined’의 이해와 효과적인 처리의 중요성

‘Undefined’에 대한 명확한 이해는 프로그래밍에서 다음과 같은 이유로 매우 중요합니다.

• 예측 가능한 코드 작성: ‘Undefined’가 언제, 왜 발생하는지 알면, 이를 미리 방지하거나 적절히 처리하여 프로그램이 예상치 못한 오류로 종료되거나 비정상적으로 동작하는 것을 막을 수 있습니다. 예를 들어, 객체의 속성에 접근하기 전에 해당 속성이 undefined인지 확인하는 로직을 추가하는 식입니다.
  

  let data = { user: { name: "Eve" } };
  // if (data.user.address.street) {  // address가 undefined면 오류 발생 가능성
  //    console.log(data.user.address.street);
  // }
  
  // 안전한 접근:
  if (data.user && data.user.address && data.user.address.street) {
      console.log(data.user.address.street);
  } else {
      console.log("주소 정보 없음"); // 출력: 주소 정보 없음
  }

  최신 JavaScript에서는 옵셔널 체이닝(Optional Chaining) ?. 문법을 통해 더욱 간결하게 처리할 수 있습니다.

  console.log(data.user?.address?.street); // 출력: undefined

• 디버깅 효율성 증대: 프로그램이 ‘Undefined’ 관련 오류를 발생시켰을 때, 그 원인과 발생 지점을 빠르게 파악하고 해결하는 데 도움이 됩니다. ‘Undefined’는 종종 데이터의 누락, 잘못된 변수명, 비동기 작업의 지연 등 복합적인 문제의 신호가 됩니다.
• 견고하고 안정적인 애플리케이션 개발: 사용자 입력, 외부 API 응답, 데이터베이스 조회 결과 등은 언제든지 ‘Undefined’ 상태가 될 수 있습니다. 이를 적절히 처리하지 않으면 애플리케이션 충돌, 데이터 손실, 보안 취약점 등으로 이어질 수 있습니다. ‘Undefined’를 ‘오류’가 아닌 ‘처리해야 할 상태’로 인식하고 대응하는 것이 중요합니다.
• 코드의 가독성 및 유지보수성 향상: ‘Undefined’를 명확히 처리하는 코드는 개발자의 의도를 명확하게 보여주고, 다른 개발자가 코드를 이해하고 수정하는 데 도움을 줍니다.

결론적으로, ‘Undefined’는 단순히 ‘비어 있음’을 넘어선 ‘정의될 수 없는 상태’ 또는 ‘알 수 없는 값’을 나타내는 매우 중요한 개념입니다. 수학적 엄밀성을 유지하기 위한 도구에서부터, 컴퓨터 프로그램의 안정성과 예측 가능성을 보장하는 핵심 요소에 이르기까지, ‘Undefined’는 우리가 디지털 세계를 구축하고 상호작용하는 방식에 깊이 스며들어 있습니다. 이 개념을 정확히 이해하고 올바르게 다루는 것은 견고하고 신뢰할 수 있는 시스템을 설계하고 구현하는 데 있어 필수적인 첫걸음이라 할 수 있습니다. 앞으로 이어질 내용에서는 각 분야별 ‘Undefined’의 세부적인 특성과 실제 적용 사례들을 더욱 깊이 있게 탐구하며, 이 미지의 영역을 명확히 밝혀낼 것입니다.

“`
물론입니다. 웹 개발, 특히 JavaScript에서 `undefined`는 매우 빈번하게 마주치는 개념입니다. `undefined`에 대해 구체적이고 이해하기 쉬운 본문 부분을 HTML 형식으로 작성해 드리겠습니다. 최소 1000자 이상을 목표로 합니다.

—

“`html

undefined에 대한 심층 분석: 자바스크립트의 필수 개념

자바스크립트를 포함한 여러 프로그래밍 언어에서 undefined는 단순히 ‘정의되지 않음’ 또는 ‘값이 할당되지 않음’을 의미하는 중요한 원시(primitive) 값입니다. 이는 프로그램이 특정 변수나 속성, 함수 반환값 등에 접근하려고 할 때 해당 값이 존재하지 않거나 아직 초기화되지 않았음을 나타내는 강력한 신호가 됩니다. undefined를 정확히 이해하고 올바르게 처리하는 것은 견고하고 버그 없는 코드를 작성하는 데 필수적인 요소입니다. 이 글에서는 undefined의 본질부터 발생하는 다양한 경우, 그리고 이를 효과적으로 처리하는 방법에 대해 심층적으로 다루겠습니다.

1. undefined의 본질

undefined는 자바스크립트의 7가지 원시 값(Primitive Value) 중 하나입니다. 원시 값은 객체가 아니면서 메서드를 가지지 않는 데이터를 말하며, 메모리에 값 자체가 저장됩니다.

1.1. undefined와 null의 차이

undefined와 null은 종종 혼동되지만, 명확한 차이가 있습니다.

• undefined: 시스템 또는 자바스크립트 엔진에 의해 “값이 할당되지 않았다” 또는 “존재하지 않는다”는 의미로 자동으로 부여되는 값입니다. 개발자가 명시적으로 할당하는 경우는 드뭅니다.
  

  let a;
  console.log(a); // undefined (변수가 선언되었지만 초기화되지 않음)

• null: 개발자가 “값이 의도적으로 비어있음”을 명시적으로 나타내기 위해 할당하는 값입니다. 이는 ‘비어있는 참조(reference)’를 의미합니다.
  

  let b = null;
  console.log(b); // null (개발자가 명시적으로 '비어있음'을 지정함)

이 둘의 typeof 연산자 결과도 다릅니다:

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (역사적인 자바스크립트 버그로 인한 결과이지만, 현재까지 유지됨)

이러한 차이점 때문에 undefined는 ‘무언가가 없다’는 사실 자체를, null은 ‘의도적으로 비워둔’ 상태를 표현하는 데 사용됩니다.

2. undefined가 발생하는 다양한 경우

자바스크립트 코드에서 undefined를 만날 수 있는 대표적인 상황들은 다음과 같습니다.

2.1. 변수 선언 후 초기화하지 않은 경우

var, let, const 키워드로 변수를 선언했지만, 아무 값도 할당하지 않으면 해당 변수에는 undefined가 자동으로 할당됩니다. (단, const는 선언과 동시에 초기화해야 하므로 이 경우 직접적으로 undefined가 되는 상황은 드뭅니다.)

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

var anotherVariable;
console.log(anotherVariable); // 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, message) {
    console.log(`이름: ${name}, 메시지: ${message}`);
}

greet("김철수"); // 이름: 김철수, 메시지: undefined (message 매개변수가 전달되지 않음)

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

함수가 return 문을 명시적으로 사용하지 않거나, return 문 뒤에 아무 값도 지정하지 않으면, 함수는 undefined를 반환합니다.

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

function doAnotherThing() {
    return; // 값을 지정하지 않고 return만 사용
}

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

console.log(result1); // undefined
console.log(result2); // undefined

2.5. void 연산자를 사용한 경우

void 연산자는 어떤 표현식이든 평가한 후 undefined를 반환합니다. 주로 JavaScript URI에서 부수 효과를 피하거나, 특정 식의 결과를 무시하고 싶을 때 사용됩니다.

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

3. undefined 처리 및 방어적 코딩 전략

undefined는 예상치 못한 오류(예: TypeError: Cannot read property '...' of undefined)를 일으킬 수 있으므로, 코드에서 undefined를 적절히 처리하는 것이 매우 중요합니다. 다음은 undefined를 다루는 주요 방법들입니다.

3.1. typeof 연산자 사용

변수가 선언조차 되지 않았거나 undefined 값을 가지고 있는지 확인하는 가장 안전하고 일반적인 방법입니다.

let someValue; // undefined

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

// 선언되지 않은 변수도 안전하게 체크 가능
// if (typeof undeclaredVariable === 'undefined') {
//     console.log("undeclaredVariable은 선언되지 않았습니다.");
// }

3.2. 일치 연산자 (===) 사용

변수가 undefined 값을 명확히 가지고 있는지 확인할 때 사용합니다. 동등 연산자(==)는 타입 강제 변환을 일으켜 null == undefined가 true를 반환하므로, undefined만 정확히 체크하기 위해서는 ===를 사용해야 합니다.

let data = undefined;

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

if (data == null) {
    console.log("data는 null 또는 undefined입니다."); // true (주의!)
}

3.3. 논리 연산자 (||, &&)를 이용한 단축 평가

자바스크립트에서 undefined는 “falsy” 값(false로 간주되는 값) 중 하나입니다. 이를 활용하여 기본값을 설정하거나 조건부 로직을 구현할 수 있습니다.

• || (OR) 연산자: 첫 번째 truthy 값을 반환합니다. 주로 기본값을 설정할 때 사용합니다.
  

  function greeting(name) {
      const userName = name || "방문자"; // name이 undefined, null, "", 0 등 falsy면 "방문자"가 할당
      console.log(`안녕하세요, ${userName}님!`);
  }
  
  greeting("이영희"); // 안녕하세요, 이영희님!
  greeting(undefined); // 안녕하세요, 방문자님!
  greeting("");       // 안녕하세요, 방문자님! (빈 문자열도 falsy)

• && (AND) 연산자: 첫 번째 falsy 값을 반환하거나, 모든 피연산자가 truthy일 경우 마지막 피연산자를 반환합니다. 객체 속성에 접근하기 전에 객체의 존재 여부를 확인할 때 유용합니다.
  

  const user = { name: "김민수" };
  const admin = undefined;
  
  console.log(user && user.name);  // "김민수"
  console.log(admin && admin.name); // undefined (admin이 falsy이므로 뒤의 admin.name을 평가하지 않음)

3.4. ES6+ 기능 활용

3.4.1. 기본 매개변수 (Default Parameters)

함수 매개변수가 undefined로 전달될 경우 기본값을 설정할 수 있습니다.

function greetUser(name = "손님") {
    console.log(`환영합니다, ${name}!`);
}

greetUser("박준형"); // 환영합니다, 박준형!
greetUser();        // 환영합니다, 손님! (name이 undefined로 전달됨)
greetUser(undefined); // 환영합니다, 손님!

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

ES2020에 도입된 이 연산자는 좌항의 값이 null 또는 undefined일 때만 우항의 값을 반환합니다. || 연산자와 달리, 0이나 ''(빈 문자열) 같은 다른 falsy 값은 기본값으로 간주하지 않습니다.

const myValue1 = 0;
const myValue2 = '';
const myValue3 = null;
const myValue4 = undefined;

console.log(myValue1 ?? "기본값"); // 0 (0은 null, undefined가 아님)
console.log(myValue2 ?? "기본값"); // '' (빈 문자열은 null, undefined가 아님)
console.log(myValue3 ?? "기본값"); // "기본값"
console.log(myValue4 ?? "기본값"); // "기본값"

이는 0이나 ''도 유효한 값으로 취급하고 싶을 때 || 대신 매우 유용하게 사용됩니다.

3.4.3. 옵셔널 체이닝 (Optional Chaining – ?.)

ES2020에 도입된 옵셔널 체이닝은 중첩된 객체 속성에 접근할 때, 중간 경로의 속성이 null 또는 undefined인 경우 오류를 발생시키지 않고 undefined를 반환하도록 합니다.

const userProfile = {
    personal: {
        name: "이지은",
        address: {
            city: "서울"
        }
    },
    company: null // 또는 company: undefined
};

// 옵셔널 체이닝 없이 접근하면 오류 발생 가능
// console.log(userProfile.company.location); // TypeError: Cannot read properties of null (reading 'location')

// 옵셔널 체이닝 사용
console.log(userProfile.personal?.address?.city);    // "서울"
console.log(userProfile.company?.location?.zipCode); // undefined (company가 null이므로 location에 접근하지 않음)
console.log(userProfile.personal?.phone);           // undefined (phone 속성이 없음)

이 기능은 복잡한 데이터 구조에서 TypeError를 방지하고 코드를 간결하게 만듭니다.

4. undefined와 디버깅

프로그램 실행 중에 TypeError: Cannot read property '...' of undefined와 같은 오류 메시지를 만났다면, 이는 대부분 undefined 값에 접근하여 존재하지 않는 속성을 읽으려고 시도했기 때문입니다. 이러한 오류는 디버깅 과정에서 undefined의 발생 지점과 원인을 파악하는 것이 중요합니다.

• console.log()를 사용하여 의심되는 변수나 객체의 값을 추적합니다.
• 브라우저 개발자 도구나 Node.js 디버거를 사용하여 코드 실행 흐름을 따라가며 변수 값을 확인합니다.
• 함수 매개변수가 예상대로 전달되었는지, 객체 구조가 기대하는 바와 일치하는지 확인합니다.

결론

undefined는 자바스크립트 개발에서 피할 수 없는, 매우 기본적인 개념입니다. 이는 ‘값이 할당되지 않음’을 나타내는 시스템적인 신호이며, null과는 분명히 구분됩니다. 변수 초기화, 객체 속성 접근, 함수 매개변수 및 반환 등 다양한 상황에서 undefined가 발생할 수 있습니다. typeof 연산자, === 일치 연산자, 그리고 ES6+의 기본 매개변수, 널 병합 연산자, 옵셔널 체이닝과 같은 현대적인 문법을 활용하여 undefined를 효과적으로 처리하고, 예측 불가능한 런타임 오류를 방지하는 방어적인 코드를 작성하는 것이 숙련된 자바스크립트 개발자의 필수 역량입니다. undefined를 올바르게 이해하고 활용함으로써 더 견고하고 유지보수하기 쉬운 애플리케이션을 구축할 수 있을 것입니다.

“`
“`html

// 예시: obj.data가 undefined일 경우 오류 발생
let obj = {}; // data 속성 없음
console.log(obj.data.value); // TypeError: Cannot read properties of undefined (reading 'value')
            

// 예시: 'undefined'를 이용한 조건부 처리
function greetUser(name) {
    if (name === undefined) {
        console.log("환영합니다, 손님!");
    } else {
        console.log(`환영합니다, ${name}님!`);
    }
}
greetUser(); // 환영합니다, 손님!
greetUser("김철수"); // 환영합니다, 김철수님!
            

console.log(null == undefined);   // true (타입 강제 변환)
console.log(null === undefined);  // false (엄격한 비교)
console.log(0 == undefined);      // false
console.log('' == undefined);     // false
            

let someVar;
console.log(typeof someVar === 'undefined'); // true

// 선언되지 않은 변수에도 안전하게 사용 가능
console.log(typeof nonExistentVar === 'undefined'); // true
            

let value1 = null;
let value2 = undefined;
let value3 = 0;
let value4 = '';
let value5 = 'Hello';

console.log(value1 ?? '기본값'); // '기본값'
console.log(value2 ?? '기본값'); // '기본값'
console.log(value3 ?? '기본값'); // 0 (0은 nullish하지 않음)
console.log(value4 ?? '기본값'); // '' (빈 문자열은 nullish하지 않음)
console.log(value5 ?? '기본값'); // 'Hello'
            

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

console.log(user.address.city);          // "Seoul"
console.log(user.address?.street);       // undefined (에러 발생 안 함)
console.log(user.contact?.email);        // undefined (에러 발생 안 함)
// console.log(user.contact.email);      // 에러 발생: TypeError: Cannot read properties of undefined (reading 'email')
            

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

greet();          // 안녕하세요, 게스트님!
greet('이순신');  // 안녕하세요, 이순신님!
            

“`