1. ‘undefined’의 기본 개념

‘undefined’는 프로그래밍에서 “값이 할당되지 않은 상태”를 의미하는 원시(primitive) 타입의 값입니다. 이는 변수가 선언되었지만 어떤 값으로도 초기화되지 않았거나, 객체의 존재하지 않는 속성에 접근하려 할 때 주로 나타납니다. ‘undefined’는 개발자가 의도적으로 설정하는 값이라기보다는, 시스템 또는 런타임 환경에 의해 “아직 값이 정의되지 않았음”을 나타내기 위해 자동으로 할당되는 경우가 많습니다.

JavaScript에서 typeof 연산자를 사용하여 ‘undefined’의 타입을 확인해보면, 다음과 같이 "undefined" 문자열이 반환됩니다.

let myVar;
console.log(myVar);        // undefined
console.log(typeof myVar); // "undefined"

이처럼 ‘undefined’는 명확하게 정의된 자신만의 타입과 값을 가지고 있으며, 이는 다른 원시 값(예: 숫자, 문자열, 불리언)과 마찬가지로 중요한 역할을 합니다.

2. JavaScript에서 ‘undefined’가 발생하는 주요 경우

JavaScript는 유연한 언어인 만큼 ‘undefined’가 나타날 수 있는 상황이 다양합니다. 주요 발생 사례들을 살펴보겠습니다.

2.1. 변수를 선언했지만 초기화하지 않은 경우

let 또는 const (초기화하지 않은 const는 문법 오류)로 변수를 선언하고, 명시적으로 값을 할당하지 않으면 해당 변수는 자동으로 ‘undefined’ 값을 가지게 됩니다.

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

// const 키워드는 선언과 동시에 초기화되어야 합니다.
// const anotherVar; // SyntaxError: Missing initializer in const declaration

2.2. 객체의 존재하지 않는 속성(Property)에 접근할 경우

객체에 정의되지 않은 속성에 접근하려고 시도하면 ‘undefined’가 반환됩니다. 이는 종종 TypeError로 이어질 수 있으므로 주의해야 합니다.

const user = {
    name: '김철수',
    age: 30
};
console.log(user.name);    // "김철수"
console.log(user.email);   // undefined (user 객체에 email 속성이 없음)
console.log(user.address?.street); // undefined (선택적 체이닝으로 오류 방지)

2.3. 함수의 매개변수(Parameter)가 전달되지 않은 경우

함수를 호출할 때 선언된 매개변수에 해당하는 인자(argument)를 전달하지 않으면, 해당 매개변수는 함수 본문 내에서 ‘undefined’ 값을 가지게 됩니다.

function greet(name, greeting) {
    console.log(`${greeting || '안녕하세요'}, ${name || '익명'}님!`);
}

greet('이영희', '반갑습니다'); // 반갑습니다, 이영희님!
greet('박민수');               // 안녕하세요, 박민수님! (greeting이 undefined)
greet();                      // 안녕하세요, 익명님! (name, greeting 모두 undefined)

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

함수가 return 문을 사용하지 않거나, return;만 단독으로 사용하여 명시적인 값을 반환하지 않을 경우, 해당 함수의 호출 결과는 ‘undefined’가 됩니다.

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

function returnOnly() {
    return; // 명시적인 값 없이 반환
}
console.log(returnOnly()); // undefined

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

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

const numbers = [10, 20, 30];
console.log(numbers[0]); // 10
console.log(numbers[2]); // 30
console.log(numbers[5]); // undefined (인덱스 5에는 요소가 없음)

3. ‘undefined’와 ‘null’의 차이점 심층 분석

‘undefined’와 함께 가장 많이 혼동되는 값은 ‘null’입니다. 둘 다 “값이 없음”을 나타내지만, 그 의미와 사용 목적에는 중요한 차이가 있습니다.

• undefined: “값이 할당되지 않았다.” 시스템 또는 JavaScript 엔진이 변수, 속성, 매개변수 등에 값이 아직 정의되지 않았음을 나타낼 때 사용합니다. 개발자가 직접 undefined를 할당하는 경우는 드뭅니다.
• null: “값이 의도적으로 비어있음.” 개발자가 명시적으로 어떤 변수나 속성에 “값이 없다”는 것을 나타내기 위해 할당하는 값입니다. 이는 “알 수 없는 값”이나 “존재하지 않는 값”을 의미할 때 사용됩니다.

두 값의 typeof 연산 결과도 다릅니다.

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (이것은 JavaScript의 역사적인 버그입니다.)

또한, 동등 비교(==)와 일치 비교(===)에서도 차이를 보입니다.

console.log(undefined == null);  // true (값이 없다는 의미에서는 동일하게 취급)
console.log(undefined === null); // false (타입이 다르므로 일치하지 않음)

정리하자면, undefined는 시스템이 알려주는 ‘값이 아직 없음’이고, null은 개발자가 의도적으로 설정하는 ‘값이 비어있음’입니다. 이 차이를 명확히 이해하는 것이 중요합니다.

4. ‘undefined’를 효과적으로 다루는 방법

‘undefined’로 인한 오류를 방지하고 코드를 더 견고하게 만들기 위해 다양한 처리 방법이 존재합니다.

4.1. 조건문 (if 문)을 사용한 확인

