—

“`html

자바스크립트 핵심 개념: ‘undefined’ 완전 정복 (미지의 영역 탐험)

자바스크립트 개발을 시작하거나 진행하면서 콘솔 창에 붉은 글씨로 나타나는 에러 메시지들을 보는 것은 익숙한 경험일 것입니다. 그중에서도 TypeError: Cannot read properties of undefined (reading 'someProperty')와 같은 메시지는 많은 개발자들의 골머리를 앓게 합니다. 이 메시지는 단순히 에러를 나타내는 것을 넘어, 우리가 코드 내에서 ‘정의되지 않은’ 무언가를 다루고 있다는 중요한 신호입니다. 오늘 우리는 바로 이 undefined라는 특별한 값에 대해 깊이 파고들어, 이것이 무엇이고 왜 존재하며, 어떻게 효과적으로 다루어야 하는지 그 모든 것을 알아보겠습니다.

undefined는 자바스크립트의 7가지 원시(Primitive) 타입 중 하나로, 단순히 “값이 없다”는 의미를 넘어 “값이 할당되지 않았다” 또는 “존재하지 않는다”는 상태를 명확하게 표현합니다. 이것은 단순한 빈 문자열("")이나 숫자 0, 또는 심지어 null과는 근본적으로 다른 고유한 의미를 가집니다. 자바스크립트의 유연하고 동적인 특성 때문에 undefined는 우리가 예상치 못한 순간에 나타나기도 하고, 때로는 우리가 의도적으로 이 값을 활용하기도 합니다. 이 개념을 정확히 이해하는 것은 더욱 견고하고 예측 가능한 자바스크립트 코드를 작성하는 데 필수적인 기초 지식이 됩니다.

1. ‘undefined’란 무엇인가? 본질적인 이해

1.1. ‘undefined’의 정의

자바스크립트에서 undefined는 특정 변수가 선언되었지만 아직 어떤 값도 할당되지 않았을 때, 또는 존재하지 않는 객체의 속성에 접근하려 할 때 반환되는 원시 값(Primitive Value)입니다. 쉽게 말해, 시스템이 “이 변수는 선언은 됐는데, 아직 무슨 값인지 모르겠어!” 또는 “이 속성은 애초에 없어!”라고 알려주는 고유한 신호라고 생각할 수 있습니다.

undefined는 타입(Type)이자 값이기도 합니다. 즉, typeof undefined를 실행하면 그 결과는 문자열 "undefined"가 됩니다. 이는 undefined가 단순한 키워드나 에러 상태가 아니라, 자바스크립트 언어 자체에 내재된 고유한 데이터 타입임을 명확히 보여줍니다.

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

1.2. 자바스크립트에서의 ‘undefined’의 역할

자바스크립트는 매우 동적인 언어이며, 변수를 선언할 때 타입을 미리 지정할 필요가 없습니다. 이러한 유연성 덕분에 undefined는 다음과 같은 중요한 역할을 수행합니다:

• 초기화되지 않은 상태 표현: 변수가 선언되었지만 초기 값이 주어지지 않았을 때, 개발자에게 해당 변수에 아직 유효한 값이 없음을 알립니다. 이는 오류가 아닌, ‘값이 없음’을 나타내는 정상적인 상태입니다.
• 존재하지 않는 자원에 대한 지표: 객체에서 존재하지 않는 속성에 접근하거나, 배열의 범위를 벗어난 인덱스에 접근했을 때, undefined를 반환함으로써 해당 자원이 없음을 명확히 알려줍니다.
• 함수의 반환 값: 함수가 명시적인 return 문 없이 종료되거나, return;만으로 종료될 때, 이 함수를 호출한 결과 값은 undefined가 됩니다. 이는 함수가 특정 값을 반환하지 않았음을 의미합니다.

2. ‘undefined’와 ‘null’의 결정적 차이

undefined와 함께 자바스크립트에서 “값이 없음”을 나타내는 또 다른 중요한 원시 값은 바로 null입니다. 이 둘은 종종 혼동되지만, 그 의미와 용도는 명확하게 다릅니다. 이 차이를 이해하는 것은 자바스크립트 개발의 핵심 중 하나입니다.

2.1. ‘undefined’의 의미: “아직 할당되지 않음”

• 누가 설정하는가? 주로 자바스크립트 엔진(시스템)이 자동으로 설정합니다.
• 언제 나타나는가?
  
  • 변수가 선언만 되고 초기화되지 않았을 때.
  • 존재하지 않는 객체 속성에 접근할 때.
  • 함수의 매개변수가 전달되지 않았을 때.
  • return 문이 없는 함수가 종료될 때.

• 의도: “값이 할당된 적이 없어서 현재 어떤 값인지 알 수 없음”을 나타냅니다.

        let name; // 변수 선언, 값 할당 안 됨
        console.log(name); // undefined

        const user = {};
        console.log(user.age); // user 객체에 age 속성이 없으므로 undefined

        function greet(person) {
            console.log(`Hello, ${person}!`);
        }
        greet(); // person 매개변수가 전달되지 않았으므로 person은 undefined
    

2.2. ‘null’의 의미: “의도적으로 비워둠”

• 누가 설정하는가? 주로 개발자가 명시적으로 할당합니다.
• 언제 나타나는가? 특정 변수에 의도적으로 “값이 없음”을 부여하고자 할 때 사용합니다. 예를 들어, 어떤 객체 참조를 끊거나, 데이터베이스에서 특정 값을 찾을 수 없을 때 명시적으로 null을 반환할 수 있습니다.
• 의도: “값이 존재하지 않지만, 그 상태를 개발자가 의도적으로 표현함”을 나타냅니다. 마치 “여기엔 아무것도 없어요”라고 개발자가 직접 표시한 것과 같습니다.

        let selectedItem = null; // 개발자가 명시적으로 null 할당
        console.log(selectedItem); // null

        function findProduct(id) {
            // 특정 id의 제품을 찾지 못했을 경우
            return null;
        }
        let product = findProduct(123);
        if (product === null) {
            console.log("제품을 찾을 수 없습니다.");
        }
    

2.3. 타입(Type)의 차이 및 동등성 비교

가장 중요한 차이 중 하나는 typeof 연산자를 사용했을 때의 결과입니다.

• typeof undefined는 "undefined"를 반환합니다.
• typeof null은 "object"를 반환합니다. 이는 자바스크립트의 역사적인 버그로, 오랫동안 논의되었지만 하위 호환성 문제로 인해 수정되지 않고 남아있습니다. 따라서 null이 객체라는 것을 의미하는 것이 아니라, 단순히 typeof 연산자의 특이점임을 인지해야 합니다.

        console.log(typeof undefined); // "undefined"
        console.log(typeof null);      // "object" (역사적인 버그)
    

동등성 비교에서도 차이가 나타납니다:

• 느슨한 동등 연산자 (==): undefined와 null은 서로 동일하다고 간주됩니다. 즉, undefined == null은 true를 반환합니다. 이는 자바스크립트의 타입 강제 변환(Type Coercion) 때문입니다.
• 엄격한 동등 연산자 (===): undefined와 null은 타입이 다르기 때문에 동일하지 않다고 간주됩니다. 즉, undefined === null은 false를 반환합니다. 일반적으로 엄격한 동등 연산자 (===)를 사용하는 것이 권장됩니다.

        console.log(undefined == null);  // true (느슨한 비교)
        console.log(undefined === null); // false (엄격한 비교)
    

핵심 요약: undefined는 시스템이 ‘값이 없음’을 알리는 반면, null은 개발자가 ‘값이 없음’을 의도적으로 지정할 때 사용합니다. 이 차이를 명확히 인지하고 엄격한 비교 (===)를 사용하는 습관을 들이는 것이 중요합니다.

3. ‘undefined’를 만나는 다양한 상황

undefined는 자바스크립트 코드 곳곳에서 마주칠 수 있으며, 그 등장은 단순히 코딩 실수의 결과가 아닐 수 있습니다. undefined가 발생하는 주요 시나리오를 이해하는 것은 효과적인 디버깅과 견고한 코드 작성에 필수적입니다.

3.1. 변수가 선언되었지만 초기화되지 않았을 때

let이나 var 키워드로 변수를 선언했지만, 초기 값을 할당하지 않으면 해당 변수에는 자동으로 undefined가 할당됩니다. const는 선언과 동시에 초기화가 필수적이므로 이 경우 undefined를 만날 일은 없습니다.

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

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

        // const must be initialized
        // const constVar; // SyntaxError: Missing initializer in const declaration
    

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

객체(Object)에서 정의되지 않은 속성(Property)에 접근하려고 시도하면, 자바스크립트는 해당 속성이 없음을 나타내기 위해 undefined를 반환합니다. 이는 에러가 아니며, 단순히 “그 속성은 없어”라는 의미입니다.

        const car = {
            brand: 'Hyundai',
            model: 'Sonata'
        };

        console.log(car.brand);      // 출력: "Hyundai"
        console.log(car.year);       // 출력: undefined (car 객체에 year 속성이 없음)
        console.log(car.engine.type); // TypeError: Cannot read properties of undefined (reading 'type')
                                     // car.engine 자체가 undefined이므로, 그 속성인 'type'을 읽을 수 없음
    

마지막 예시처럼, 중첩된 객체에서 중간 단계의 객체가 undefined일 때 그 속성에 접근하려 하면 TypeError가 발생합니다.

3.3. 함수에 필요한 매개변수가 전달되지 않았을 때

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

        function createUser(name, age, city) {
            console.log(`Name: ${name}`);
            console.log(`Age: ${age}`);
            console.log(`City: ${city}`);
        }

        createUser('Alice', 30);
        // 출력:
        // Name: Alice
        // Age: 30
        // City: undefined (city 매개변수에 값이 전달되지 않음)
    

3.4. 반환값이 없는 함수의 실행 결과

자바스크립트 함수는 기본적으로 값을 반환합니다. 만약 함수 내부에 명시적인 return 문이 없거나, return;만으로 아무런 값도 지정하지 않은 채 종료되면, 함수를 호출한 결과는 undefined가 됩니다.

        function doSomething() {
            // 아무것도 반환하지 않음
            console.log("Doing something...");
        }

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

        function doSomethingElse() {
            console.log("Doing something else...");
            return; // 값을 지정하지 않고 반환
        }

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

3.5. `void` 연산자의 사용

void 연산자는 주어진 표현식을 평가(실행)하지만, 항상 undefined를 반환하도록 강제하는 특수한 연산자입니다. 주로 특정 표현식의 부수 효과(side effect)는 필요하지만 그 결과 값은 필요 없을 때 사용됩니다.

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

        // 과거에는 HTML 링크의 기본 동작을 막기 위해 사용되기도 했습니다.
        // <a href="javascript:void(0)">클릭</a>
    

4. ‘undefined’를 이해하는 것의 중요성

undefined가 나타나는 다양한 상황을 이해하는 것은 단순히 지식을 늘리는 것을 넘어, 실제 개발 과정에서 수많은 이점을 제공합니다.

4.1. 오류 방지 및 효과적인 디버깅

undefined에 대한 이해가 부족하면 앞서 언급했던 TypeError: Cannot read properties of undefined와 같은 런타임 에러에 직면했을 때 원인을 파악하기 어려울 수 있습니다. 특정 속성에 접근하려는데 TypeError가 발생했다면, 그 속성 자체보다 그 상위 객체가 undefined인지를 먼저 의심해야 합니다. undefined의 등장을 예상하고 처리하는 것은 오류 발생을 줄이는 가장 기본적인 방법입니다.

        const userProfile = {};
        // console.log(userProfile.address.street);
        // ↑ 이 코드는 TypeError를 발생시킬 것임을 예측하고 방어 코드를 작성해야 합니다.
    

4.2. 견고하고 예측 가능한 코드 작성

변수나 객체 속성이 undefined가 될 수 있음을 인지하고, 이에 대비한 코드를 작성하면 애플리케이션의 안정성과 예측 가능성을 크게 높일 수 있습니다. 이는 사용자 경험을 향상시키고, 예상치 못한 상황으로 인한 버그를 줄여줍니다. 예를 들어, 사용자로부터 받은 입력값이 존재하지 않을 경우를 대비하여 기본값을 설정하는 등의 처리를 할 수 있습니다.

4.3. 코드의 의도 명확화

undefined는 “값이 할당되지 않은 상태”라는 명확한 의미를 가집니다. 이를 이해하고 null과의 차이를 구분하여 사용하면, 코드의 각 부분이 어떤 상태를 나타내는지 의도를 더 명확하게 전달할 수 있습니다. 예를 들어, API 호출 결과로 데이터가 없을 때 null을 반환하여 “데이터 없음”을 명시적으로 알리는 것과, 단순히 정의되지 않은 undefined 상태로 두는 것은 의미상 큰 차이가 있습니다.

5. ‘undefined’를 효과적으로 다루는 방법 (모범 사례)

undefined를 단순히 피해야 할 대상으로 보는 것이 아니라, 자바스크립트의 자연스러운 부분으로 받아들이고 이를 효과적으로 활용하거나 적절히 처리하는 방법을 익히는 것이 중요합니다.

5.1. 변수 초기화 습관화

변수를 선언할 때는 가능한 한 즉시 초기 값을 할당하는 습관을 들이세요. 이는 undefined가 의도치 않게 코드에 침투하는 것을 막는 가장 기본적인 방법입니다.

        let count = 0; // 초기값 할당
        let userName = ''; // 빈 문자열로 초기화
        let settings = {}; // 빈 객체로 초기화
        let dataList = []; // 빈 배열로 초기화
    

5.2. 함수의 기본 매개변수 (Default Parameters) 활용

ES6부터 도입된 기본 매개변수 기능을 사용하면, 인자가 전달되지 않아 undefined가 될 수 있는 매개변수에 기본값을 쉽게 설정할 수 있습니다.

        function greet(name = 'Guest') { // name에 값이 없으면 'Guest'를 사용
            console.log(`Hello, ${name}!`);
        }

        greet('Alice'); // 출력: Hello, Alice!
        greet();        // 출력: Hello, Guest!
    

5.3. 옵셔널 체이닝 (Optional Chaining) 및 널 병합 연산자 (Nullish Coalescing)

ES2020에 도입된 이 두 가지 기능은 undefined나 null을 다루는 데 혁신적인 편의성을 제공합니다.

• 옵셔널 체이닝 (?.): 객체 속성에 접근할 때, 해당 속성이 null 또는 undefined이면 에러를 발생시키지 않고 즉시 undefined를 반환합니다. 복잡한 중첩 객체에 안전하게 접근할 때 유용합니다.
  

  
                  const user = {
                      name: 'Bob',
                      address: {
                          street: '123 Main St',
                          zip: '10001'
                      }
                  };
                  const admin = {
                      name: 'Charlie'
                  };
  
                  console.log(user.address?.street); // 출력: "123 Main St"
                  console.log(admin.address?.street); // 출력: undefined (admin.address가 없으므로 에러 없이 undefined 반환)
                  // console.log(admin.address.street); // TypeError 발생!
              

• 널 병합 연산자 (??): 왼쪽 피연산자가 null 또는 undefined일 경우에만 오른쪽 피연산자의 값을 반환합니다. 이는 ||(OR) 연산자와 유사하지만, 0이나 ''(빈 문자열)과 같은 “falsy” 값도 유효한 값으로 취급한다는 점에서 차이가 있습니다.
  

  
                  const userName = null;
                  const defaultName = '익명';
  
                  console.log(userName ?? defaultName); // 출력: "익명" (userName이 null이므로 defaultName 사용)
  
                  const count = 0;
                  console.log(count ?? 100); // 출력: 0 (count가 0이어도 유효한 값이므로 0 사용)
                  console.log(count || 100); // 출력: 100 (|| 연산자는 0을 falsy로 간주하여 100을 반환)
              

5.4. 명시적인 비교 (=== undefined) 또는 존재 여부 확인

변수가 undefined인지 확인해야 할 경우, == undefined 대신 === undefined를 사용하여 엄격하게 비교하는 것이 좋습니다. 또한, 어떤 변수의 존재 여부를 확인할 때는 단순히 if (variable) 대신 if (variable !== undefined)나 if (variable != null) (null과 undefined 모두 확인)을 사용하는 것이 더 정확할 수 있습니다.

        let value = null;
        if (value === undefined) {
            console.log("Value is strictly undefined.");
        } else {
            console.log("Value is not strictly undefined."); // 출력
        }

        let data = undefined;
        if (data != null) { // data가 null도 undefined도 아닌 경우 (0, "", false 등은 통과)
            console.log("Data exists.");
        } else {
            console.log("Data does not exist."); // 출력
        }
    

결론: ‘undefined’는 친구인가, 적인가?

undefined는 자바스크립트 언어의 필수적인 부분이며, 그 자체로 오류가 아닙니다. 그것은 단지 “값이 할당되지 않았다” 또는 “존재하지 않는다”는 상태를 나타내는 원시 값입니다. 이 특별한 값을 회피하거나 무시하기보다는, 그 본질을 정확히 이해하고 코드 내에서 나타나는 다양한 상황들을 파악하는 것이 중요합니다.

null과의 명확한 차이점을 인지하고, 옵셔널 체이닝이나 널 병합 연산자와 같은 최신 자바스크립트 기능을 활용하여 undefined를 효과적으로 다룬다면, 여러분의 코드는 훨씬 더 견고하고 예측 가능하며 디버깅하기 쉬워질 것입니다. undefined는 더 이상 미지의 영역이 아니라, 자바스크립트 코드를 더욱 정교하게 만드는 데 활용할 수 있는 강력한 도구가 될 것입니다. 이 글을 통해 undefined에 대한 두려움을 떨쳐내고, 자신감 있게 자바스크립트 개발에 임하시기를 바랍니다!

“`
“`html

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

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

// const는 선언과 동시에 초기화해야 하므로 아래 코드는 에러 발생
// const constantVariable; // SyntaxError: Missing initializer in const declaration
        

let user = {
    name: '김철수',
    age: 30
};

console.log(user.name);    // '김철수'
console.log(user.email);   // undefined (user 객체에 email 속성이 없음)

let emptyObject = {};
console.log(emptyObject.someProperty); // undefined
        

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

greet('홍길동', '안녕하세요'); // 안녕하세요, 홍길동!
greet('이영희');           // undefined, 이영희! (greeting 인수가 전달되지 않아 undefined가 됨)

// ES6 기본값 매개변수
function greetWithDefault(name, greeting = '안녕') {
    console.log(`${greeting}, ${name}!`);
}
greetWithDefault('박보검'); // 안녕, 박보검!
        

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

function returnExplicitUndefined() {
    return; // 값을 지정하지 않은 return
}

console.log(doNothing());           // undefined
console.log(returnExplicitUndefined()); // undefined
        

console.log(void(0));      // undefined
console.log(void(1 + 2));  // undefined (1+2를 계산하지만 결과는 버리고 undefined를 반환)
        

console.log(undefined == null);   // true (값만 비교)
console.log(undefined === null);  // false (값과 타입 모두 비교)

console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"
        

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

let obj = {};
console.log(typeof obj.nonExistentProp === 'undefined'); // true

// console.log(typeof undeclaredVar === 'undefined'); // 에러 없이 true 반환
// console.log(undeclaredVar); // ReferenceError: undeclaredVar is not defined
        

let value = undefined;
if (value === undefined) {
    console.log("value는 undefined입니다."); // 출력됨
}

let anotherValue = null;
if (anotherValue === undefined) {
    console.log("anotherValue는 undefined입니다."); // 출력 안 됨
}
        

let userName = undefined;
let displayName = userName || 'Guest';
console.log(displayName); // 'Guest'

let userAge = 0;
let displayAge = userAge || 18;
console.log(displayAge);  // 18 (0도 falsy로 간주되어 18이 할당됨)
        

let userName = undefined;
let displayName = userName ?? 'Guest';
console.log(displayName); // 'Guest'

let userAge = 0;
let displayAge = userAge ?? 18;
console.log(displayAge);  // 0 (0은 nullish가 아니므로 0이 할당됨)

let emptyString = '';
let text = emptyString ?? 'Default Text';
console.log(text); // '' (빈 문자열은 nullish가 아니므로 ''이 할당됨)
        

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

console.log(user.address.city);          // '서울'
console.log(user.phone?.number);         // undefined (user.phone이 없으므로 undefined 반환, 에러 없음)
console.log(user.address?.street);       // undefined (user.address.street이 없으므로 undefined 반환, 에러 없음)

let admin = {};
console.log(admin.info?.permissions);    // undefined (admin.info가 없으므로 undefined 반환, 에러 없음)

// 선택적 체이닝이 없었다면:
// console.log(user.phone.number); // TypeError: Cannot read properties of undefined (reading 'number')
        

let data; // data는 undefined
// console.log(data.item); // TypeError: Cannot read properties of undefined (reading 'item')
        

let data;
if (data !== undefined && data !== null) { // 또는 if (data)로 falsy 값 모두 확인
    // console.log(data.item); // 이 블록은 실행되지 않음
}
console.log(data?.item); // undefined (에러 없음)
        

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

if (typeof nonExistentVar === 'undefined') {
    console.log("nonExistentVar는 선언되지 않았습니다."); // 출력됨
}
        

“`
“`html

“`