[JavaScript] null과 undefined

Moon·2024년 11월 3일
0

JavaScript | 기초

목록 보기
19/48
post-thumbnail

자바스크립트에서는 기본적인 자료형 외에도 nullundefined라는 특별한 자료형이 존재한다. 이 둘은 모두 "값이 없다"는 의미를 가지지만, 각각 다른 상황에서 사용되며 그 의미와 사용 목적이 다르다. 자바스크립트로 코드를 작성하다 보면 이 두 자료형을 자주 만나게 되는데, 정확하게 구분하지 못하면 코드 작성 중에 혼란을 겪을 수 있다.

null means “no object” undefined ⇒ “no value”


nullundefined의 의미

간단히 말하면, undefined는 변수가 선언되었으나 아직 값이 할당되지 않은 상태를 나타낸다. 반면에, null은 변수에 값이 '의도적으로' 없다는 것을 명시적으로 표현할 때 사용된다.

1. undefined

undefined는 자바스크립트에서 자동으로 할당하는 값으로, 변수가 선언되었지만 값이 정의되지 않은 상태를 의미한다. 즉, 변수는 존재하지만, 값을 아직 할당하지 않았다는 것을 나타낸다.

let cup;  // 변수를 선언하지만, 값을 할당하지 않음
console.log(cup);  // undefined 출력

위 코드에서 cup 변수는 선언되었지만, 아무런 값도 할당되지 않았다. 그래서 자바스크립트는 자동으로 undefined 값을 할당하고 이를 출력한다.

2. null

null개발자가 의도적으로 값이 없음을 나타내기 위해 사용하는 값이다. 변수를 선언하고, 명확하게 빈 값임을 표현하고 싶을 때 null을 할당한다.

let cup = null;  // 의도적으로 값을 비워둠
console.log(cup);  // null 출력

위 코드에서는 cup 변수에 의도적으로 '값이 없음'을 표현하기 위해 null을 할당했다. 이 경우는 '컵에 물이 있지만, 의도적으로 비우는 것'처럼 비유할 수 있다.


nullundefined의 차이

이 두 자료형은 비슷한 의미를 가지지만, 실제 코드에서 사용 의도와 상황이 다르다.

  • undefined는 변수가 선언되었지만, 아직 값을 할당하지 않았을 때 자동으로 할당되는 값이다. 즉, 자바스크립트가 자동으로 값이 없음을 나타낼 때 사용한다.
  • null은 변수가 비어 있다는 것을 개발자가 의도적으로 표현할 때 사용한다. 즉, '값이 없다'는 상태를 의도적으로 설정할 때 사용한다.

예시: nullundefined의 사용

1. undefined 예시

let message;
console.log(message);  // undefined 출력

message = "Hello, World!";
console.log(message);  // "Hello, World!" 출력

여기서는 변수를 선언했지만, 처음에는 값을 할당하지 않았기 때문에 undefined가 출력된다. 이후에 문자열을 할당하면 그 값이 출력된다.

2. null 예시

let cup = "물";  // 컵에 물을 담음
console.log(cup);  // "물" 출력

cup = null;  // 의도적으로 컵을 비움
console.log(cup);  // null 출력

이 예시에서는 처음에 cup에 "물"을 할당했다가, 이후에 의도적으로 값을 비우기 위해 null을 할당했다. 이는 명확하게 값을 비웠다는 것을 표현하는 방법이다.


nullundefined의 비교

이 두 값은 의미가 비슷하므로 혼란스러울 수 있지만, 자바스크립트에서 비교 연산을 할 때도 차이가 있다.

  • 동등 비교(==): nullundefined는 서로 동등하게 평가된다. 둘 다 "값이 없다"는 의미를 공유하기 때문이다.
  • 일치 비교(===): 자료형까지 비교할 때는 nullundefined서로 다르게 평가된다. null은 명시적으로 빈 값을 나타내는 것이고, undefined는 아직 값이 할당되지 않은 상태를 의미하기 때문에 자료형이 다르다.
console.log(null == undefined);  // true 출력 (동등 비교, 둘 다 '없음'을 의미)
console.log(null === undefined);  // false 출력 (일치 비교, 자료형이 다름)

undefined의 잘못된 사용 피하기

undefined는 자바스크립트가 자동으로 값을 할당할 때 사용되므로, 개발자가 의도적으로 undefined를 할당하는 것은 권장되지 않는다. 값이 없다는 것을 명확하게 표현하고 싶다면 null을 사용하는 것이 바람직하다.

let value = undefined;  // 권장하지 않음
let value2 = null;  // 값이 없다는 의도적 표현으로 null 사용

undefined자동으로 할당되는 값이기 때문에, 직접적으로 사용할 필요가 없다. 대신, 의도적으로 값을 비워둬야 할 때는 null을 사용하는 것이 더 적합하다.


비유로 이해하기: 빈 컵의 상태

이 개념을 쉽게 이해하기 위해 컵에 물을 담아 마시는 상황으로 비유해볼 수 있다.

  1. undefined: 빈 컵을 처음 가져왔을 때, 컵은 아직 아무것도 담기지 않은 상태다. 즉, 처음부터 비어있는 상태undefined로 표현할 수 있다.
  2. 값 할당: 컵에 물을 채우는 것은 변수에 값을 할당하는 것과 같다. 이 상태에서는 컵 안에 물이 담겨 있다.
  3. null: 물을 마시고 나서 의도적으로 컵을 비우는 것null로 표현할 수 있다. 즉, 값을 의도적으로 비워둔 상태를 나타낸다.
let cup;  // 컵을 선언했지만 아직 아무것도 담지 않음 (undefined)
console.log(cup);  // undefined 출력

cup = "물";  // 컵에 물을 담음
console.log(cup);  // "물" 출력

cup = null;  // 컵을 비움 (null)
console.log(cup);  // null 출력

요약

  • undefined: 값이 할당되지 않은 상태를 의미. 자바스크립트에서 자동으로 할당하는 값.
  • null: 의도적으로 값이 없음을 나타내는 상태. 개발자가 명시적으로 설정한 값.
  • 비교 연산: 동등 비교(==)에서는 nullundefined가 같게 평가되지만, 일치 비교(===)에서는 다르다.
  • undefined를 직접 사용하는 대신, null을 사용하는 것이 좋다. undefined는 자바스크립트가 자동으로 사용하는 값이기 때문에, 개발자는 null을 사용해 명시적으로 값을 비워야 한다는 의도를 표현하는 것이 더 바람직하다.
profile
MOON.DEVLOG

0개의 댓글