undefined 값의 개념

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 연산자는
피연산자의 데이터 타입을 문자열로 반환하는 연산자입니다.

자바스크립트 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과는 차이가 있습니다.

자바스크립트 null 값
JavaScript 권장하지 않음 
let x = undefined;
JavaScript 권장함 
let x = null;

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

undefined 값의 올바른 이해

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

명세서

undefined 속성과 값의 명세서 사양
명세서 사양
undefined ECMAScript Language Specification
#sec-undefined

브라우저 호환성

undefined 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
undefined 1 12 1 1

참고 문헌

  • MDN - undefined
  • 모던 자바스크립트 Deep Dive(저자 이웅모) 2020 - 데이터 타입 - undefined 타입: 65~ 67쪽
  • 자바스크립트 완벽 가이드(저자 데이비드 플래너건) 2011 - 타입, 값, 변수 - null과 undefined: 51~25쪽

같이 보기