undefined null 차이점

undefined

1. 사용자가 명시적으로 지정하는 경우
2. 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우
   (2-1). 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
   (2-2). 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
   (2-3). return문이 없거나 호출되지 않는 함수의 실행 결과

(2-1. 자동으로 undefined 부여) 

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

 

(2-2. 자동으로 undefined 부여)

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

 

(2-3. 자동으로 undefined 부여)

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

 

 

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]

• arr1) 빈 배열을 만듦
  배열의 크기를 3을 줌
  [empty x 3] 출력
  👉🏻 배열에 3개의 빈 요소를 확보했지만 확보된 각 요소에는 문자 그대로 어떤 값도, undefined조차 할당돼있지 않음
• arr2) new 연산자와 함께 Array 생성자 함수를 호출해 배열 인스턴스 생성
  배열의 크기 3으로 지정
  [empty x 3] 출력
  👉🏻 배열에 3개의 빈 요소를 확보했지만 확보된 각 요소에는 문자 그대로 어떤 값도, undefined조차 할당돼있지 않음
• arr3) 리터럴 방식으로 배열 생성 
  각 요소에 undefined 부여

✅ '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다르다.
'비어있는 요소'는 순회와 관련된 많은 배열 메서드드르이 순회 대상에서 제외된다.

var arr1 = [undefined, 1];
var arr2 = [];
console.log(arr2); //[]
arr2[1] = 1;
console.log(arr2); //[empty, 1]

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

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

arr1.filter(function (v) {
    return !v; // [undefined]
});
arr2.filter(function (v) {
    return !v; // []
});
arr1.reduce(function (p, c, i) {
    return p + c + i;
}, ""); // undefined011
arr2.reduce(function (p, c, i) {
    return p + c + i;
}, ""); // 11

• arr1은 undefined와 1을 직접 할당
  arr2은 빈 배열의 인덱스 1에 값 1을 할당
  👉🏻 forEach, map, filter, reduce에서 서로 다른 결과를 보임
• 값을 대입하지 않은 변수는 아무것도 할당하지 않고 끝나며
  할당이 안 된 변수에 접근하고자 할 때 비로소 'undefined'를 반환하는 것

 

undefined와 null의 차이 비교

같은 의미를 가진 null이라는 값이 별도로 있는데 굳이 undefned를 써야 할 이유가 없다.

'비어있음'을 사용자가 명시적으로 나타낼 경우 undefined가 아닌 null을 써야 한다.(명시적 undefined는 지양할 것)

애당초 null은 비어있는 값을 표현하고자 만들어진 것이다.

위와 같은 규칙을 따른다면 undefined는 오직 '값을 대입하지 않은 변수에 접근하고자 자바스크립트 엔진이 반환해주는 값'으로만 존재할 수 있다.

✅ null을 사용할 때 주의해야 할 점
typeof null이 object라는 점인데 이것은 자바스크립트 자체의 버그이다. 
따라서 어떤 변수의 값이 null인지 여부를 판별하기 위해서 typeof 대신 다른 방식으로 접근해야 한다.

👉🏻 동등 연산자 ==가 아닌, 일치 연산자 ===를 써야 정확히 판별할 수 있다.

const 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