정의 및 사용 방법

undefined 값은 변수가 값이 할당되지 않았다는 의미로 자바스크립트 엔진에서 자동으로 할당하는 초깃값입니다.

다시 말해, 변수에 값이 할당되기 이전에는 자바스크립트 엔진이 변수의 초깃값으로 undefined를 할당합니다.

따라서, 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined를 반환합니다. 하지만, 변수에 다른 값을 할당하면 undefined 대신 할당한 값이 반환됩니다.

일반 변수에서 undefined

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

값을 할당하면 할당한 값을 반환합니다.

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

/* 값을 할당하면 할당한 값을 반환합니다. */
x = 1;
console.log(x); // 1

함수에서 undefined

자바스크립트에서는 함수도 값처럼 다룰 수 있습니다.

프로그래밍 언어에서 함수가 다른 값처럼 다루어질 수 있으면 일급 함수를 가진다고 합니다. 자바스크립트도 함수를 일급 함수로 다룹니다.

함수가 실행 후 return 키워드로 반환하는 값이 없으면 undefined를 반환합니다.
return 키워드로 반환하는 값이 있으면 그 값을 반환합니다.

JavaScript 일반 함수 
function x(a, b) {
    a + b; // return 키워드로 반환하는 값 없음
}

console.log(x(1, 2)); // undefined

function y(a, b) {
    return a + b; // return 키워드로 반환하는 값 있음
}

console.log(y(1, 2)); // 3

이는 화살표 함수에서도 동일합니다.

JavaScript 화살표 함수 
const x = (a, b) => {
    a + b; // return 키워드로 반환하는 값 없음
}

console.log(x(1, 2)); // undefined

const y = (a, b) => {
    return a + b; // return 키워드로 반환하는 값 있음
}

console.log(y(1, 2)); // 3

객체에서 undefined

객체에서도 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환합니다.

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

프로퍼티를 생성하고 값을 할당하면 할당한 값을 반환합니다.

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

/* 프로퍼티를 생성하고 값을 할당 */
obj.prop = 1;
console.log(obj.prop); // 1

배열에서 undefined

배열에서도 배열에 존재하지 않는 요소를 참조하면 undefined를 반환합니다.

자바스크립트에서는 배열도 객체입니다.
따라서, 배열에 없는 요소를 참조하는 것은 객체에서 존재하지 않는 프로퍼티를 참조하는 것과 같습니다.

JavaScript 
let arr = [];
console.log(arr[0]); // undefined

배열에 요소를 할당하면 할당한 값을 반환합니다.

JavaScript 
let arr = [];
console.log(arr[0]); // undefined

/* 배열에 요소를 할당 */
arr[0] = 1;
console.log(arr[0]); // 1

undefined의 데이터 타입

undefined 값의 데이터 타입은 Undefined입니다.
자바스크립트에서는 typeof 연산자로 변수의 데이터 타입을 확인할 수 있습니다.

부연설명
typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환하는 연산자입니다.

JavaScript 
let x;
console.log(typeof x); // "undefined"

이는 undefined가 고유한 데이터 타입을 가진 값임을 의미합니다.

조건문에서 undefined 평가

다음의 예제는 조건문에서 undefined 값을 평가하는 코드입니다.

JavaScript 
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

하지만, undefined 값을 boolean 타입으로 평가하면 false입니다.

JavaScript 
let x;

if (x) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "false로 평가됩니다."

// Boolean() 함수를 사용해서 평가
console.log(Boolean(x)); // false

주의할 점

undefined 값을 다룰 때에는 주의해야 할 점이 있습니다.

변수 자체가 선언되지 않았을 때

변수 자체가 선언되지 않았을 경우에는 undefined 값을 반환하지 않습니다.
Uncaught ReferenceError: ...is not defined 예외가 발생합니다.

undefined 값은 선언한 변수가 값이 할당되어 있지 않다는 의미의 값이지, 변수가 선언되지 않았다는 의미가 아닙니다.

JavaScript 
/* 값이 undefined인 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 */
if (y === undefined) { // Uncaught ReferenceError: y is not defined

}

하지만, typeof 연산자를 사용할 경우에는 다음과 같이 에러를 발생하지 않습니다.

JavaScript - 매우 주의할 점 
/* 값이 undefined인 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 */
if (typeof y === "undefined") { 
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

typeof y === "undefined"는 true로 평가됩니다.
이 점은 매우 주의해야 합니다. 변수가 선언되지 않았더라도 값이 할당되지 않은 변수와 동일하게 평가되기 때문입니다.

변수가 선언되었는지 여부를 확인하는 방법으로 try...catch 문의 사용을 고려할 수 있습니다.

JavaScript 
/* 값이 할당되지 않은 변수 x */
let x;

if (x === undefined) {
    console.log("true로 평가됩니다.");
} else {
    console.log("false로 평가됩니다.");
}
// 출력: "true로 평가됩니다."

/* 선언되지 않은 변수 y */
try {
    y; // 변수에 접근 시도
    console.log('변수가 선언되었습니다.');

} catch (error) {
    console.log('변수가 선언되지 않았습니다.'); 
}
// 출력: "변수가 선언되지 않았습니다."

변수에 의도적인 undefined 값 할당

간혹, 변수에 값이 없다는 의미로 undefined를 할당하는 경우가 있습니다.

개발자가 의도적으로 변수에 undefined 값을 할당하는 것은 권장하지 않습니다.
undefined 값은 '변수에 값이 할당되어 있지 않다'는 의미로 자바스크립트 엔진에서 자동으로 할당되는 값이라는 취지와 어긋날 뿐만 아니라 혼란을 줄 수 있습니다.

개발자가 변수에 값이 없다라는 것을 명시하고자 할 때에는 null 값을 사용하세요.
null 값은 자바스크립트에서 객체뿐 아니라 숫자와 문자열에서 '값이 없음'을 명시적, 혹은 의도적으로 가리킬 때 사용됩니다. undefined는 '할당된 값 자체가 없다'라는 뜻으로 null과는 차이가 있습니다.

JavaScript 권장하지 않음 
let x = undefined;
JavaScript 권장함 
let x = null;

나중에라도 변수나 프로퍼티에 값을 할당할 필요가 있다면 undefined 보다는 null이 더 적절합니다.

undefined 값의 올바른 이해

변수를 참조할 때 undefined가 반환되면 해당 변수의 값이 초깃값으로 할당되지 않았음을 쉽게 파악할 수 있습니다.
undefined 값은 자바스크립트에서 값이 할당되지 않은 변수를 나타내는데 사용되어야 합니다. 이는 undefined 값을 도입한 이유입니다.

명세서

undefined 값의 명세서 사양
명세서 사양
undefined ECMAScript® 2027 Language Specification
#sec-undefined

호환성

undefined 값의 호환성
값
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Node.js
Node.js
undefined 1 12 1 1 0.10

참고문헌

같이 보기