자바스크립트에서는 기본적인 자료형 외에도 null과 undefined라는 특별한 자료형이 존재한다. 이 둘은 모두 "값이 없다"는 의미를 가지지만, 각각 다른 상황에서 사용되며 그 의미와 사용 목적이 다르다. 자바스크립트로 코드를 작성하다 보면 이 두 자료형을 자주 만나게 되는데, 정확하게 구분하지 못하면 코드 작성 중에 혼란을 겪을 수 있다.
null means “no object” undefined ⇒ “no value”
null과 undefined의 의미
간단히 말하면, 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을 할당했다. 이 경우는 '컵에 물이 있지만, 의도적으로 비우는 것'처럼 비유할 수 있다.
null과 undefined의 차이
이 두 자료형은 비슷한 의미를 가지지만, 실제 코드에서 사용 의도와 상황이 다르다.
undefined는 변수가 선언되었지만, 아직 값을 할당하지 않았을 때 자동으로 할당되는 값이다. 즉, 자바스크립트가 자동으로 값이 없음을 나타낼 때 사용한다.null은 변수가 비어 있다는 것을 개발자가 의도적으로 표현할 때 사용한다. 즉, '값이 없다'는 상태를 의도적으로 설정할 때 사용한다.
예시: null과 undefined의 사용
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을 할당했다. 이는 명확하게 값을 비웠다는 것을 표현하는 방법이다.
null과 undefined의 비교
이 두 값은 의미가 비슷하므로 혼란스러울 수 있지만, 자바스크립트에서 비교 연산을 할 때도 차이가 있다.
- 동등 비교(
==):null과undefined는 서로 동등하게 평가된다. 둘 다 "값이 없다"는 의미를 공유하기 때문이다. - 일치 비교(
===): 자료형까지 비교할 때는null과undefined가 서로 다르게 평가된다.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을 사용하는 것이 더 적합하다.
비유로 이해하기: 빈 컵의 상태
이 개념을 쉽게 이해하기 위해 컵에 물을 담아 마시는 상황으로 비유해볼 수 있다.
undefined: 빈 컵을 처음 가져왔을 때, 컵은 아직 아무것도 담기지 않은 상태다. 즉, 처음부터 비어있는 상태를undefined로 표현할 수 있다.- 값 할당: 컵에 물을 채우는 것은 변수에 값을 할당하는 것과 같다. 이 상태에서는 컵 안에 물이 담겨 있다.
null: 물을 마시고 나서 의도적으로 컵을 비우는 것을null로 표현할 수 있다. 즉, 값을 의도적으로 비워둔 상태를 나타낸다.
let cup; // 컵을 선언했지만 아직 아무것도 담지 않음 (undefined)
console.log(cup); // undefined 출력
cup = "물"; // 컵에 물을 담음
console.log(cup); // "물" 출력
cup = null; // 컵을 비움 (null)
console.log(cup); // null 출력
요약
undefined: 값이 할당되지 않은 상태를 의미. 자바스크립트에서 자동으로 할당하는 값.null: 의도적으로 값이 없음을 나타내는 상태. 개발자가 명시적으로 설정한 값.- 비교 연산: 동등 비교(
==)에서는null과undefined가 같게 평가되지만, 일치 비교(===)에서는 다르다.undefined를 직접 사용하는 대신,null을 사용하는 것이 좋다.undefined는 자바스크립트가 자동으로 사용하는 값이기 때문에, 개발자는null을 사용해 명시적으로 값을 비워야 한다는 의도를 표현하는 것이 더 바람직하다.
