[JS] undefined, null 어떨 때 쓸까?
이번 포스팅은 자바스크립트에서 흔하게 볼 수 있는 undefined 와 null 에 대하여 이야기 하고자 한다. 도대체 언제 undefined 가 출력되고 null 이 나올까? 정말 많이 보는 데이터 타입인데 무심코 지나게 된다.
먼저 아래 코드를 통해 undefined 일 때 케이스를 확인해 보자
let a;위의 코드를 보면 a 라는 변수를 선언하면 메모리에 변수 영역에 a 라는 식별자가 저장되는데 값이 할당 되어있지 않는 상태이다. 만약 이 상태에서 a 를 출력하거나 실행하려고 하면 undefined 라는 결과가 나오는 것을 확인할 수 있다. 이것을 통해 우리가 알 수 있는 사실은 a 변수를 메모리에 선언하고 값이 할당되어 있지 않은 상태에서 자바스크립트 실행을 하면 Runtime 시 undefined 데이터 타입의 값을 출력한다는 것을 알 수 있다.
undefined 도 값이다
undefined 는 데이터 타입이자 값이다. 아무 것도 존재하지 않는 다는 표현의 값으로 생각하면 좋을 듯하다. 모든 변수에 값이 할당 되지 않는 경우 이 undefined는 값으로써 값이 할당되지 않은 모든 변수들이 자바스크립트 Runtime 시 할당되어 출력되게 된다.
아래 코드를 보자
let a;
let b = undefined;console.log(a); // undefined
console.log(a == b); // true
console.log(a === b); // true
b 의 경우는 undefined 를 명시적으로 선언하고 있다. 그리고 a 변수와 변수 b는 == 느슨한 동등 연산자와 === 타입까지 체크하는 동등 연산자를 통해 비교해보면 true 로 값과 타입까지 같다는 것을 확인 할 수 있다.
어찌 보면 당연한 이야기지만 불편한 코드는 바로 b 에 undefined 를 선언하는 코드이다. 심심치 않게 코딩을 하다보면 저런 코드를 볼 수 있었는데 과연 저렇게 사용하는 것이 맞을까 라는 생각이 든다.
null 은 뭐야?
undefined는 ‘없음'을 뜻하는 데이터 타입이다. 근데 자바스크립트에도 다른 정적 언어와 마찬가지로 null 이라는 데이터 타입이 존재한다. 아래 코드를 확인해 보자
const n = null;
console.log(typeof n);명시적으로 n 이라는 상수에 null 을 할당 하였다. undefined 와 마찬가지로 null 도 ‘없음'을 표현할 때 쓴다. 두 번째 줄의 typeof 를 하면 무엇이 나올까?
null 도 데이터 타입이기 때문에 null 이라는 출력값을 기대할 수 있겠지만 전혀 예상과 다른 값이 나온다.
두둥… 바로 object 참조데이터 타입이 나온다…. 이건 명백한 자바스크립트의 오류이다. ( 그래서 우린…. 더더욱.. 타입스크립트를 써야 한다.. -_-)
동등 연산자로 undefined 와 같이 아래 코드에서 비교해보도록 하겠다.
const n = null;console.log(n == undefined); // true
console.log(n == null); // true
console.log(n === undefined); // false
console.log(n === null); // true
n = null 로 선언된 n 과 느슨한 동등 연산자로 undefined 와 null 를 비교하면 없음을 의미하는 값으로써 같다 라는 true 가 출력이 된다. 반면 type 까지 체크해주는 === 연산자와 비교시 undefined 와는 다르다 라는 false 가 나온다. 없음을 의미하는 측면에서 두 타입은 같지만 데이터 타입이 다르기 때문에 다르다 라는 것을 알 수 있다.
그렇다면 언제 undefined 를 쓰고 null 을 써야할까?
언제 undefined 를 써야 할까 라는 질문에 답변은 쓰지 말아라 라는 답변이 적절치 않을까 싶다. 왜냐하면 개발자는 undefined 메시지를 볼 수 있는 케이스는 자바스크립트가 코드를 실행할 때 변수에 적절한 값이 할당 되어있지 않거나 아래 함수처럼 return 이 없는 함수를 실행할 때 undefined 를 출력하기 때문이다.
function a() { console.log(123) }고로, 자바스크립트 엔진이 코드를 실행할 때 없음을 표현하는 데이터 타입은 undefined 이기 때문에 이 케이스는 개발자가 아니라 엔진에서 리턴 했다고 생각하면 되고 null 은 개발자가 명시적으로 변수에 할당한 값 이기 때문에 필요한 곳에서 사용 했구나 라고 인식하면된다.
null은 GC 가 쓰지 않는 메모리를 수거할 때 유용하다
null은 대부분 없음을 표현한다고 알고 있지만 우리가 자바스크립트의 메모리를 효율적으로 관리하고 싶을 때 적절하게 쓸수 있다. 가령 예를들어 클로저 함수에서 함수 내부에서 사용하는 외부 변수의 경우 함수 내부를 리턴 받아 사용하다가 라이프 사이클이 종료되거나 로직상 더 이상 사용하지 않는 경우 외부 변수의 참조로 인해 메모리에서 사라지지 않는 현상이 발생할 수 있다. 그럴 때 명시적으로 null 로 할당해주면 GC 는 해당 함수가 참조하고 있는 변수를 메모리에서 삭제할 수 있기에 효율적인 메모리 관리가 가능해진다. 예를들어 코드로 표현하자면 아래와 같다.
function closure() {
let a = 1;
let b = 2;
return () => {
return {
a: a++,
b: b++
} }}let func = closure();
// 사용func(); // { a: 1, b: 2}
func(); // { a: 2, c: 3}
func(); // { a: 3, c: 4}func = null; // 사용 후 a, b 가 GC 에게 반납 될 수 있도록 func 를 null 처리
간단한 코드를 통해서 클로저 함수에서 어떻게 null 을 통해 메모리를 효율화 할 수 있는지 알아보았다.
이번 시간에 알아본 undefined 와 null 을 조금 더 명확히 쓰는 연습을 해보도록 하자!