가장 기본적인 방법은 if 문을 사용하여 변수나 속성이 ‘undefined’인지 확인하는 것입니다. 엄격한 비교(===)를 사용하는 것이 좋습니다.

let maybeValue;

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

let user = {};
if (user.name === undefined) {
    console.log("user.name은 undefined입니다.");
}

또한, JavaScript에서 undefined는 “falsy” 값(거짓으로 평가되는 값) 중 하나이므로, 간단한 불리언 평가로도 확인할 수 있습니다.

if (!maybeValue) { // maybeValue가 undefined, null, 0, "", false 중 하나이면 참
    console.log("maybeValue는 거짓으로 평가됩니다.");
}

이 방법은 간편하지만, 0, ""(빈 문자열), null, false 등 다른 falsy 값과 undefined를 구분할 수 없다는 단점이 있습니다.

4.2. typeof 연산자 사용

변수가 선언되지 않았거나(ReferenceError 방지), 특정 타입의 값을 기대할 때 typeof 연산자를 활용할 수 있습니다.

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

이 방법은 변수가 아예 선언되지 않아 ReferenceError가 발생할 수 있는 상황에서도 안전하게 ‘undefined’ 여부를 확인할 수 있는 장점이 있습니다.

4.3. 논리 연산자 (||)를 사용한 기본값 할당

변수가 ‘undefined’일 때 기본값을 설정하고자 할 때 || (OR) 연산자를 활용할 수 있습니다. 이는 변수가 falsy 값일 경우 뒤의 값을 사용합니다.

let username = undefined;
let displayName = username || '게스트'; // username이 undefined이므로 '게스트'가 할당
console.log(displayName); // "게스트"

let count = 0;
let displayCount = count || 10; // count가 0(falsy)이므로 10이 할당
console.log(displayCount); // 10 (주의: 0도 falsy로 취급됨)

4.4. 선택적 체이닝 (Optional Chaining) (ES2020+)

객체의 깊숙한 속성에 접근할 때, 중간 경로의 속성이 null 또는 undefined일 경우 발생하는 TypeError를 방지하는 매우 유용한 문법입니다.

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

console.log(user.address?.city);          // "서울"
console.log(user.contact?.email);         // undefined (contact 속성이 없으므로)
console.log(user.contact?.phone?.number); // undefined (contact, phone 속성 모두 없음)

const articles = null;
console.log(articles?.[0]?.title);        // undefined (articles가 null이므로)

?. 연산자를 사용하면 해당 부분의 값이 null 또는 undefined일 경우 즉시 undefined를 반환하고 더 이상 체인을 진행하지 않아 오류를 방지합니다.

4.5. Nullish Coalescing (??) (ES2020+)

|| 연산자와 유사하게 기본값을 설정하지만, null과 undefined만을 falsy 값으로 취급하고, 0이나 ""(빈 문자열) 같은 값은 유효한 값으로 취급합니다.

let setting = undefined;
let defaultSetting = setting ?? '기본값'; // setting이 undefined이므로 '기본값' 할당
console.log(defaultSetting); // "기본값"

let temperature = 0;
let displayTemperature = temperature ?? 25; // temperature가 0이므로 0 할당 (0은 유효한 값으로 취급)
console.log(displayTemperature); // 0

let emptyString = '';
let text = emptyString ?? '텍스트 없음'; // emptyString이 ''이므로 '' 할당 (''은 유효한 값으로 취급)
console.log(text); // ""

0이나 ""와 같은 값이 유효한 데이터로 사용될 수 있는 상황에서, || 대신 ??를 사용하면 더욱 정확하게 기본값을 처리할 수 있습니다.

5. ‘undefined’ 관련 흔한 실수와 방지 전략

‘undefined’와 관련된 가장 흔한 실수는 존재하지 않는 속성에 접근하여 TypeError가 발생하는 것입니다. 예를 들어:

const data = {};
// console.log(data.user.name); // TypeError: Cannot read properties of undefined (reading 'name')
                                // data.user가 undefined인데, 그 undefined에서 name 속성에 접근하려 했기 때문

이러한 오류는 런타임에 프로그램 실행을 중단시킬 수 있으므로, 항상 데이터의 존재 여부를 확인하는 습관을 들이는 것이 중요합니다.

• 초기화의 중요성: 변수를 선언할 때 가능한 한 초기값을 할당하여 ‘undefined’ 상태를 최소화합니다.
  

  let count = 0; // undefined 대신 0으로 초기화
  let user = null; // undefined 대신 null로 명시적으로 '없음'을 표시

• 유효성 검사: 외부 API로부터 데이터를 받거나 사용자 입력을 처리할 때, 값이 예상되는 형식인지 또는 ‘undefined’가 아닌지 항상 유효성 검사를 수행합니다.
• 최신 JavaScript 문법 활용: ?. (선택적 체이닝)와 ?? (Nullish Coalescing)는 ‘undefined’와 null을 안전하게 처리하는 데 매우 효과적인 도구이므로 적극적으로 사용합니다.
• TypeScript 사용: 정적 타입 언어인 TypeScript는 컴파일 시점에 ‘undefined’가 발생할 수 있는 잠재적인 위치를 미리 알려주어, 런타임 오류를 크게 줄여줍니다.