undefined가 나타나는 세 가지 경우

JavaScript에서 undefined가 발생하는 경우는 대표적으로 3가지가 있습니다.

이 3가지에 대해 다뤄보도록 하겠습니다.

---

undefined가 나타나는 세 가지 경우

1. 빈 객체일때

객체를 선언만 하고 속성 값을 정의하지 않은 상태에서, 해당 객체의 속성을 호출하면 undefined가 반환됩니다.

const obj = {};
console.log(obj.name);  // undefined

여기서 객체 obj에는 { }로 속성이 정의되어 있지 않기 때문에, name이라는 key의 value를 호출해도 undefined가 반환됩니다.

 

2. 함수에 return이 없을 때

함수에서 값을 반환하지 않으면, return이 없으면, 함수 호출의 결과가 자동으로 undefined가 됩니다.

const text = () => {
    console.log("이 함수는 return이 없습니다.");
};

console.log(text());

text() 함수는 return문이 없기 때문에 undefined가 반환됩니다.

 

3. 변수는 선언됐으나 값이 할당되지 않았을 때

변수를 선언만 하고 초기화하지 않으면 기본 값으로 undefined가 설정됩니다.

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

여기서 x는 선언만 되고 값이 할당되지 않았기 때문에 undefined가 반환됩니다.

 

추가 정보!

return문이 없더라도 callback함수를 이용하면 undefined의 반환을 막을 수 있습니다.

const example = (a, b, callback) => {
    const result = a + b;  // 값 계산
    callback(result);  // 계산 결과를 콜백 함수에 전달
};

example(3, 4, (value) => {
    console.log(value);  // 출력: 7
});

위의 코드에서 example()함수에서 return이 없습니다. 그러면 undefined가 반환되어야 할까요?

callback(result)로 콜백을 하고 있습니다. 그리고 계산된 result가 value에 return되기 때문에 7이 출력됩니다.

 

정리하면 undefined는

• JavaScript에서 빈 객체
• return이 없는 함수
• 선언된 후 초기화되지 않은 변수

에서 주로 나타납니다. 이를 방지하기 위해 콜백함수를 사용할 수 있습니다.