6-1.undefined와null.md

back    |    write by Santos

6-1. undefined와 null

---

* 이 글은 코어자바스크립트 책을 참고하여 기록하였습니다.

undefined는 어떤 변수에 값이 존재하지 않을 경우, null은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값.

1. undefined

사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 javaScript 엔진이 자동으로 부여하는 경우도 존재합니다. 하지만 보통은 javaScript 엔진이 자동으로 부여하는 경우가 많기 때문에 이에 대해 알아봅시다.

예시 1 (javaScript 엔진이 undefined를 할당하는 경우) 😎

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

var obj = { a: 1} 
console.log(obj.a); // 1
console.log(obj.b); // undefined (2)존재하지 않는 프로퍼티에 접근

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

* 예시를 통해 알아야 할 것들 🤔

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

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

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

그러나 배열의 경우는 조금 특이한 동작을 함.

예시 2 (undefined와 배열) 😎

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

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

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

* 예시를 통해 알아야 할 것들 🤔

1. arr1, arr2에서는 빈 배열을 만들고 배열의 크기를 3으로 설정, [empty x 3]을 출력

2. arr3 에서는 각 요소에 undefined를 부여, [undefined, undefined, undefined]로 출력

-  비어있는 요소와 undefined를 할당한 요소의 출력 결과가 다르다는 것을 알수 있음. '비어있는 요소'는 순회와 관련된 많은 배열 메서들의 순회 대상에서 제외.

예시 3 (빈 요소와 배열의 순회) 😎

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

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

arr1.map(function(v, i) { console.log(v + i) }) // [NaN, 2]
arr2.map(function(v, i) { console.log(v + i) }) // [empty, 2]

arr1.filter(function(v, i) { console.log(!v) }) // [undefined]
arr2.filter(function(v, i) { console.log(!v) }) // []

arr1.reduce(function(p, c, i) { console.log(p + c + i); }) // undefined011
arr2.reduce(function(p, c, i) { console.log(p + c + i); }) // 11

* 예시를 통해 알아야 할 것들 🤔

1. arr1은 undefined와 1을 직접 할당한 반면, arr2는 빈 배열의 인덱스 1에 1을 할당.

2. array의 메소드(map, filter, reduce)를 사용해본 결과 arr1은 일반적으로 배열의 모든 요소를 순회해서 결과를 출력하는 반면, arr2는 비어있는 요소에 대해서는 어떠한 처리도 하지 않고 건너 뛰었음.

-  배열도 객체이기 때문에 값이 지정되지 않은 인덱스는 '아직 존재하지 않는 프로퍼티'로 인식, 객체와 마찬가지로 특정 인덱스에 값을 지정할 때 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터의 주소값을 저장하는 등의 동작을 함.

- 사용자가 명시적으로 undefined를 부여한 경우와 javaScript 엔진이 부여한 경우, 이 두 경우는 엄연히 다름 

- 사용자가 명시적으로 부여한 경우의 undefined는 그 자체로의 값. 따라서 순회의 대상이 될 수 있음.

- javaScript 엔진이 부여한 경우 undefined는 해당 프로퍼티 내 인덱스 자체가 존재하지 않아 순회 대상이 될 수 없음.

- 두 가지의 특징을 지니고 있는 undefined는 혼란스러움을 가중시킬 수 있기 때문에, undefined는  '값을 대입하지 않는 변수에 접근'할때, 즉 javaScript 엔진이 반환해 주는 값으로면 사용하고, null이라는 데이터를 이용하여 '비어있음'을 명시적으로 표현하고 싶을 때 사용합니다.

2. null

null은 '비어있음'을 명시적으로 나타내고 싶을 때 사용가능한 값입니다. 또한 typeof null을 찍었을때 반환하는 데이터는 object이기 때문에 어떤 변수의 값이 null인지 여부를 판별하기 위해서는 다른 방법을 사용해야 하는 문제가 존재합니다.

예시 1 (undefined와 null의 비교) 😎

var 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

* 예시를 통해 알아야 할 것들 🤔

1. 동등 연산자로 '=='로 비교할 경우 null과 undefined가 서로 같다고 판단.

2. 일치 연산자 '==='로 비교할 경우 null과 undefined는 서로 다르다고 판단.

-  정확한 값을 비교하기 위해 동등 연산자보다 일치 연산자를 사용하는 것이 중요하다.

읽어 주셔서 감사합니다.

---

<참고자료>

[책] #코어자바스트립트 - 정재남 지음 -

<데이터타입> undefined와 null end

---