lodash 활용 - 풀스택개발 EastFlag

lodash 소개

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

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

Array: 배열에만 사용가능한 함수
Object: 객체에만 사용 가능한 함수
Collection: 배열과 객체 모두에 사용 가능한 함수
Util: 유틸리티 관련 함수
Seq: jquery의 메서드 체인처럼 여러개의 펑션들을 연달아서 사용 가능

books 라는 array 배열이 아래와 같이 존재할 때 아래의 퀴즈들을 풀어보세요.

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” 것의 author를 찾아서 아래와 같이 출력하세요.

Carroll

Carroll

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

여기서 predicate란 정규표현식의 test 메서드와 동일한 역할을 합니다. 공장에서 제품이 불량인지 양호한지를 판별하여 양호하면 true를 불량이면 false를 리턴하는 역할이 predicate 혹은 test 의 역할입니다.

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

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

Q: author가 Unknown 인 title을 아래와 같이 찾아서 출력하시오.

Swallow's gift

1	Swallow's gift

A) 두번째 파라메터로 펑션대신 _.matches({ author: ‘Unknown’ }) 을 사용할 수 있습니다.

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

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

A2) shorhand 표기법으로 아래와 같이 사용할 수도 있습니다.

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

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

filter

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

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

[
  {title: "Three Little Pigs", price: 20, author: "Jacobs", rank: 1},
  {title: "Alice in Wonderland", price: 25, author: "Carroll", rank: 2}
]

[

{title: "Three Little Pigs", price: 20, author: "Jacobs", rank: 1},

{title: "Alice in Wonderland", price: 25, author: "Carroll", rank: 2}

]

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

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

sumBy

Q: 모든 책의 합계를 구해서 아래와 같이 출력하시오.

95

A) 다큐먼트에서 sum을 찾아보면 Math 카테고리에 sum과 sumBy 두개의 함수를 찾을수 있다. 주의깊게 봐야 할 것은 첫번째가 리턴 값이다. sum 과 sumBy 둘다 Return 값은 number 타입으로 동일하다. 두번째는 입력 파라메터인데 sum은 받을수 있는 파라메터가 number 타입 배열 하나만 받는다. _.sum(array) 형태이다.

sumBy는 _.sumBy(array, fn) 으로 파라메터를 두개를 받는데, 객체 타입 array를 첫번째 파라메터로 받고 두번째 파라메터로 객체 타입에서 반복해야 할 속성을 정해주는 펑션이 온다.

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

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

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

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

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

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

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

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

maxBy

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

A) max와 maxBy도 sum과 sumBy와 유사한데, 차이점은 리턴되는 타입이 약간 다르다. maxBy의 경우에는 리턴되는 타입이 배열의 요소 이다.

result = _.maxBy(books, 'price')
// number 타입이 리턴되는게 아니라 객체가 리턴된다는 점에 유의
console.log(result.title)

result = _.maxBy(books, 'price')

// number 타입이 리턴되는게 아니라 객체가 리턴된다는 점에 유의

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' ]

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

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: 2},
  {date: "09-01 12:00", value: 3},
  {date: "09-01 12:01", value: 1}
 ];
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:00", value: 2},

{date: "09-01 12:00", value: 3},

{date: "09-01 12:01", value: 1}

];

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

console.log(result);

Q) 아래 dataList 배열은 공장의 센서가 올려주는 데이터이다. 센서가 올리는 데이터가 너무 자주 올리게 되면 동일한 시간대에 값들이 중복이 되어서 들어갈 수 있다. 그래서 date가 중복인 경우에는 하나만 표시하도록 중복된 데이터를 제외한 객체들의 배열을 아래와 같이 구하시오.

[
   {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:02", value: 3},

{date: "09-01 12:01", value: 2},

{date: "09-01 12:00", value: 1},

]

A) uniqBy는 Array에만 사용될 수 있다.

_property()표현으로 아래와 같이 shorthand 표기법으로도 사용할 수 있습니다.

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

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

groupBy

const gridList = [
  {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}

]

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

[
  [
    {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},

]

A) 먼저 gropyBy를 사용하면 x의 키 값을 가진 객체 배열로 전환된다.

