undefined, null 차이점

자바스크립트에서 없음을 나타내는 값은 undefined, null이 있다. 이 둘의 차이점에 대해 정리해보려고 한다.

undefined

값이 지정될 것이라고 예상되는 상황인데도 불구하고 값이 지정되지 않았을 때, 자바스크립트 엔진은 undefined를 반환한다. 아래와 같은 상황일 때, undefined를 반환한다. undefined는 원시값이다.

• 값을 대입하지 않은 변수
• 객체 내부의 프로퍼티가 없는데 접근할 경우
• return 문이 없거나 호출되지 않는 함수의 실행결과

 

값을 대입하지 않은 변수에 undefined가 할당된다고 이해하기 보다는 그 변수에 접근할 때, 할당되어 있지 않으면 undefined를 리턴하는 개념이다.

 

명시적으로 undefined 값을 할당해 줄 수도 있고, 값을 비워두면 undefined를 할당한다. 하지만, 두 상황은 배열의 경우 조금 다르게 동작한다. 배열의 크기를 정하고 값을 할당하지 않은 경우는 배열을 순회하는 작업을 할 때, 그 대상에서 제외된다. 하지만 명시적으로 undefined를 할당한 경우 undefined의 값으로 인식한다. (null의 경우에도 마찬가지)

const array1 = [undefined,1];
const array2 = [];
array2[1] = 1;
console.log(array1); //Array [undefined, 1]
console.log(array2); //Array [undefined, 1]
array1.forEach(function(v,i){console.log(v,i);}); 
// undefined 0
// 1 1
array2.forEach(function(v,i){console.log(v,i);}); // 1 1

null

비어있음을 명시적으로 나타내고 싶을 때, null을 사용한다. null은 애초에 이런 용도로 만들어졌다. 주의할 점은 null의 타입은 object 이다. 불리언 연산에서는 거짓으로 취급한다.

console.log(typeof null); //"object"

undefined와 null

let a = undefined;
let a1;
let b = null;
console.log(typeof a); // "undefined"
console.log(typeof a1); // "undefined"
console.log(typeof b); // "object"

null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
!null                // true
!undefined           // true

function getVowels(str) {
  const m = str.match(/[aeiou]/gi); // 해당되지 않음으로 값이 없음. 즉, null로 할당됨
  if (m === undefined) { 
    console.log("hi");
    return 0;
  }
  return m; // 리턴되는 값 : null
}

console.log(getVowels('sky')); // null

정리

undefined는 값이 지정될 것이라고 예상되나 지정되지 않았을 때, 접근하면 자바스크립트 엔진이 undefined를 리턴해준다. null은 명시적으로 없는 값을 지정해주고 싶을 때 사용한다. null은 object 타입이다.

 

둘의 차이를 가장 잘보여주는 것이 마지막 예시라고 생각한다. 위의 예시처럼 m에 값을 지정해주는데 그 값이 없다면 null로 지정되는 것이다. undefined는 선언하고 값 자체를 지정하지 않을 때 엔진이 리턴해주는 값이다. 

참고

코어자바스크립트(책), null MDN 사이트