자, 일단 undefined에 대한 사적적의미를 살펴보자. "한정되지 않은, 확실하지 않은"이라는 뜻이다. 일단 defined의 반대의 의미니 defined뜻도 한번 알아보자. "정의된"이라는 뜻이란다.
단 이번 포스팅에서는 undefined는 "정의되지 않은"으로 해석을 진행 하려고 한다.
(사실 정의하다. 라는 말은 함수에서나 사용 하는 단어이니, 다른 개발자와 의사소통할 땐, 주의해야한다.)
기본적으로 우리 자바스크립트 개발자가 설명하는, null과 undefined의 사용방식의 차이를 생각해보도록 하자.
let foo = null;
let bar;
위와 같이 선언을 한 경우, foo의 경우에는 의도적으로 null값을 넣어, 아직 할당 되지 않은 상태를 표현한다. bar의 경우에도 모든 변수의 초기값은 undefined로, 정의 되지 않은 상태를 표현한다. 자 그럼 다음 코드를 보자.
const obj = {
a: null
}
console.log(obj.a)
console.log(obj.b)
우리는 obj.a의 값은 null이고, obj.b의 값은 undefined라고 생각 하게 된다. 자 여기서 이상한 말이 생겼다. obj.b의 값이 undefined라고 생각하게 된다. 자 이 말이 왜 어색 할까? undefined는 정의가 되지 않았다라는 뜻 아닌가?
const obj = {
a: null,
b: undefined
}
실제로 위와 같이 작성해야 우리는 obj.b의 값이 undefined라고 말을 해야 하지 않은가? 여기서 undefined를 사용해서는 안되는 이유를 하나 이야기 해보자.
obj.b의 값이 undefined에요.
위와 같은 말을 하였을 때, obj.b의 값이 undefind라는 말일까? obj.b가 정의되지 않은 상태라는 것을 말하는 것일까?
키의 순회
const obj = {
a: null
}
Object.keys(obj) // ['a']
obj.b = undefined
Object.keys(obj) // ['a', 'b']
자 우리는 obj의 값을 순회하면서, 어떠한 행위를 진행하려고 했을 때, obj.b의 값이 정의되었는지, undefined의 값을 할당 되었는지에 따라, 처리를 수정하여야 한다.
위에서 보듯이, undefined의 경우 Object에서 오류가 발생하는 것을 볼 수 있다. 하지만, 당연하게도, Array에서도 문제가 발생한다.
우리는 empty와 undefined를 구분을 할 수 없다.
const arr1 = []
arr1.length = 4
console.log([...arr1]) // [undefined, undefined, undefined, undefined]
console.log(arr1.map(v => v * 2)) // [empty × 4]
const arr2 = []
arr2.length = 4
arr2.fill(undefined)
console.log([...arr2]) // [undefined, undefined, undefined, undefined]
console.log(arr2.map(() => 1)) // [1, 1, 1, 1]
우리가 undefined로 값을 정의하는 순간을 아마 초기화 시일 것이다. 위처럼, length를 지정하여, 값을 empty로 만드는 경우와 fill까지 사용하여, undefined로 초기화 하는 경우 의미가 달라진다. 당연하게도 Object에서 우리를 괴롭혔던, Object.keys또한, empty에서는 빈 배열이지만, undefined에서는 key가 존재한다.
결론
결론을 지어보면, 우리는 undefined를 사용하는 순간, key가 정의 되지 않은 것인지, 값이 정의되지 않은 것인지, 값이 undefined인지 알 수가 없는 상태가 되어 버린다.
이는 확실하지 않은 것을 좋아하지 않는 개발자라면.... 혐오스럽게 느껴질테니 undefined는 없는 키워드라고 생각하며, 개발을 하자.
댓글
댓글 쓰기