lodash tutorial | EastFlag

lodash 소개

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

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

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

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;

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” 것을 찾으시오.

result = _.find(books, item => item.title === 'Alice in Wonderland')
console.log(result)

1 2	result = _.find(books, item => item.title === 'Alice in Wonderland') console.log(result)

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

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

result = _.find(books, _.matches({ author: 'Unknown' }))
console.log(result)

1 2	result = _.find(books, _.matches({ author: 'Unknown' })) console.log(result)

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

result = _.find(books, { author: 'Unknown' })
console.log(result)

1 2	result = _.find(books, { author: 'Unknown' }) console.log(result)

filter

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

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

result = _.filter(books, item => item.rank < 3)
console.log(result)

1 2	result = _.filter(books, item => item.rank < 3) console.log(result)

sum

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

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

result = _.sumBy(books, item => item.price)
console.log(result)

1 2	result = _.sumBy(books, item => item.price) console.log(result)

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

result = _.sumBy(books, _.property('price'))
console.log(result)

1 2	result = _.sumBy(books, _.property('price')) console.log(result)

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

result = _.sumBy(books, 'price')
console.log(result)

1 2	result = _.sumBy(books, 'price') console.log(result)

maxBy

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

result = _.maxBy(books, 'price')
console.log(result.title)

1 2	result = _.maxBy(books, 'price') console.log(result.title)

chain, sortBy, map

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

[ '1. Alice in Wonderland',
  '2. Seven Dwarfs',
  '3. Swallow\'s gift',
  '4. Three Little Pigs' ]

[ '1. Alice in Wonderland',

'2. Seven Dwarfs',

'3. Swallow\'s gift',

'4. Three Little Pigs' ]

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

result =_.chain(books)
  .sortBy('title')
  .map((item, index) => `${index + 1}. ${item.title}`)
  .value();
console.log(result)

result =_.chain(books)

.sortBy('title')

.map((item, index) => `${index + 1}. ${item.title}`)

.value();

console.log(result)

uniqBy

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

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);

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:01", value: 2}

];

result = _.uniqBy(dataList, item => item.date)

console.log(result);

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

result = _.uniqBy(dataList, 'date')
console.log(result);

1 2	result = _.uniqBy(dataList, 'date') console.log(result);

groupBy

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

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},
//   ]
// ]

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 메서드를 한번 더 사용한다.

const tempResult = _.groupBy(gridList, 'x')
console.log(tempResult);
result = _.values(tempResult);
console.log(result)

const tempResult = _.groupBy(gridList, 'x')

console.log(tempResult);

result = _.values(tempResult);

console.log(result)

flattern, flatternDeep

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

const gridList2 = [
  [
    {x: 1, y: 1},
    {x: 1, y: 2},
  ],
    [
    {x: 2, y: 1},
    {x: 2, y: 2},
  ]
]

const gridList2 = [

[

{x: 1, y: 1},

{x: 1, y: 2},

[

{x: 2, y: 1},

{x: 2, y: 2},

]

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

result = _.flatten(gridList2);
console.log(result)

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.

lodash 활용