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

JavaScript를 개발하다 보면 undefined라는 값을 자주 마주치게 됩니다. 이는 단순한 에러 메시지가 아니라, JavaScript 언어의 근본적인 특성을 나타내는 원시 타입(primitive type) 중 하나입니다. undefined를 정확히 이해하고 올바르게 다루는 것은 견고하고 예측 가능한 코드를 작성하는 데 필수적입니다. 이 글에서는 undefined가 무엇인지, 언제 발생하는지, 그리고 이를 효과적으로 처리하는 방법에 대해 자세히 알아보겠습니다.

1. ‘undefined’란 무엇인가?

JavaScript에서 undefined는 특정 변수나 속성에 값이 할당되지 않은 상태를 나타내는 특별한 원시 값입니다. 이는 메모리 공간이 할당되었지만, 그 안에 어떤 구체적인 값도 채워지지 않았음을 의미합니다. undefined는 개발자가 명시적으로 할당하는 경우도 있지만, 대부분의 경우 JavaScript 엔진에 의해 자동으로 부여됩니다.

1.1. 원시 타입으로서의 ‘undefined’

JavaScript에는 7가지 원시 타입(Primitive Type)이 있습니다: string, number, bigint, boolean, symbol, null, 그리고 undefined입니다. 이들은 객체가 아니며, 불변(immutable)의 특성을 가집니다.

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

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

typeof 연산자를 사용했을 때 "undefined" 문자열을 반환하는 것이 undefined의 특징입니다.

1.2. ‘undefined’와 ‘null’의 차이점

undefined와 null은 종종 혼동되지만, 그 의미와 사용 목적은 명확히 다릅니다. 이 둘의 차이를 이해하는 것이 중요합니다.

• undefined: 값이 할당되지 않음을 의미합니다. 주로 시스템(JavaScript 엔진)에 의해 설정됩니다. 변수를 선언했지만 초기화하지 않았거나, 존재하지 않는 객체 속성에 접근할 때 나타납니다.
• null: 의도적으로 비어있음을 의미합니다. 개발자가 명시적으로 “여기에 값이 없음을 의도한다”고 지정할 때 사용합니다. 객체를 가리키는 포인터가 없음을 나타낼 때 주로 사용됩니다.

null의 typeof 결과가 "object"인 것은 JavaScript 초기 버전의 버그로, 지금까지도 하위 호환성을 위해 수정되지 않고 있습니다. 따라서 null을 확인할 때는 === null을 사용하는 것이 가장 안전합니다.

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

undefined는 다양한 상황에서 발생하며, 이를 인지하는 것은 버그를 예방하고 디버깅하는 데 큰 도움이 됩니다.

2.1. 변수 선언 후 값 미할당

가장 흔한 경우로, 변수를 선언했지만 초기값을 할당하지 않으면 해당 변수는 undefined 값을 가집니다.

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

            const userAge; // 에러: const는 선언과 동시에 초기화해야 합니다.
            // var userGender;
            // console.log(userGender); // 출력: undefined (var도 동일)
        

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

객체에 존재하지 않는 속성에 접근하려고 하면 undefined가 반환됩니다. 이는 에러를 발생시키지 않고 조용히 undefined를 반환하므로 주의해야 합니다.

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

            console.log(user.name);    // 출력: "Alice"
            console.log(user.email);   // 출력: undefined (email 속성이 없음)
            console.log(user.address.street); // 에러: TypeError: Cannot read properties of undefined (reading 'street')
                                          // user.address 자체가 undefined이므로, 그 속성에 접근하려 하면 에러 발생
        

마지막 예시처럼, 상위 속성이 undefined인 상태에서 그 하위 속성에 접근하려 하면 TypeError가 발생할 수 있습니다. 이는 “undefined의 속성을 읽을 수 없다”는 의미입니다.

2.3. 함수 매개변수 미전달

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

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

            greet("Bob");          // 출력: "Hello, Bob!" (greeting은 undefined였지만 || 연산자로 기본값 적용)
            greet();               // 출력: "Hello, Guest!" (name, greeting 모두 undefined)
            greet(undefined, "Hi"); // 출력: "Hi, undefined!" (name을 undefined로 명시적으로 전달)
        

2.4. 반환값이 없는 함수

함수가 명시적으로 어떤 값도 return하지 않으면, 함수는 자동으로 undefined를 반환합니다. return; 문만 있거나 return 문이 없는 경우가 여기에 해당합니다.

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

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

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

            console.log(result1); // 출력: undefined
            console.log(result2); // 출력: undefined
        

2.5. `void` 연산자 사용

void 연산자는 주어진 표현식을 평가한 후 undefined를 반환합니다. 이는 특정 컨텍스트에서 반환값을 무시하고 undefined를 얻고자 할 때 사용됩니다.

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

주로 HTML에서 <a href="javascript:void(0);">와 같이 링크 클릭 시 페이지 이동을 막는 용도로 사용되곤 했습니다.

3. ‘undefined’ 확인 방법

코드 내에서 undefined 값을 안전하게 확인하는 것은 잠재적인 런타임 에러를 방지하는 데 매우 중요합니다.

3.1. `typeof` 연산자 사용 (가장 권장)

typeof 연산자를 사용하여 변수의 타입을 문자열로 확인하는 것이 가장 안전하고 권장되는 방법입니다. 이는 변수가 선언되지 않은 경우에도 에러 없이 "undefined"를 반환합니다.

            let myVar;
            if (typeof myVar === 'undefined') {
                console.log("myVar는 undefined입니다."); // 실행
            }

            // 존재하지 않는 변수에도 안전하게 사용 가능
            if (typeof nonExistentVar === 'undefined') {
                console.log("nonExistentVar는 존재하지 않거나 undefined입니다."); // 실행
            }
        

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

