lodash 소개
lodash 라이브러리는 자바스크립트로 개발시 가장 많이 사용되는 라이브러리 중에 하나입니다. array 를 다룰때 번거로움을 없애고 쉽게 사용할 수 있도록 해줄뿐만 아니라 object, string 등을 다룰때도 간편함을 제공해주며 디바운싱 기법 등 여러가지 많은 유틸리티 함수들을 갖고 있습니다.
자주 사용되는 5가지 카테고리를 살펴보면 다음과 같습니다.
- Array: 배열에만 사용가능한 함수
- Object: 객체에만 사용 가능한 함수
- Collection: 배열과 객체 모두에 사용 가능한 함수
- Util: 유틸리티 관련 함수
- Seq
1 2 3 4 5 6 7 8 |
let books = [ {title: "Three Little Pigs", price: 20, author: "Jacobs", rank: 1}, {title: "Alice in Wonderland", price: 25, author: "Carroll", rank: 2}, {title: "Seven Dwarfs", price: 35, author: "Disney", rank: 3}, {title: "Swallow's gift", price: 15, author: "Unknown", rank: 4}, ]; let result; |
find
https://lodash.io 공식 사이트 다큐먼트에서 find를 찾으면 Collection에 find를 찾을수 있습니다. 배열과 객체 모두 사용할 수 있는 함수입니다. 기본적인 개념은 자바스크립트 find 함수와 다르지 않습니다. 다만 좀 더 편리하게 사용할 수 있습니다.
Q: 제목이 “Alice in Wonderland” 것을 찾으시오.
1 2 |
result = _.find(books, item => item.title === 'Alice in Wonderland') console.log(result) |
자바스크립트 find 함수와 비슷하게 첫번째 파라메터로 배열을, 두번째 파라메터로 predicate 펑션을 넣어주면 첫번째 찾은 객체를 리턴하거나 아니면 못찾으면 undefined 를 리턴합니다.
Q: author가 Unknown 인 객체를 찾으시오.
1 2 |
result = _.find(books, _.matches({ author: 'Unknown' })) console.log(result) |
두번째 파라메터로 펑션대신 _.matches({ author: ‘Unknown’ }) 을 사용할 수 있고, shorhand 표기법으로 아래와 같이 사용할 수도 있습니다.
1 2 |
result = _.find(books, { author: 'Unknown' }) console.log(result) |
filter
document를 찾아보면 Collection에 속해있다. 배열과 객체에 모두 사용할 수 있다.
Q: rank < 3 인 모든 객체를 구하시오.
1 2 |
result = _.filter(books, item => item.rank < 3) console.log(result) |
sum
Q: 모든 책의 합계를 구하시오.
다큐먼트에서 sum을 찾아보면 Math 카테고리에 sum과 sumBy 두개의 함수를 찾을수 있다. sumBy는 각 엘리먼트를 루프를 돌면서 계산할 수 있습니다.
1 2 |
result = _.sumBy(books, item => item.price) console.log(result) |
혹은 _.property() 를 사용하여
1 2 |
result = _.sumBy(books, _.property('price')) console.log(result) |
혹은 _.property를 생략한 shorthand 표기법으로 아래와 같이 사용할 수 있습니다.
1 2 |
result = _.sumBy(books, 'price') console.log(result) |
maxBy
Q: 가장 비싼 책의 제목을 출력하시오.
1 2 |
result = _.maxBy(books, 'price') console.log(result.title) |
chain, sortBy, map
Q: 제목으로 먼저 소팅한 다음 제목 앞에 랭킹을 붙여서 아래와 같이 출력하세요.
1 2 3 4 |
[ '1. Alice in Wonderland', '2. Seven Dwarfs', '3. Swallow\'s gift', '4. Three Little Pigs' ] |
seq 카테고리에 chain 함수는 lodash wrapper 인스턴스를 만들어 주므로 연속해서 lodash 함수를 사용할때 유용하게 사용할 수 있습니다. 메서드 체인을 사용후에 최종적으로 값을 얻기 위해서는 value()를 호출해서 값을 얻어 낼 수 있습니다.
1 2 3 4 5 |
result =_.chain(books) .sortBy('title') .map((item, index) => `${index + 1}. ${item.title}`) .value(); console.log(result) |
uniqBy
Q: date가 중복인 데이터를 제외한 객체들의 배열을 구하시오.
1 2 3 4 5 6 7 8 9 10 11 |
const dataList = [ {date: "09-01 12:02", value: 3}, {date: "09-01 12:01", value: 2}, {date: "09-01 12:00", value: 1}, {date: "09-01 12:00", value: 1}, {date: "09-01 12:00", value: 1}, {date: "09-01 12:00", value: 1}, {date: "09-01 12:01", value: 2} ]; result = _.uniqBy(dataList, item => item.date) console.log(result); |
uniqBy는 다큐먼트를 찾아보면 Array에만 사용될 수 있습니다. _property()표현으로 아래와 같이 사용할 수 있습니다.
1 2 |
result = _.uniqBy(dataList, 'date') console.log(result); |
groupBy
Q: 아래의 2차원 배열을 x를 키값으로 그룹핑한 이차원 배열로 변환하시오.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const gridList = [ {x: 1, y: 1}, {x: 1, y: 2}, {x: 2, y: 1}, {x: 2, y: 2} ] // [ // [ // {x: 1, y: 1}, // {x: 1, y: 2}, // ], // [ // {x: 2, y: 1}, // {x: 2, y: 2}, // ] // ] |
먼저 gropyBy를 사용하면 x의 키 값을 가진 객체 배열로 전환된다. 그 다음에 객체를 배열로 변환하는 values 메서드를 한번 더 사용한다.
1 2 3 4 |
const tempResult = _.groupBy(gridList, 'x') console.log(tempResult); result = _.values(tempResult); console.log(result) |
flattern, flatternDeep
Q: 위의 결과로 생성된 아래 2차원 배열을 1차원배열로 만드시오.
1 2 3 4 5 6 7 8 9 10 |
const gridList2 = [ [ {x: 1, y: 1}, {x: 1, y: 2}, ], [ {x: 2, y: 1}, {x: 2, y: 2}, ] ] |
flattern은 말그대로 평평하게 펴주는 역할을 한다. 2차원 배열을 1차원으로 만들려면 flattern을 사용하면되고 만일 다차원 배열일 경우 순환해서 모든 배열을 펼치기 위해서는 flatternDeep를 사용하면 된다. 만일 배열의 각 요소를 루프를 돌면서 평평하게 할려면 flatMap을 사용하면 된다.
1 2 |
result = _.flatten(gridList2); console.log(result) |
CodePen
See the Pen javascript lodash quiz by LeeDongKee (@eastflag) on CodePen.0
+ reference
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.