JavaScript

[JavaScript] Null check, 빈 값 체크 v2019

학학이 2019. 7. 3. 22:36

isempty

Introduction

[JavaScript] Null check, 빈 값 체크 필자의 블로그 중 가장 조회수가 많은 글이다.

세 번째 게시글인 만큼 블로그 초장기에 작성한 내용이다.
시간이 지나 다시 내용을 보니 부족한 점과 잘못된 점이 있었다.
이 부분을 바로잡기 위해 다시 쓰는 글이다.

isEmpty

gist에 공유한 isEmpty는 문제점이 있다. 그 당시엔 왜 그렇게 생각했는지 기억이 나지 않지만, 입력 값 false에 대해서 비어있지 않다는 false를 리턴하도록 했다.

하지만, isEmpty는 파라미터의 비교 연산 시 true|false 를 반환하느냐에 대한 내용이 아니다.

넘어온 파라미터가 비어 있냐는 것이다.

그래서 의도한 기능대로 동작하는 isEmpty를 다시 작성했다.

is-로 시작하는 함수 관리하기 위해 is라는 NPM 모듈로 만들었다.

is

https://github.com/SangHakLee/is

https://sanghaklee.github.io/is

const empty = (value) => {
    if (value === null) return true
    if (typeof value === 'undefined') return true
    if (typeof value === 'string' && value === '') return true
    if (Array.isArray(value) && value.length < 1) return true
    if (typeof value === 'object' && value.constructor.name === 'Object' && Object.keys(value).length < 1 && Object.getOwnPropertyNames(value) < 1) return true
    if (typeof value === 'object' && value.constructor.name === 'String' && Object.keys(value).length < 1) return true // new String()

    return false
}

빈 값

isEmpty는 파라미터 값이 비었는지 확인한다. 빈 값이라 정의한 값들은 아래와 같다.

채워진 값

1
'string'
[1]
{a:1}
  • 의심의 여지가 없는 명확하게 채워진 값들이다.
true
false
  • boolean도 값이다. 특히 false도 값이다.

Object

Object는 까다롭다.

new Boolean() // Boolean{false}
false // false

typeof new Boolean() // object
typeof false // boolean

typeof new Boolean() != typeof false
new Boolean() == false

new Boolean() // Boolean{false}, == false
new Number() // Number{0}, == 0
new Date() // Thu Jun 27 2019 00:59:56 GMT+0900 (한국 표준시)
new RegExp() // /(?:)/
new Error() // Error at <anonymous>
  • 위 객체들은 자명하게 값을 리턴
  • JavaScript는 6가지 Primitive를 제외하면 모두 Object
    • new Object()를 제외한 모든 Object는 값이 채워졌다고 판단

Test Data-set을 보면 필자가 어떤 값들을 빈 값이라 보고 어떤 값들을 채워진 값이라 보는지 알 수 있다.

Underscore.js & Lodash

Underscore.js, Lodash에는 isEmpty가 이미 존재한다.

map을 두고 .map을 쓸 정도로 Undederscore.js를 선호하는 필자가 _.isEmpty 를 사용하지 않는 이유가 있다.

필자가 원하는 것은 파라미터의 값이 비었는지 확인하는 것이다. 하지만, _.isEmpty는 필자의 의도와 다르게 동작한다.

  • boolean return true
    • _.isEmpty(true)
  • number return true
    • _.isEmpty(1)
  • object created with new, except new Object() true
    • _.isEmpty(new Date())
  • function return true
    • _.isEmpty(function() {})

필자는 앞에서 빈 값이라 정의한 파라미터를 제외한 모든 경우를 채워진 값으로 판단하고 싶었다.
JavaScript로 데이터를 다루다 보면 이렇게 처리해야 하는 경우가 꽤 생긴다.
이러한 요구 때문에 Underscore.js, Lodash의 _.isEmpty를 사용하지 않고 새로 만들어서 사용했다.

Conclusion

요구사항에 따라서 비어 있다라는 개념은 바뀔 수 있다.
어떤 경우엔 Underscore.js, Lodash의 _.isEmpty가 적합할 수 있고, 어떤 경우엔 필자의 is.empty가 적합할 수 있다.

필자의 모듈이나 Underscore.js 모듈을 활용해서 각 상황에 맞는 isEmpty를 만들어 사용하자.