lodash isEqual, mapValues

Lodash

- javascript 인기 라이브러리

- array, date, object 등 순수자바스크립트의 데이터 구조를 손쉽게 다룰 수 있도록 돕는다.

- 특히 프론트엔드가 백엔드로부터 받은 데이터를 핸들링할 때 많이 쓰인다.

- 바닐라 자바스크립트 함수에 비해 성능이 떨어질 수 있지만, 함수의 확장성 때문에 편리하게 사용이 가능하다.

(ex. 자바스크립트의 map은 배열에서만 사용할 수 있지만, lodash의 map은 객체도 받을 수 있음)

- 제이쿼리에서 변수를 $ 기호로 감싸는 것처럼, 로대쉬는 _를 사용한다. (_.map, _.uniq ...)

- 공식홈페이지(링크) 또는 메소드 정리한 사이트(링크)에서 함수 종류 확인 가능

 

 

실제 프로젝트에서 유용하게 썼던 2가지 함수를 소개한다.

 

_.isEqual

문법

_.isEqual(비교할값1, 비교할값2)

 

arrays, array buffers, boolean, date objects, maps, numbers, objects, regex, sets, strings, symbols, and typed arrays 등 거의 모든 형태의 값이 같은지 비교할 수 있다.

 

const value1 = [{
  segmentStatus: Enum,
  segmentInfo: {
    airlineIconUrl: string,
    airlineCode: string,
    flightNumber: string,
    originDateTime: Date,
    destDateTime: Date,
    originAirportIata3Code: string,
    destAirportIata3Code: string,
  },
},
...]

위와 같이 복잡한 객체를 가지는 array를 2개 받아와서, 같은 객체면 버튼을 비활성화해주고 다른 객체면 버튼을 활성화해주어야 하는 상황이 있었다. 이 때 로대쉬의 isEqual 함수를 유용하게 사용했다.

 

 

 

_.mapValues

문법

_.mapValues(배열, '추출하고싶은 key')

 

배열에서 원하는 부분만 뽑아내어 사용할 수 있다.

아래 예제에서 foods는 간단한 형태의 배열이지만, api를 통해 받아온 배열이 매우 길고 복잡해서 유용하게 썼다.

 

 

바닐라 자바스크립트에서도 reduce나 fromEntries가 같은 역할을 수행할 수 있지만 다소 복잡하다.

 

mapValues를 reduce와 fromEntries로 직접 구현한 경우(링크)