[Javascript] null, undefined, ‘’ 뭐가 다를까? API 데이터 처리하면서 제대로 이해하기

개발하다 보면 값이 없는 것 같은데 실제로는 서로 다르게 동작하는 값들이 있다.
바로 null, undefined, ''이다.

처음에는 셋 다 그냥 "값이 없는 상태 아닌가?" 싶었는데, 실제로 API 데이터를 받고 props로 넘기거나 이미지 경로, 클래스명을 동적으로 처리하다 보면 이 차이가 꽤 중요하게 느껴졌다.

이번 글에서는 null, undefined, ''의 차이를 정리해보려 한다.

 

1. null, undefined, ’’는 뭐가 다를까?

먼저 간단하게 정리하면 다음과 같다.

값 의미

undefined	값이 아직 정의되지 않았거나 전달되지 않음
null	값이 없다는 것을 의도적으로 명시함
''	문자열 값은 존재하지만 내용이 비어 있음

겉으로 보면 모두 값이 없는 것처럼 보이지만, JavaScript에서는 서로 다른 값이다.

null === undefined // false
'' === null // false
'' === undefined // false

2. undefined는 값이 정의되지 않은 상태

undefined는 말 그대로 아직 값이 정의되지 않은 상태다.

let name;
console.log(name); // undefined

객체에 존재하지 않는 값을 가져와도 undefined가 나온다.

const user = {
  name: 'javascript',
};
console.log(user.age); // undefined

즉 undefined는 보통 값이 아직 들어오지 않았거나, 해당 필드가 존재하지 않는 상태라고 이해하면 쉽다.

3. class=“area-undefined”는 왜 생길까?

개발자도구를 보다 보면 가끔 이런 클래스를 보게 된다.

<div class="el--undefined"></div>

 

왜 이런 값이 생겼을까?
예를 들어 클래스명을 이렇게 만들었다고 해보자.

const className = `el--${type}`;

그런데 type에 아무 값도 들어오지 않았다면, type === undefined 상태이기 때문에, 문자열 조합 결과가 그대로 class="el--undefined"가 된다.

 

즉, undefined라고 해서 문자열 안에서 자동으로 사라지는 것은 아니다. 필요하다면 미리 조건 처리를 해줘야 한다.

const className = type ? `el--${type}` : 'el';

4. null은 “값이 없음”을 의도적으로 표현한 상태

null은 undefined와 조금 다르다.

 

const imgSrc = null;

위 코드는 개발자가 직접 이 값은 현재 없다고 명시한 상태에 가깝다.
API에서도 값이 존재하지 않을 때 null을 내려주는 경우가 많다.

 

이 경우 profileImage라는 필드는 존재하지만, 현재 이미지 값이 없다는 의미로 볼 수 있다.

{
  name: 'javascript',
  profileImage: null
}

 

그래서 조건문에서 이런 코드도 자주 볼 수 있다. imgSrc가 정확히 null인가? 를 확인하는 조건이다.

imgSrc === null

 

5. ’’는 값이 없는 게 아니라 빈 문자열

const imgSrc = '';

typeof ''; // 'string'

''는 null이나 undefined와 다르다. 이 값은 분명히 문자열이다.
다만 문자열 안에 아무 내용이 없는 상태다.

 

6. null 조건 처리는 어떻게 할까?

다음과 같은 코드는 문법적으로 맞다.

img.src !== null ? img.src : ''

 

 

img.src가 null이 아니라면 img.src 사용하고, null이라면 '' 사용하라이다.
하지만 여기서 하나 주의할 점이 있다.
이 조건은 undefined를 걸러내지 못한다.

const imgSrc = undefined;
imgSrc !== null; // true

왜냐하면 undefined는 null이 아니기 때문이다.
따라서 undefined가 그대로 사용될 수도 있다.

7. 그래서 사용하는 ?? 연산자

null과 undefined를 한 번에 처리할 때 자주 사용하는 것이 ??이다.

값 ?? 대체값

왼쪽 값이 null 또는 undefined이면 오른쪽 값을 사용한다.

null ?? 'default' // 'default'
undefined ?? 'default' // 'default'

