[JS📜] Undefined와 null의 차이점, check

해당 포스팅은 자바스크립트에서 undefined와 null의 공통점과 차이점. 해당 값을 체크하는 방법에 대해 다룹니다.

Null

null은 JavaScript의 원시 값중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.

-MDN-

console.log(!null); // true
console.log(!!null); // false

console.log(null === false); // false
console.log(!null === true); //true

// null => math =>0
console.log(null + 123) //123
console.log(typeof null); // object'

null 자체는 불리언 값을 가지지 않지만 !null 즉 null이 아니라면 true 값을 가진다. 그럼 !!null은 false을 가진다. null 자체를 불리언 값과 비교할 수 없지만 !null 은 가능하다

null은 수학적으로 0을 의미한다. 만약 null을 포함해서 수학식을 계산한다면 아무런 오류 없이 처리된다.

null의 타입은 object이다. 어째서 null은 원시 값이면서 type이 object일까. 처음 자바스크립트를 구현할 때 type tag + value 형태로 값을 저장했다. 타입코드의 예를 들어 object는 000, int는 1, double은 010, srtring은 100이다. null은 아무것도 없다는 null pointer(0x00)로 표시하기 위해서 타입태그 0을 가진다. 따라서 typeof에서 object를 반환한다.

Undefined

전역 undefined 속성은 undefined 원시값을 나타내며, JavaScript의 원시 자료형 중 하나이다.

-MDN-

let varb;

console.log(varb); // undefined
console.log(!undefined); //true;

console.log(undefined + 10); //NaN

console.log(undefined == null); //true;
console.log(undefined === null); //false
console.log(!undefined === !null); // true

console.log(typeof undefined); // undefined

undefined는 변수를 선언하고 아무런 값을 할당하지 않으며 나타난다. null과 값이 그 자체로는 불리언 값을 가지지 않지만 !undefined 한다면 true값이 나온다.

undefined는 수학적으로 NaN를 의미한다. 만약 undefind를 포함해서 수학식을 정의하면 결과값은 NaN(Not a number)가 나온다.

undefined의 타입은 undefined이다.

undefined와 null을 비교시 동등 연산자(==)는 일치연산자(===)의 값이 다르다. undefined == null 을 한다면 값이 true이다. 자동으로 undefined의 불리언 값을 읽어와서 처리하기 때문이다. 하지만 일치 연산자로 엄격하게 비교한다면 undefined === null 둘은 전혀 다른 값이라고 나온다. 하지만 여기서 !undefined === !null 한다면 이미 불리언 값으로 전환 되었기 때문에 같은 값으로 여겨진다.

요약

 

	null	undefined
의미	의도적으로 어떤 값이 비어있음	값이 없거나 정의되지 않음
숫자	0	NaN
타입	object	undefined

이렇듯 null과 undefined는 혼란한 점이 많다. 최선은 사용하지 않거나 팀에서 우리는 비어있는 값을 null로 정의하자 아니면 undefined로 정의하자라고 합의하는 것이다.

null, undefined값 체크하는 방법

사용중인 함수 인자에 null, undefined가 들어오면 대부분 오류가 나고 최악의 경우 런타임 에러가 발생할 것이다. null, undefined값이 들어왔는지 확인하는 건 거의 필수적인 요소이다.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

이 때 ES5에 추가된 optional chainging 연산자(?.)를 사용하면 참조값이 nullsih, null, undefined이면 에러를 발생하는 것 대신에 undefined를 반환한다.

function printName(name) {
	//1 이것과
	if(name === undefined || name === null){
		return '사람이 없네요.';
	}
	//2 이것은 결과가 같음
	if(!name){
		return '사람이 없네요.';
	}

	return '안녕하세요 ' + name + '님';
}

자바스크립트의 Falsy(거짓 같은 값) 특징을 활용해서 조건문에 ! 부정문을 사용해서 결과를 리턴하는 방법도 존재한다. 철저한 검사가 필요한 경우는 1번의 경우가 낫지만, 간단한 검사가 필요한 경우는 2번처럼 사용하는 것이 편하다.

---

참고 자료

https://eyabc.github.io/Doc/dev/core-javascript/객체 기본 문법.html#리터럴-이외의-객체-생성-지양-이유

udemy 자바스크립트 클린코드 강의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/null