lodash 내가 만든 함수를 lodash로 이용하기.(mixin)

  lodash를 사용하다보면 살짝 아쉬운 경우들이 있다. 현재 개발중인 프로젝트에서만 자주 사용 하는 함수들도 있을 것이고, 자주 사용 할 법한 함수임에도 불구하고, 어른들의 사정에 의해서 개발을 안함 함수도 있을것이다.

 그럴때를 위하여 lodash mixin을 만들어서 라이브러리 사용자에게 편의를 주는 경우도 있으니 사용 방법을 아래에 작성해 보겠다.

 개발을 하다보면, 오브젝트에서 특정값을 꺼내서 다른값과 비교하는 _.get( foo, 'bar' ) === 'blah' 이와 같은 코드를 많이 작성하게 될 것이다. 

 그럴때 그냥 함수 하나로 _.getEq( foo, 'bar, 'blah' ) 이와 같은 코드로 작성 할 수 는 없나? 이런생각이 들어서 lodash 문서를 아무리 찾아봐도, 그런 함수는 지원 하지 않고 그나마 lodash로만 처리 한다면 이와 같은 코드를 짤수 있을 것이다.

_chain( foo ).get( 'bar' ).eq( 'blah' ).value()

 뭐 위의 코드 보다 _.get( foo, 'bar' ) === 'blah' 이 코드가 더 짧으니 뭐...쓸 일 없는 함수겠지만 mixin을 사용한다면 다르다.

const getEq = function( object, path, other ) {
    return _.chain( object ).get( path ).eq( other ).value()
}
_.mixin( { getEq } )
const foo = { bar: 'blah' }

_.getEq( foo, 'bar', 'blah' )
// true
_.getEq( foo, 'bar', 'blahblah' )
// false

하지만 위의 코드는 lodash의 기존 함수를 응용한거 치고 아쉬운점이 있다.

그것은 무엇일까? 아래의 코드 세개를 보자.

_(foo).get(foo, 'bar').value()
// Uncaught TypeError: _(...).get(...).value is not a function
_(foo).eq('blah', 'blah').value()
// Uncaught TypeError: _(...).eq(...).value is not a function
_(foo).getEq(foo, 'bar', 'blah').value()
// true

getEq는 chaining을 지원하고 있다... get, eq 둘 다 지원이 안되는데 불구하고 말이다. 이때 사용 할 수 있는 방법이 있다.

_.mixin({getEq}, {chain: false})

_(foo).getEq(foo, 'bar', 'blah').value()
// Uncaught TypeError: _(...).getEq(...).value is not a function

mixin에는 chaining을 지원하지 않을 것인지에 대한 옵션을 넣어 줄 수 있다. 이로써 좀더 lodash 스러운 함수를 제공 할 수 있게 되었다.

 lodash에는 배열에 특정 값을 특정위치에 삽입하는 함수를 만들지 않았다. 뭐 이건 어른들의 사정에 의해서 구현을 안했겠지... 뭐 이런 함수가 없다고 하더라도 크게 문제가 되지는 않을 것이다. 배열에서 특정위치에 넣는 행위가 적을 뿐더러 특정 순서로 정렬을 하는 경우가 많으니 말이다.

하지만 필요한 경우는 언제나 발생을 한다만... 

const eng = ['A', 'C', 'D', 'E']
eng.splice( 1, 0, 'B' )
// ['A', 'B', 'C', 'D', 'E']

우리는 위의 코드를 잘 안다. 자 위의 코드를 이용 하여 insert를 간단하게 구현해보자.

_.mixin({
    insert: function () {
        let [arr, ...args] = arguments
        arr = Array.isArray(arr) ? arr : []
        arr.splice(...args)
        return arr
    }
})

const eng = ['A', 'C', 'D', 'E']
_.insert( eng, 1, 0, 'B' )
// ['A', 'B', 'C', 'D', 'E']
_.insert( null, 1, 1, 1 )
// [1]

아마도 위와 같은 코드를 짤 수 있을 것이다.

하지만 위의 코드에는 lodash 함수치고 아쉬운 점이 있다.

console.log( eng )
// ['A', 'B', 'C', 'D', 'E']

 eng의 값이 변경 되었다. 오염되었다. 오염되는 시점에서 저 함수를 쓸때 항상 오염을 피하기 위해서...

_.insert( [...eng], 1, 0, 'B' )

 위와 같은 코드로 작성을 하게 될 것이다. 뭐 항상 eng가 배열이라면 불편함만 늘겠지만... 배열이 아닌경우라면... 상상하기 싫다.

어쨋든 순수성을 보장해주도록 하자.  

_.mixin({
    insert: function () {
        let [arr, ...args] = arguments
        arr = Array.isArray(arr) ? [...arr] : []
        arr.splice(...args)
        return arr
    }
})

const eng = ['A', 'C', 'D', 'E']
_.insert(eng, 1, 0, 'B')
// ['A', 'B', 'C', 'D', 'E']
console.log(eng)
// ['A', 'C', 'D', 'E']

라이브러리를 사용하는 것은 매우 간단한 일이다. 하지만 해당 라이브러리 스럽게 사용하는 것은 참 어렵게 느껴지곤 한다.