반대로 값이 있다면 왼쪽 값을 그대로 사용한다.

'hello' ?? 'default' // 'hello'

8. 그런데 ‘’ ?? ‘default’는 왜 default가 안 나올까?

'' ?? 'default' //''

이유는 ??가 오직 다음 null, undefined 두 값만 없는 값으로 보기 때문이다.
''는 빈 문자열이지만 정상적인 문자열 값이다.

 

null ?? 'default' // 'default'
undefined ?? 'default' // 'default'
'' ?? 'default' // ''
0 ?? 'default' // 0
false ?? 'default' // false

9. ||는 뭐가 다를까?

||도 기본값 처리에 자주 사용한다.

imgSrc || defaultImg

하지만 ||는 ??보다 더 많은 값을 없는 값처럼 처리한다.

null || 'default' // 'default'
undefined || 'default' // 'default'
'' || 'default' // 'default'
0 || 'default' // 'default'
false || 'default' // 'default'

이런 값들을 JavaScript에서는 Falsy 값이라고 한다.

10. ??와 || 차이

값	value ?? 'default'	value || 'default'	이유
null	'default'	'default'	둘 다 없는 값처럼 처리
undefined	'default'	'default'	둘 다 없는 값처럼 처리
''	''	'default'	??는 빈 문자열을 정상 값으로 봄
0	0	'default'	??는 숫자 0을 정상 값으로 봄
false	false	'default'	??는 false를 정상 값으로 봄

value ?? defaultValue는 null 또는 undefined일 때만 기본값 사용하고, value || defaultValue는 Falsy 값이면 기본값 사용이라고 기억하면 된다. 

 

11. 이미지 데이터가 없을 때 더미데이터는 어떻게 넣어야 할까?

실제 이미지 데이터가 없을 때, 더미데이터를 어떻게 만들어야 할까?

예를 들어 이미지 객체가 있다고 해보자.
방법 1. 빈 문자열 사용

{
  img: {
    src: ''
  }
}

이 방식은 src라는 필드는 존재하고 문자열 타입이지만 값이 비어 있다는 의미다.

방법 2. null 사용

{
  img: {
    src: null
  }
}

이 방식은 src 필드는 존재하지만 현재 값이 없다는 뜻이다.

방법 3. 필드 자체를 생략

{
  img: {}
}

이 경우는 img.src가 undefined가 된다. 즉 src라는 필드 자체가 존재하지 않는 상태다.

 

12. 그럼 어떤 방식이 가장 좋을까?

정답은 실제 API가 어떻게 내려오는지에 따라 달라진다.

 

실제 API가 imgSrc: null형태로 내려온다면 더미데이터도 imgSrc: null로 맞추는 것이 가장 좋다.
실제 API가 imgSrc: ''로 내려온다면 더미데이터도 동일하게 ''로 작성하는 것이 좋다.
그리고 이미지 값이 없는 경우 필드 자체를 내려주지 않는 API라면 {}처럼 필드를 생략하는 것이 실제 환경과 가장 비슷하다.

 

즉, 더미데이터는 내가 편한 방식으로 만드는 것보다 실제 API 구조를 따라가는 것이 가장 안전하다.

13. API 스펙

여기서 자주 듣게 되는 표현이 바로 API 스펙이다.
API 스펙이란 API가 어떤 형태의 데이터를 주고받는지 정해놓은 규칙이다.

예를 들어 API가 다음과 같은 데이터를 준다고 해보자.

{
  id: 1,
  name: 'javascript',
  imgSrc: null
}

이 API의 스펙을 TypeScript 형태로 표현하면 대략 다음과 같다.

id: number
name: string
imgSrc: string | null

 

API 스펙에는 단순히 필드 이름만 포함되는 것이 아니다.
보통 다음과 같은 내용도 함께 포함된다.

* 어떤 필드가 내려오는지
* 필드명이 무엇인지
* 데이터 타입이 무엇인지
* 필수값인지 선택값인지
* 값이 없을 때 null인지
* 빈 문자열을 내려주는지
* 필드 자체가 빠질 수 있는지

 

이렇게 이번 글에서는 null, undefined, ''의 차이를 정리해 보았다.