객체는 key: value 로 구성이 되어있는데 value 부분만 꺼내서 새로운 벼열에 담아서 리턴해주는 역할이 values 메서드이다. values 는 그러므로 Object 에만 사용할 수 있다..

const tempResult = _.groupBy(gridList, 'x')
// 리턴된 결과는 Object 타입이다.
console.log(tempResult);
// 객체의 value 부분을 모아서 새로운 배열에 담아서 리턴
result = _.values(tempResult);
console.log(result)

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

// 리턴된 결과는 Object 타입이다.

console.log(tempResult);

// 객체의 value 부분을 모아서 새로운 배열에 담아서 리턴

result = _.values(tempResult);

console.log(result)

flattern, flatternDeep

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

]

Q) 위의 2차원 배열을 아래와 같은 1차원배열로 만드시오.

[
  {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}

]

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

배열을 펼치주는 역할이기 때문에 Array 타입에만 사용될 수 있다.

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

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

flatMap

const frontList = [{
  title: 'angular',
  tags: ['js', 'google', 'framework']
}, {
  title: 'react',
  tags: ['js', 'facebook', 'library']
}, {
  title: 'vue',
  tags: ['js', 'library']
}];

const frontList = [{

title: 'angular',

tags: ['js', 'google', 'framework']

}, {

title: 'react',

tags: ['js', 'facebook', 'library']

}, {

title: 'vue',

tags: ['js', 'library']

}];

Q) 위의 frontList 배열에서 객체의 tags에 포함된 스트링들을 모아서 소팅한 다음 중복을 제거한 유니크한 string 타입 배열을 아래와 같이 구하시오.

["facebook", "framework", "google", "js", "library"]

1	["facebook", "framework", "google", "js", "library"]

A) 배열을 합치고 소팅하고 중복을 제거해야 하므로 chain 메서드를 사용해서 먼저 lodash wrapper 인스턴스를 만든다. 앞에서 사용한 _.chain(array) 의 shorthand 표현은 _(array) 로 사용할 수 있다.

먼저 배열을 가져와서 해당 배열을 펼친 다음에 새로운 배열에 담아서 리턴해주는 flatMap을 사용한다. 객체를 정렬한다면 sortBy에 정렬을 할 propery를 정해주면 되는데 스트링 배열이므로 해당값만 넘긴다. 정렬후에 유니크한 값만 리턴해주도록 uniqBy를 사용한다.

const allTags = _(frontList)
  .flatMap(f => f.tags)
  .sortBy(f => f)
  .uniqBy()
  .value();
console.log(allTags);

const allTags = _(frontList)

.flatMap(f => f.tags)

.sortBy(f => f)

.uniqBy()

.value();

console.log(allTags);

range

Q) 1부터 1000까지 중에서 2 또는 3의 배수인 숫자의 갯수를 구하시오.

A) 파이썬이나 혹은 고급 자바스크립트에서 흔히 볼 수 있는 range 함수가 그 역할 그대로 제공이 된다. range(start, end) 는 start <= x < end 를 지원한다. 세번째 파라메터는 디폴트가 1이고 2씩 증가한다면 세번째 파라메터에 2를 넣으면 된다.

const sum = _.range(1, 1001)
  .filter(i => i % 2 === 0 || i % 3 === 0)
  .length;
console.log(sum);

const sum = _.range(1, 1001)

.filter(i => i % 2 === 0 || i % 3 === 0)

.length;

console.log(sum);

debounce with throttle

window.onresize = function() {
  console.log('some logic');
}

window.onresize = function() {

console.log('some logic');

}

Q) 윈도우 resize시 ‘some logic’ 를 출력하는 로직이 위와 같이 존재한다. 위와 같이 이벤트를 설정후 창 크기를 리사이징하게 되면 ‘some logic’ 이 너무 많이 출력되서 performance 가 좋지 않게 된다.
리사이즈가 끝난 후 1초후에 한번만 출력되도록 하라.

A) lodash에 debounce 함수를 사용해서 throttle 로직을 적용할 수 있다.

window.onresize = _.debounce(function() {
  console.log('some logic');
}, 1000);

window.onresize = _.debounce(function() {

console.log('some logic');

}, 1000);

CodePen

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

Open in CodePen

+ reference

lodash document

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.