[JavaScript] null, undefined, 빈 문자열 처리 함수 만들기

 

✅ JavaScript에서 null, undefined, 빈 문자열 처리 함수 만들기

웹 개발을 하다 보면 null, undefined, 또는 빈 문자열('')이 섞인 데이터를 자주 만나게 됩니다. 이를 안전하게 처리하지 않으면 화면에 "null", "undefined" 같은 문자열이 그대로 출력되거나 예기치 않은 오류를 유발할 수 있습니다.

이번 글에서는 값이 null, undefined, 또는 빈 문자열일 경우 공백("")으로 대체하는 함수를 만들어보고, 실전에서 어떻게 사용할 수 있는지 정리해보겠습니다.

---

📌 1. 기본 목적

null, undefined, '' → '' (공백으로 처리)
그 외의 값은 원래 값 또는 문자열로 변환한 값을 반환

---

💡 2. 기본 버전 함수

다음은 가장 기본적인 구현입니다:

function toSafeString(value) {
  return value == null || value === '' ? '' : value;
}

🔍 설명

• value == null은 null과 undefined 둘 다를 체크합니다.
• value === ''는 빈 문자열을 체크합니다.
• 위 조건 중 하나라도 해당하면 ''(빈 문자열)을 반환하고, 아니면 원래 값을 그대로 반환합니다.

---

🧪 3. 사용 예시

console.log(toSafeString(null));        // ''
console.log(toSafeString(undefined));   // ''
console.log(toSafeString(''));          // ''
console.log(toSafeString('Hello'));     // 'Hello'
console.log(toSafeString(123));         // 123
console.log(toSafeString(false));       // false

숫자나 불린값도 그대로 반환되기 때문에 화면에 그대로 출력할 목적이라면 문자열 변환을 추가해주는 것이 좋습니다.

---

✨ 4. 문자열로 강제 변환하는 버전

값을 무조건 문자열로 출력하고 싶다면 아래와 같이 수정할 수 있습니다:

function toSafeString(value) {
  return value == null || value === '' ? '' : String(value);
}

📌 결과 예시

toSafeString(null);        // ''
toSafeString(undefined);   // ''
toSafeString('');          // ''
toSafeString('Hi');        // 'Hi'
toSafeString(42);          // '42'
toSafeString(false);       // 'false'

---

🧰 5. Lodash를 사용하는 방법

Lodash를 사용 중이라면 _.isNil()과 _.defaultTo()를 활용하여 더 간단하게 처리할 수 있습니다.

import _ from 'lodash';

function toSafeString(value) {
  return _.isNil(value) || value === '' ? '' : String(value);
}

• _.isNil(value)는 null 또는 undefined인지를 확인합니다.
• 이 방식은 특히 유틸리티 함수가 많은 대규모 프로젝트에서 유용합니다.

---

✅ 6. 결론 및 요약

상황 처리 방식

값이 null, undefined, ''	'' (공백으로 변환)
값이 존재하면 그대로	원래 값 또는 문자열 변환
문자열 강제 변환 필요	String(value) 사용
Lodash 사용 시	_.isNil(), _.defaultTo() 활용

이런 null-safe 함수는 UI에서 데이터 출력, 폼 초기화, API 응답 가공 등 다양한 곳에서 활용됩니다.

---

📎 같이 보면 좋은 글

• JavaScript의 Falsy 값 완벽 정리
• Optional Chaining과 Nullish Coalescing Operator 알아보기 (?., ??)

---

궁금한 점이나 개선할 부분이 있다면 댓글로 남겨주세요 🙂
더 유용한 자바스크립트 유틸 함수도 계속 소개해드릴게요!