undefined와 null

  undefined와 null은 모두 값이 없음을 나타낸다. 그러나 자세히 살펴보면 둘은 다른 의미, 다른 목적을 갖고있다.

1. undefined

  프로그래밍을 하며 undefined값을 만날 수 있는 경우는 다음과 같다.

• 값을 대입하지 않은 변수에 접근할 때
• 객체(배열 등 포함)의 존재하지 않는 속성에 접근할 때
• return이 없는 함수의 실행 결과
• 프로그래머가 직접 undefined를 할당해주었을 때

let a;
function fn(){}
let arr1 = [];

a       //undefined
arr1[5] //undefined
fn()	//undefined

  프로그래머가 직접 undefined를 할당해주는 경우를 제외하면 undefined는 값이 없는 변수에 접근할 경우 JavaScript가 전달해주는 값이다. 위 코드는 모두 undefined가 반환된다.

 

let arr1 = [1, undefined]

arr1[2]  //undefined
arr1    //[1, undefined]

  arr1에 undefined라는 요소가 있을 때 arr1출력해보면 [1, undefined]가 출력된다. 그런데 arr1 배열의 범위를 넘는 요소(arr[2]) 에 접근하였을 때도 undefined가 나온다. 정말 arr1[2]의 값이 undefined라서 undefined가 출력된 것이라면 아래의 arr1을 출력할 때는 [1, undefined, undefined]가 나올 것이다. 하지만 그렇지 않다. JS는 arr[2]에서는 arr[2]가 없는데 값을 달라고 하니 어쩔 수 없이 undefined를 돌려준 것 뿐이고 arr1[1]은 프로그래머가 할당한 값이 undefined이므로 undefined를 돌려준 것이다. 이 두 케이스는 구분되어야 한다.

 

let arr2 = new Array(2);

arr2[0] //undefined
arr2    //[empty × 2]

for(let i in arr2)
    console.log(i) //X

  arr2에 길이를 지정해주고 arr2를 출력하면 [empty x 2]가 나오며 아래의 for문에서 console..log문장이 단 한 번도 실행되지 않는다. 배열이 선언될 때 바로 길이만큼 공간을 할당하는 것이 아니라 특정 인덱스에 값을 지정할 때 공간을 확보하기 때문이다. 따라서 arr2[0]라는 것은 객체의 존재하지 않는 속성과 동일하며 JS는 어쩔 수 없이 undefined를 돌려준 것이다. (많은 JS 입문서에 변수 선언 시 자동으로 undefined를 할당한다고 하지만 실제로는 그렇지 않다. 변수를 선언하기만 하면 아무 것도 할당하지 않으며 해당 변수에 접근하면 어쩔 수 없이 undefined를 반환한다.)

 

 

  프로그래머가 undefined를 만났을 때 JS가 어쩔 수 없이 반환하는 undefined와 프로그래머가 할당한 undefined 중 어떤 것을 의미하는지 헷갈릴 수 있다. 따라서 프로그래머는 '값이 없다'는 의미를 undefined가 아닌 null로 할당해주어야 이미가 명확히 구분될 것이다.

  

 

2. null

  프로그래머가 값이 없음을 직접 할당해주고 싶을 때는 null을 사용한다. 이 때 주의할 점은 null의 typeof 결과는 object라는 점이다. 따라서 null을 체크할 때는 ===(strict Equality) 를 사용하여 null과 비교해주어야 한다. 또한 이러한 성질을 이용하여 객체가 담길 변수를 초기화할 때 null값을 사용하기도 한다.

let student1 = null;
student1 = new Student('ihl'); //임의의 객체 할당
if(student1 === null){
  console.log("no one")
}

 

---

관련된 포스팅

2021/01/01 - [Javascript] - ??(null 병합 연산자)

---

참고서적

코어 자바스크립트