Undefined

나타나지 말아야 할 것 같으면서도 가장 자주 마주하게 되는 데이터 타입인 undefined에 대해 알아보겠습니다.

undefined는 말 그대로 "정의되지 않았다"는 뜻으로, 자바스크립트에서 값이 할당되지 않은 상태를 나타내는 아주 특별한 값입니다.

---

1. 언제 undefined가 나타날까요?

개발자가 직접 이 값을 넣기보다는, 자바스크립트 엔진이 "여기에 값이 없네?"라고 판단할 때 자동으로 부여하는 경우가 대부분입니다.

• 변수 선언 후 값을 넣지 않았을 때: 상자(변수)만 만들고 내용물(값)을 채우지 않은 상태입니다.
• 존재하지 않는 객체 속성에 접근할 때: 없는 서랍을 열려고 할 때 발생합니다.
• 함수에서 return 문이 없을 때: 함수가 실행은 되었지만 아무런 결과물도 돌려주지 않았을 때입니다.
• 함수 호출 시 파라미터에 값을 전달하지 않았을 때: 재료를 넣지 않고 기계를 돌린 상황입니다.

---

2. 실전 예제 코드: "undefined의 발견"

JavaScript

 

// 1. 선언만 된 변수
let name;
console.log(name); // undefined

// 2. 존재하지 않는 속성
const user = { id: 1 };
console.log(user.age); // undefined

// 3. 반환값이 없는 함수
function sayHi() {
    console.log("안녕!");
}
let result = sayHi();
console.log(result); // undefined

// 4. 파라미터 누락
function sum(a, b) {
    console.log(a, b);
}
sum(10); // 10, undefined

---

3. undefined vs null (한눈에 비교)

많은 입문자가 가장 헷갈려 하는 부분입니다.

두 값 모두 "값이 없음"을 뜻하지만, 의도가 다릅니다.

구분	undefined	null
의미	값이 아직 정해지지 않음 (미정)	값이 없음을 명시적으로 표현 (비어있음)
할당 주체	자바스크립트 엔진이 자동으로 할당	개발자가 의도적으로 할당
typeof 결과	"undefined"	"object" (유명한 설계상 오류)
비유	아예 아무것도 없는 빈 공간	빈 상자를 가져다 놓은 상태

---

4. undefined 처리 팁

undefined는 Falsy 값이기 때문에 조건문에서 데이터 존재 여부를 확인할 때 매우 유용합니다.

JavaScript

 

let data;

// data가 undefined라면 이 조건문은 실행되지 않습니다.
if (data) {
    console.log("데이터가 있습니다.");
} else {
    console.log("데이터가 준비되지 않았습니다."); // 실행됨
}

---

학습 정리

• **undefined**는 자바스크립트가 자동으로 부여하는 "값이 없는 상태"의 기본값이다.
• 변수를 선언만 하거나, 객체에 없는 값을 찾을 때 주로 마주친다.
• 의도적으로 "비어있다"는 것을 나타내고 싶을 때는 undefined 대신 **null**을 사용하는 것이 좋은 관례이다.

---

자바스크립트의 공백과 같은 존재, undefined를 완벽히 이해하셨습니다!