[JavaScript] undefined와 null 차이

null과 undefined는 모두 JavaScript에서 "값이 없음" 또는 "정의되지 않음"을 나타내는 값이지만, 둘 사이에는 분명한 차이가 있다

 

 

null과 undefined 두 개념은 JavaScript의 타입 시스템에서 중요한 부분을 차지하며, 각자의 의미와 사용 목적이 다르다. null과 undefined의 차이를 알아보자.

 

 

undefined: 정의되지 않은 값

undefined는 JavaScript에서 "변수는 선언되었지만 값이 할당되지 않은 상태" 또는 "정의되지 않은 상태"를 의미한다.

undefined의 특징

• 자동 할당된 값: 선언만 하고 초기화하지 않은 변수는 자동으로 undefined 값을 가진다.

let a;
console.log(a);  // undefined

 

• 함수의 인자: 함수 호출 시 인자를 전달하지 않으면 그 인자는 자동으로 undefined가 된다.

function test(a) {
    console.log(a);  // undefined
}
test();

 

• 리턴값이 없는 함수: 명시적으로 값을 반환하지 않는 함수는 기본적으로 undefined를 반환한다.

function test() {
    // 아무것도 반환하지 않음
}
console.log(test());  // undefined

 

• 객체 속성/배열 요소가 존재하지 않을 때: 존재하지 않는 객체의 속성이나 배열의 요소에 접근하려고 하면 undefined가 반환된다.

const object = {};
console.log(object.someProp);  // undefined

const array = [1, 2, 3];
console.log(array[5]);  // undefined

 

• 타입: undefined는 JavaScript의 기본 타입 중 하나이며, 그 자체로 값을 가지고 있다.
• 의미: 변수가 선언되었지만 아직 값이 할당되지 않았다는 의미이다.
• 자동 할당: 변수를 선언하고 초기화하지 않거나 함수 호출 시 인자를 넘기지 않으면 자동으로 undefined가 할당된다.

 

 

null: 명시적인 "없음"

null은 JavaScript에서 "값이 없음" 을 명시적으로 나타내기 위해 사용되며, 프로그래머가 의도적으로 값이 없다는 것을 나타내기 위해 할당하는 값이다.

null 특징

• 명시적인 할당: null은 프로그래머가 명시적으로 변수에 값이 없다는 것을 표현하기 위해 직접 할당하는 값이다.

let a = null;
console.log(a);  // null

 

• 객체를 가리키지 않음: null은 "객체가 없음을 나타내는 값"으로도 사용되며. 예를 들어, 객체에 대한 참조가 없음을 나타내기 위해 null을 할당할 수 있다.

let person = {
    name: "Kim",
    age: 38
};
person = null;  // person이 더 이상 객체를 참조하지 않음

 

 

타입: null은 객체(Object) 타입의 특별한 값이며, JavaScript의 초기 설계 시 발생한 오류로 인해 발생한 결과이다.

null은 객체 타입이지만 실제로는 객체가 아니며, JavaScript의 설계 결함 중 하나로 여겨진다.

• 예를 들어, typeof null을 출력하면 "object"가 나온다. 하지만 null은 객체가 아니고, 특정 값이 없음을 나타낸다.

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

 

null과 undefined 차이점 비교

타입	undefined (타입 자체가 undefined)	object (버그로 인해 객체로 표시됨)
기본값/자동 할당	변수가 선언되었으나 초기화되지 않았을 때	명시적으로 "값이 없음"을 나타내기 위해 사용
의미	변수가 선언되었으나 값이 없음을 의미	명시적으로 "값이 없다"는 것을 나타냄
호출 시 함수 반환값	리턴 값이 없는 함수의 기본 반환 값	함수가 명시적으로 반환하는 값
프로그램 내 용도	값이 할당되지 않았음을 나타냄	의도적으로 빈 상태 또는 값이 없음을 표현

 

 

유사점과 동등 비교

• 유사점: 둘 다 값이 없음을 나타낸다는 점에서 유사하지만, undefined는 JavaScript 엔진에 의해 자동으로 할당되며, null은 프로그래머가 명시적으로 할당함.
• 동등 비교 (==)와 일치 비교 (===)

==로 비교할 경우 null과 undefined는 동등하다고 간주되며, 값이 없다는 의미에서는 같은 취급을 받는다.

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

 

 

undefined와 null에 대한 예시를 좀 봐보자.

 

 

undefined 함수에서 필수 인자가 전달되지 않았을 때

function test(name) {
  if (name === undefined) {
    console.log("Name is not provided!");
  } else {
    console.log("Hi, " + name);
  }
}
test();  // Name is not provided!

 

변수 초기화 전 상태

let result;
console.log(result);  // undefined

 

 

 

null  API 호출에서 데이터가 존재하지 않음을 명시적으로 표현

function fetchUserInfo(id) {
  // 사용자를 찾을 수 없을 때 null을 반환
  if (id !== 1) {
    return null;
  }
  return { id: 1, name: "Kim" };
}

let user = fetchUserInfo(2);
if (user === null) {
  console.log("User not found!");
}

 

객체를 더 이상 참조하지 않을 때

let person = { name: "Kim" };
person = null;  // person이 더 이상 참조되지 않음

 

결론적으로 undefined와 null에 차이는 이렇게 될것이다.

• undefined: JavaScript 엔진이 자동으로 할당하는 값이며, 변수가 선언되었지만 초기화되지 않았거나, 함수가 명시적인 반환 없이 종료되었을 때, 그리고 객체의 존재하지 않는 속성에 접근하려고 할 때 반환된다.
• null: 프로그래머가 "의도적으로 "값이 없다" 는 것을 표현하기 위해 할당하는 값이며, 주로 객체 참조가 없음을 나타내거나, 의도적으로 빈 상태를 나타낼 때 사용된다.

두 값의 차이를 이해하고 상황에 맞게 사용하자 ! 

 

2024.08.28 - [JavaScript] - [JavaScript] const, var , let 변수 선언 차이점

[JavaScript] const, var , let 변수 선언 차이점

2024.08.26 - [JavaScript] - [JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

[JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

2024.08.26 - [JavaScript] - [JavaScript] TDZ(Temporal Dead Zone)란?

[JavaScript] TDZ(Temporal Dead Zone)란?