본문 바로가기

Front-End: Web/JavaScript

[JS] undefined와 null의 차이점은?

반응형

계기

코드 리뷰 시간을 가지다가 'undefined와 null의 차이점은 아시죠?'를 질문 받았을 때 순간 멈칫했다. 생각해보니까 이때까지 둘의 차이점을 모르고 그냥 둘이 비슷하다고 생각만 하고 제대로 둘이 어떻게 다른지 모른 채 둘을 짬뽕하여 코드를 작성해왔었다는 것을 깨달았다.. 이번에 둘의 차이점을 공부하면서 앞으로 기초적인 것도 탄탄히 공부하여 좋은 개발자가 될 수 있도록 꼼꼼하게 공부하여야 겠다.

 

undefined vs null

우선 두 타입은 모두 '값이 없음'을 나타낸다. 두 타입이 어떻게 다른지 알아보자.

 

 

1. undefined Type

값이 할당되지 않은 변수

기본적으로 값이 할당되지 않은 변수는 undefined 타입을 가진다.

 

undefined 타입의 값은 'undefined'

undefined 타입은 'undefined'라는 값을 가지고 있다. 예로 들어서 let data; 와 같이 변수를 선언하면 data 변수에 undefined가 자동으로 할당된다. 그래서 data라는 변수를 선언했지만 값을 가진다.

변수의 초기값은 undefined이다. 따라서 undefined는 데이터 타입인 동시에 값이다!

 

 

2. null Type

값이 비어 있음

null 타입 변수는 명시적으로 '값이 비어있음'을 나타내는데 사용한다. 즉, 아무것도 참조하고 있지 않다는 의미다. 주로 객체를 담을 변수를 초기화할 때 사용한다.

 

null 타입의 값은 채워야 한다

둘의 다른 점은, 변수를 선언하면 자동으로 'undefined'로 할당이 되지만, null은 변수를 선언한 후에 null로 값을 채워야 한다는 것이다.

let nullValue = null;	// null 타입 변수 생성하기

 

아무 값도 갖지 않음

null은 보통 아무 값도 갖지 않음을 나타낼 때 사용한다. 즉, 특별한 값을 평가하는 키워드이다.

실제로 null은 전형적인 고유 값이며, 객체, 숫자, 문자열에서 '값이 없음(no value)'를 가리킬 떄 사용한다.

 

 

3. undefined vs null

null와 undefined의 차이점은 '등록'이다.

null은 값은 값이지만, 값으로서 의미 없는 특별한 값이 등록되어 있는 것이고, undefined는 등록이 되어 있지 않기 때문에 초기화도 정의되지 않은 것이다.

null은 선언, 등록을 하는 키워드이고, undefined는 미리 선언된 전역변수이다.

 

 

4. 주의점

동등연산자(==)

null과 undefined는 포괄적으로 둘 다 '값이 없음'을 나타내기 때문에 사용할 때 서로 바꿔 사용하는 경우도 종종 있다.

동등연산자(==)를 사용하면 null과 undefined 값이 같다고 간주가 된다. 따라서 이를 구별하기 위해선 엄격한 일치연산자(===)를 사용하자.

 

typeof null은 object

typeof undefined는 undefined이지만, typeof null은 object이다.

const nullVar = null;

console.log(typeof nullVar === null); // false
console.log(nullVar === null); // true

 

데이터를 null 값으로 초기화하는 경우

// number 변수 초기화
let data1 = 0;

// string 변수 초기화
let data2 = "";

// boolean 변수 초기화
let data3 = false;

// object 변수 초기화
let data4 = null;

null의 typeof는 object이기 때문에, object 변수를 초기화할 때 'null'을 사용한다.

 

 

 

 

 


참고 자료

https://nno3onn.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F 

 

TISTORY

나를 표현하는 블로그를 만들어보세요.

www.tistory.com

 

반응형