변수가 선언되어 있고 그 값이 undefined인 것이 확실할 때에는 일치 연산자(===)를 직접 사용하는 것도 가능합니다.

            let myVar = undefined;
            let anotherVar = 10;

            if (myVar === undefined) {
                console.log("myVar는 undefined입니다."); // 실행
            }

            if (anotherVar === undefined) {
                console.log("anotherVar는 undefined입니다."); // 실행 안 됨
            }
        

하지만, 이 방법은 선언되지 않은 변수에 대해 사용하면 ReferenceError를 발생시킵니다.

            // console.log(nonExistentVar === undefined); // 에러: ReferenceError: nonExistentVar is not defined
        

따라서, 변수의 존재 여부가 불확실할 때는 typeof를 사용하는 것이 더 안전합니다.

3.3. 동등 연산자 (`==`) 사용 지양

동등 연산자(==)는 타입 변환(type coercion)을 수행하므로, undefined와 null을 동일하게 처리합니다 (undefined == null은 true). 이로 인해 예상치 못한 동작이 발생할 수 있으므로, undefined 여부를 확인할 때는 == 대신 ===나 typeof를 사용하는 것을 강력히 권장합니다.

            let myVar; // undefined
            let myNull = null;

            console.log(myVar == undefined); // true
            console.log(myNull == undefined); // true (문제의 소지)

            console.log(myVar === undefined); // true
            console.log(myNull === undefined); // false (올바른 판단)
        

4. ‘undefined’ 처리 및 모범 사례

undefined는 JavaScript 개발에서 피할 수 없는 부분이므로, 이를 효과적으로 처리하는 방법을 익히는 것이 중요합니다.

4.1. 기본값 할당

값이 undefined일 때 특정 기본값을 사용하도록 하는 것은 일반적인 패턴입니다.

• 논리 OR (||) 연산자 사용: 가장 간단하지만, 0, '' (빈 문자열), false와 같은 falsy 값들도 기본값으로 대체될 수 있다는 단점이 있습니다.

                function getDisplayName(name) {
                    return name || "Anonymous";
                }
                console.log(getDisplayName("John"));   // "John"
                console.log(getDisplayName(undefined)); // "Anonymous"
                console.log(getDisplayName(""));       // "Anonymous" (빈 문자열도 대체됨)
                console.log(getDisplayName(0));        // "Anonymous" (0도 대체됨)
            

                function getDisplayNameSafe(name) {
                    return name ?? "Anonymous";
                }
                console.log(getDisplayNameSafe("John"));   // "John"
                console.log(getDisplayNameSafe(undefined)); // "Anonymous"
                console.log(getDisplayNameSafe(null));      // "Anonymous"
                console.log(getDisplayNameSafe(""));       // "" (빈 문자열 유지)
                console.log(getDisplayNameSafe(0));        // 0 (0 유지)
            

                function greetUser(name = "Guest", message = "Hello") {
                    console.log(`${message}, ${name}!`);
                }
                greetUser("Alice");     // "Hello, Alice!"
                greetUser(undefined, "Hi"); // "Hi, Guest!"
                greetUser();            // "Hello, Guest!"
            

4.2. 방어적인 코딩 (Defensive Coding)

객체의 속성에 접근하기 전에 해당 속성이 존재하는지 확인하는 습관을 들이는 것이 좋습니다.

• 논리 AND (&&) 연산자 사용: 특정 속성이 존재해야만 하위 속성에 접근하도록 할 때 유용합니다.

                const user = {
                    profile: {
                        name: "Jane Doe"
                    }
                };
                // const user = {}; // profile이 없을 경우

                if (user && user.profile && user.profile.name) {
                    console.log(user.profile.name); // "Jane Doe"
                } else {
                    console.log("사용자 이름 정보를 찾을 수 없습니다.");
                }
            

                const user = {
                    profile: {
                        name: "Jane Doe"
                    }
                };
                // const user = {}; // profile이 없을 경우

                console.log(user?.profile?.name); // "Jane Doe" 또는 undefined
                console.log(user?.address?.street); // undefined
            

4.3. 명시적인 초기화

변수를 선언할 때 값을 할당하지 않으면 undefined가 되지만, 때로는 개발자가 명시적으로 “값이 없음”을 나타내고 싶을 수 있습니다. 이때는 null을 사용하는 것이 더 명확합니다.

            let currentSelection = null; // 초기에는 선택된 것이 없음을 명시적으로 나타냄

            // 나중에 선택이 되면...
            currentSelection = "itemA";

            // 선택을 해제할 때는 다시 null로
            // currentSelection = null;
        

undefined는 “아직 값을 할당하지 않았다”는 의미가 강하고, null은 “값이 의도적으로 비어있다”는 의미가 강하므로 상황에 맞게 사용하는 것이 좋습니다.

결론

JavaScript의 undefined는 단순히 ‘정의되지 않은’ 상태를 넘어, 언어의 작동 방식을 이해하는 데 핵심적인 개념입니다. 변수의 생명 주기, 함수 호출 방식, 객체 속성 접근 등 다양한 상황에서 undefined를 만날 수 있습니다. undefined와 null의 차이를 명확히 인지하고, typeof, ===, ??, 옵셔널 체이닝과 같은 안전한 확인 및 처리 방법을 적극적으로 활용함으로써, 개발자는 잠재적인 버그를 줄이고 더욱 견고하며 유지보수가 쉬운 JavaScript 애플리케이션을 구축할 수 있을 것입니다.