lodash 소개

lodash 라이브러리는 자바스크립트로 개발시 가장 많이 사용되는 라이브러리 중에 하나입니다. array 를 다룰때 번거로움을 없애고 쉽게 사용할 수 있도록 해줄뿐만 아니라 object, string 등을 다룰때도 간편함을 제공해주며 디바운싱 기법 등 여러가지 많은 유틸리티 함수들을 갖고 있습니다.

자주 사용되는 5가지 카테고리를 살펴보면 다음과 같습니다.

  • Array: 배열에만 사용가능한 함수
  • Object: 객체에만 사용 가능한 함수
  • Collection: 배열과 객체 모두에 사용 가능한 함수
  • Util: 유틸리티 관련 함수
  • Seq

find

https://lodash.io 공식 사이트 다큐먼트에서 find를 찾으면 Collection에 find를 찾을수 있습니다. 배열과 객체 모두 사용할 수 있는 함수입니다. 기본적인 개념은 자바스크립트 find 함수와 다르지 않습니다. 다만 좀 더 편리하게 사용할 수 있습니다.

Q: 제목이 “Alice in Wonderland” 것을 찾으시오.

자바스크립트 find 함수와 비슷하게 첫번째 파라메터로 배열을, 두번째 파라메터로 predicate 펑션을 넣어주면 첫번째 찾은 객체를 리턴하거나 아니면 못찾으면 undefined 를 리턴합니다.

Q: author가 Unknown 인 객체를 찾으시오.

두번째 파라메터로 펑션대신 _.matches({ author: ‘Unknown’ }) 을 사용할 수 있고, shorhand 표기법으로 아래와 같이 사용할 수도 있습니다.

filter

document를 찾아보면 Collection에 속해있다. 배열과 객체에 모두 사용할 수 있다.

Q: rank < 3 인 모든 객체를 구하시오.

sum

Q: 모든 책의 합계를 구하시오.

다큐먼트에서 sum을 찾아보면 Math 카테고리에 sum과 sumBy 두개의 함수를 찾을수 있다. sumBy는 각 엘리먼트를 루프를 돌면서 계산할 수 있습니다.

혹은 _.property() 를 사용하여

혹은 _.property를 생략한 shorthand 표기법으로 아래와 같이 사용할 수 있습니다.

maxBy

Q: 가장 비싼 책의 제목을 출력하시오.

chain, sortBy, map

Q: 제목으로 먼저 소팅한 다음 제목 앞에 랭킹을 붙여서 아래와 같이 출력하세요.

seq 카테고리에 chain 함수는 lodash wrapper 인스턴스를 만들어 주므로 연속해서 lodash 함수를 사용할때 유용하게 사용할 수 있습니다. 메서드 체인을 사용후에 최종적으로 값을 얻기 위해서는 value()를 호출해서 값을 얻어 낼 수 있습니다.

uniqBy

Q: date가 중복인 데이터를 제외한 객체들의 배열을 구하시오.

uniqBy는 다큐먼트를 찾아보면 Array에만 사용될 수 있습니다. _property()표현으로 아래와 같이 사용할 수 있습니다.

groupBy

Q: 아래의 2차원 배열을 x를 키값으로 그룹핑한 이차원 배열로 변환하시오.

먼저 gropyBy를 사용하면 x의 키 값을 가진 객체 배열로 전환된다. 그 다음에 객체를 배열로 변환하는 values 메서드를 한번 더 사용한다.

flattern, flatternDeep

Q: 위의 결과로 생성된 아래 2차원 배열을 1차원배열로 만드시오.

flattern은 말그대로 평평하게 펴주는 역할을 한다. 2차원 배열을 1차원으로 만들려면 flattern을 사용하면되고 만일 다차원 배열일 경우 순환해서 모든 배열을 펼치기 위해서는 flatternDeep를 사용하면 된다. 만일 배열의 각 요소를 루프를 돌면서 평평하게 할려면 flatMap을 사용하면 된다.

CodePen

See the Pen javascript lodash quiz by LeeDongKee (@eastflag) on CodePen.0

Open in CodePen


+ reference

lodash find

lodash sumBy

lodash chain

lodash soryBy

lodash maxBy


This is a page that learns about javascript array with quiz. If you leave a codepen link below a comment, I’ll give it a feedback.