[자바스크립트] undefined와 null (feat 코어 자바스크립트)

 

 

 

 

 

 

들어가며

많은 기업들이 타입스크립트와 nest.js를 활용해서 서버 개발을 하곤 합니다. 취업을 하려면, 타입스크립트와 nest.js를 공부해서 실무를 익히는 것이 중요할 것입니다. 하지만 아직 자바스크립트의 기초도 없는 상태에서 타입스크립트와 nest.js를 공부하는 것이 맞을까 하는 생각이 들었습니다. 빠르게 기술변화를 적응하고, 러닝 커브를 줄이기 위해 빠르게 공부해야 하는 것도 맞겠지만, 그전에 언어의 기반이 되는 자바스크립트부터 제대로 알아야 하지 않을까 하는 생각이 들었습니다. 이 기회에 자바스크립트의 기본에 대해 정리해보고자 합니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Undefined

자바스크립트의 기본형 데이터에는 undefined, null가 있습니다. undefined과 Null은 의미는 같은 것 같지만 사용하는 목적 또한 다릅니다. 그중 먼저 undefined에 대해 살펴보겠습니다. undefined는 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다. 다음 세 경우가 이에 해당합니다. 

 

1. 값을 대입하지 않은 변수. 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 

2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때.

3. return 문이 없거나 호출되지 않는 함수의 실행 결과

 

 

let a;
console.log(a); // (1) undefined. 값을 대입하지 않은 변수에 접근

let obj = { a:1 };
console.log(obj.a); // 1
console.log(obj.b); // (2) 존재하지 않는 프로퍼티에 접근
console.log(b);     // c.f) ReferenceError: b is not defined

let func = function() { };
let c = func(); // (3) 반환(return) 값이 없으면 undefined를 반환한 것으로 간주.
console.log(c); // undefined

 

 

변수와 객체, 함수의 예시와는 다르게, 배열의 경우에 undefined에 대한 새로운 동작을 확인할 수 있습니다.

 

 

let arr1 = [];
arr1.length = 3;
console.log(arr1); // [empty x 3]

 

 

arr1 변수에 빈 배열을 할당하고, arr1 배열의 크기를 3으로 하겠습니다. 그리고 배열을 출력해보면, [empty x 3]이 출력됩니다. [empty x 3]는 배열의 빈 요소를 3개 확보했지만 확보된 각 요소에는 문자 그대로 어떤 값도, 심지어 undefined 조차도 할당돼 있지 않음을 의미합니다. 

 

 

let arr2 = new Array(3);
console.log(arr2); // [empty x 3]

 

 

그리고 arr2 변수에 new 연산자를 활용해서 Array 생성자 함수를 호출함으로써 배열 인스턴스를 생성했습니다. 이때 배열의 크기는 3으로 지정했습니다. arr2를 출력한 결과는 arr1과 같습니다. 

 

 

let arr3 = [undefined, undefined, undefined];
console.log(arr3); // [undefined, undefined, undefined]

 

 

한편 arr3 변수에서는 리터럴 방식으로 배열을 생성하면서 각 요소에 undefined를 부여했습니다. arr3의 콘솔 출력 결과는 arr1과 arr2의 결과와 다른 것을 확인할 수 있습니다. 이처럼 '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다릅니다. '비어있는 요소'는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외됩니다. 이래의 예를 통해 확인해보겠습니다. 

 

 

let arr1 = [undefined, 1];
let arr2 = [];
arr2[1] = 1;

 

 

예제 arr1은 undefined와 1을 직접 할당한 반면 arr2는 빈 배열의 인덱스 1에 값 1을 할당했습니다.

 

 

arr1.forEach((v, i) {console.log(v, i)});  // undefined 0 / 1 1
arr2.forEach((v, i) {console.log(v, i)});  // 1 1

arr1.map((v, i) { return v + i });  // [NaN, 2]
arr2.map((v, i) { return v + i });  // [empty, 2]

arr1.filter((v) { return !v });  // [undefined]
arr2.filter((v) { return !v });  // []

arr1.reduce((p, c, i) { return p + c + i }, '');  // undefined011
arr2.reduce((p, c, i) { return p + c + i }, '');  // 11

 

 

이 두 배열은 forEach, map, filter, reduce 등에서 서로 다른 결과를 출력합니다. undefined를 할당한 arr1에 대해서는 배열의 모든 요소를 순회해서 결과를 출력합니다. 그러나 arr2에 대한 결과를 보면, 각 메서드들이 비어 있는 요소에 대해서는 어떠한 처리도 하지 않고 건너뛰었음을 알 수 있습니다.

 

배열은 객체와 마찬가지로 특정 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 메모리의 식별자로 지정하고 데이터의 주솟값을 저장하는 등의 동작을 합니다. 즉, 사용자가 명시적으로 부여한 경우와 비어있는 요소에 접근하려 할 때 반환되는 두 경우의 'undefined'의 의미를 구분할 수 있습니다. 명시적으로 undefined를 작성하면, undefined는 그 자체로 값입니다. 이 때문에 순회의 대상이 될 수 있습니다. 한편 사용자가 아무것도 하지 않은 채로 접근했을 때 자바스크립트 엔진이 반환해주는 undefined는 해당 프로퍼티 내지 배열의 키값(인덱스) 자체가 존재하지 않음을 의미합니다. 그렇다면, undefined를 어떻게 활용해야 할까요?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Null

위에서 undefined에 대해 알아봤습니다. 만약 undefined 사용에 대해 혼란을 피하고 싶다면, '비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 쓰면 됩니다. undefined는 오직 '값을 대입하지 않은 변수에 접근하고자 할 때 자바스크립트 엔진이 반환해주는 값'으로서만 존재할 수 있습니다.

 

null은 한 가지 주의할 점이 있습니다. 바로 typeof null이 object라는 점입니다. 이는 자바스크립트 자체 버그입니다. 따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof 대신 다른 방식으로 접근해야 합니다.

 

 

let n = null;
console.log(typeof n) // object

console.log(n == undefined) // true
console.log(n == null) // true


console.log(n === undefined) // false
console.log(n === null) // true

 

 

4번째 줄과 같이 동등 연산자(==)로 비교할 경우 Null과 undefined가 서로 같다고 판단합니다. 따라서 어떤 변수가 실제로 null인지 아니면 Undefined인지는 동등 연산자로 비교해서는 알 수 없습니다. 이때 일치 연산자(===)를 써야만 정확히 판별할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마치며

자바스크립트의 기본에 대해 공부하면서, 기본도 정확하게 알지 못하고, 앞으로 나아가려 했구나 하는 생각이 들었습니다. 기초이기에 지금 공부하는 내용을 더 잘 이해해야겠다고 생각했습니다. 기본에 충실할 수 있는 개발자가 되고 싶습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

싸니까 믿으니까 인터파크도서