kokoball의 devlog
article thumbnail
728x90


안녕하세요!
이번 포스트에서는 Javascript 유틸리티 라이브러리인 Lodash가 제공하는 데이터 유효성 체크 함수들—isNaN, isNil, isNull, isEmpty—의 차이점과 사용법에 대해 알아보겠습니다.

 

Lodash란?

Lodash는 JavaScript로 코딩할 때 자주 필요한 기능들을 모듈화 하여 제공하는 유틸리티 라이브러리입니다.
배열, 숫자, 객체, 문자열 등 다양한 데이터 타입을 다루는 작업을 단순화하며, 빠른 성능과 간편한 사용법으로 많은 개발자들에게 사랑받고 있습니다. 예를 들어, Lodash를 사용하면 기본값을 설정하거나 배열을 분할하는 작업이 아주 쉽게 이루어집니다.

// 기본값 설정: 기존 객체의 값이 없으면 대체값을 넣어준다.
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
// 결과: { 'a': 1, 'b': 2 }

// 배열 분할: 조건에 따라 배열을 두 그룹으로 나눈다.
_.partition([1, 2, 3, 4], n => n % 2);
// 결과: [[1, 3], [2, 4]]

 

Lodash는 MIT 라이선스 하에 공개되어 있으며, 공식 사이트(lodash.com)에서 다양한 사용법과 빌드 옵션을 확인할 수 있습니다.

 

데이터 유효성 체크 함수

데이터를 다루다 보면 값의 유효성을 검사해야 하는 상황이 빈번합니다. Lodash에서는 이러한 작업을 위해 여러 가지 함수를 제공하는데요, 그중에서도 isNaN, isNil, isNull, isEmpty 함수는 각각 다른 용도로 사용됩니다.

 

1. _.isNaN

_.isNaN 함수는 전달된 값이 NaN인지 확인합니다.
여기서 주의할 점은, 전역 함수인 isNaN과 Lodash의 _.isNaN은 동작 방식이 다르다는 것입니다. Lodash의 버전은 오직 숫자가 아닌 값을 숫자로 변환할 때 발생하는 NaN만을 체크합니다.

console.log(_.isNaN(NaN));      // true
console.log(_.isNaN('hello'));  // false
console.log(_.isNaN(123));      // false

 

2. _.isNil

_.isNil 함수는 값이 null 또는 undefined 인지를 확인합니다.
두 값 중 하나라도 해당되면 true를 반환합니다.

console.log(_.isNil(null));       // true
console.log(_.isNil(undefined));  // true
console.log(_.isNil(0));          // false
console.log(_.isNil(''));         // false

 

3. _.isNull

_.isNull 함수는 오직 null인 경우에만 true를 반환합니다.
즉, undefined는 체크하지 않습니다.

console.log(_.isNull(null));       // true
console.log(_.isNull(undefined));  // false
console.log(_.isNull('null'));     // false (문자열 'null'은 null과 다릅니다)

 

4. _.isEmpty

_.isEmpty 함수는 객체, 배열, 문자열, Map, Set 등의 값이 "비었는지" 확인합니다.
여기서 "비었다"라는 판단은 해당 값이 갖고 있는 길이(또는 enumerable 속성의 수)에 기반합니다.

  • 객체와 배열: 빈 객체 {}와 빈 배열 []는 true를 반환합니다.
  • 문자열: 빈 문자열 ''은 true를, 길이가 있는 문자열(예: '1')은 false를 반환합니다.
  • 숫자: 숫자와 같이 length 속성이 없는 값은 true로 판단합니다.
  • 주의점:  {1: ''}와 같이 객체에 키가 존재하면, 값이 빈 문자열이어도 false를 반환합니다.
console.log(_.isEmpty({}));      // true (빈 객체)
console.log(_.isEmpty([]));      // true (빈 배열)
console.log(_.isEmpty(''));      // true (빈 문자열)
console.log(_.isEmpty('1'));     // false (문자열 길이가 1)
console.log(_.isEmpty(1));       // true (숫자는 비어있다고 판단)
console.log(_.isEmpty({1: ''}));  // false (키가 존재하므로 비어있지 않음)

 

팁: _.isEmpty를 이해할 때는, 배열이나 문자열의 경우 length를 확인하는 개념으로, 객체의 경우엔 enumerable 한 속성이 있는지를 판단하는 개념으로 생각하면 도움이 됩니다.

 

함수 선택 시 고려 사항

데이터 유효성 체크를 할 때, 범위가 넓은 순서대로 각 함수들이 커버하는 영역을 정리해 보면 다음과 같습니다:

  1. isEmpty: 객체, 배열, 문자열 등 전반적인 "비어있음"을 체크합니다.
  2. isNil: null과 undefined 두 가지 값을 체크합니다.
  3. isNull: 오직 null만 체크합니다.
  4. isNaN: 숫자가 아닌 값을 숫자로 변환할 때 발생하는 NaN만 체크합니다.

상황에 맞게 적절한 함수를 선택하여 사용하면, 데이터 유효성 검증 로직을 보다 간단하고 명확하게 작성할 수 있습니다.

 

 

 

728x90
profile

kokoball의 devlog

@kokoball-dev

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!