lodash

https://lodash.com/docs/

Lodash Documentation

lodash

lodash 라이브러리는 자바스크립트로 개발시 가장 많이 사용되는 라이브러리 중에 하나이다.

array 를 다룰때 번거로움을 없애고 쉽게 사용할 수 있도록 해줄뿐만 아니라 object, string 등을 다룰때도 간편함을 제공해주며 디바운싱 기법 등 여러가지 많은 유틸리티 함수들을 갖고 있다.

 

아래와 같이 npm을 이용해 설치하고

npm i lodash

js 내에 변수로 선언해서 사용하자.

var _ = require('lodash');

Vue.js나 React에서는 아래처럼 import해서 사용하자

import Lodash from "lodash"

자주 사용되는 5가지 카테고리

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

---

유용한 메서드

아래 링크에 들어가서 array에 유용한 기본 메서드랑 비교해보자!

https://duckgugong.tistory.com/132

array

 

 

아래와 같은 array가 있다하고 lodash의 여러가지 메서드를 살펴보자!

let people = [
  { name: "LDH", age: 26, height: 180 },
  { name: "SMC", age: 25, height: 174 },
  { name: "OHJ", age: 24, height: 177 },
  { name: "OSH", age: 24, height: 171 }
];

forEach

개인적으로 가장 유용하다고 느끼는 기능 중 하나이다! array 뿐만 아니라 object도 루프를 돌 수 있다!

모든 사람의 이름을 출력해라

_.forEach(people, (person) => {
    console.log(person)
})

사실 위의 경우보다 object에 대해서 loop를 돌 때 훨씬 많이 사용하는 것 같다. 첫번째 파라미터에 object의 value를 넣을수 있고 두번째 파라미터에 object의 key를 넣을 수 있다!

const test = {
    a: { name: "duck", favorite: "chicken" },
    b: { name: "lee" }
}

_.forEach(test, (value, key) => {
    console.log(key, value)
})
// a { name: 'duck', favorite: 'chicken' }
// b { name: 'lee' }

 

filter

• array와 object에서 조건에 맞는 모든 요소를 리턴해준다

filter는 array와 object에 모두 적용 가능하다.

 

키가 175 이상인 모든 객체를 구하라.

result = _.filter(people, item => item.height >= 175);
console.log(result);

map

collection의 엘리먼트마다 해당 함수를 실행하고 그 결과를 새로운 배열 배열로 반환한다.

 

사람들의 나이를 2배한 배열을 출력하라.

result = _.map(people, item => item.age*2);
console.log(result);

 

만약, 객체의 key 값만 집어넣을 경우에는 해당 value값을 배열로 반환해준다!

result = _.map(people, 'age');
console.log(result);

위 코드는 사실 아래와 같다 ㅎㅎ..

result = _.map(people, item => item.age);
console.log(result);

• 아래처럼 객체에도 적용시킬 수 있다!

const nums = { a: 1, b: 2, c: 3 }
console.log(_.map(nums, num => num * 2))
// [2, 4, 6]

clone

• shallow copy를 할 때 사용하는 메서드이다.
• shallow copy이기 때문에 복사된 객체가 원본 객체와 같다!

result = _.clone(people)
console.log(people[0] === result[0])
// true

cloneDeep

• deep copy를 할 때 사용하는 메서드!
• deep copy이기 때문에 복사된 객체와 원본 객체는 값만 같고 다르다!

result = _.cloneDeep(people)
console.log(people[0] === result[0])
// false

sortBy

Collection 값들을 원하는 key를 기준으로 정렬해준다! 개꿀임이거. 

새로운 배열이 리턴되는 메서드이다!!

 

array에서 키가 작은순으로 정렬해보자

result = _.sortBy(people, 'height');

array에서 키가 큰순으로 정렬해보자.

내림차순으로 정렬하고 싶으면 필드 앞에 -만 붙여주면 됨!

result = _.sortBy(people, -'height');

sortBy는 또한 복수개의 key로 정렬이 가능하다.

사람을 나이를 오름차순으로 정렬하자. 나이가 같으면 키를 오름차순으로 정렬하자.

result = _.sortBy(people, 'age', 'height');

사람을 나이를 오름차순으로 정렬하자. 나이가 같으면 키를 내림차순으로 정렬하자.

result = _.sortBy(people, 'age', -'height');

만약 sortBy 메서드의 두번째 인자에 아무것도 넣지 않으면 그냥 오름차순으로 정렬해준다.

a = [1, 8, 2, 3, 5, 4, 7, 6]
result = _.sortBy(a);
console.log(result);

[
  1, 2, 3, 4,
  5, 6, 7, 8
]

find

• array나 object에서 기준으로 정한 조건에 맞는 첫번째 값을 리턴한다

이름이 "LDH"인 객체를 찾아서 출력해보자.

result = _.find(people, item => item.name === "LDH");
console.log(result);
// {name: 'LDH', age: 26, height: 180}

두번째 파라미터로 펑션 대신에 _.matches를 이용할 수 있다.

result = _.find(people, _.matches({name: "LDH"}));

혹은 shorthand 표기법으로 아래와 같이 사용 가능!

result = _.find(people, ({name: "LDH"}));

findIndex

사용법은 find와 같지만 리턴 값이 인덱스이다!

이름이 "LDH"인 객체의 index를 찾아서 출력해보자.

result = _.findIndex(people, item => item.name === "LDH");
console.log(result);
// 0

sumby

다큐먼트에서 sum을 찾아보면 Math 카테고리에 sum과 sumBy 두개의 함수를 찾을 수 있다.

주의깊게 봐야 할 것은 첫번째가 리턴 값이다.

sum 과 sumBy 둘다 Return 값은 number 타입으로 동일하다.

두번째는 입력 파라메터인데 sum은 받을수 있는 파라메터가 number 타입 배열 하나만 받는다. _.sum(array) 형태이다.

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

 

array에서 모든 객체의 키의 합을 구해라.

result = _.sumBy(people, item => item.age);
console.log(result);
// 99

혹은 _.property()를 사용할 수 있다.

result = _.sumBy(people, _.property('age'));

혹은 shorthand 표기법을 사용해서 구할 수 있다.

result = _.sumBy(people, 'age');

mean

array의 평균을 구할 수 있는 메서드

const nums = [1, 2, 3, 4, 5]
console.log(_.mean(nums))
// 30

maxBy

maxBy의 경우에는 리턴되는 타입이 배열의 요소이다. 즉, 객체를 담은 배열이면 객체를 리턴한다.

 

array에서 키가 가장 큰 객체를 구해라.

result = _.maxBy(people, item => item.height);
console.log(result);

shorthand 표기법을 사용해서 구할 수 있다.

result = _.maxBy(people, 'height');

chain

chain 함수를 이용하면 lodash wrapper 인스턴스를 만들어주므로 연속해서 lodash 함수를 사용할 때 유용하게 사용할 수 있다.

최종적으로 값을 얻기 위해서는 value()를 호출해서 값을 얻애날 수 있다.

아래 예시를 통해 살펴보자.

 

원본 배열을 바꾸지 않고 키가 큰 순으로 아래와 같이 순서와 사람 이름이 담긴 배열을 출력하라.

[ 
	'1. LDH', 
	'2. SMC', 
	'3. OHJ', 
	'4. OSH' 
]

result = _.chain(people).sortBy(-'height').map((item, i) => `${i + 1}. ${item.name}`).value();
console.log(result);

_.chain(array) 의 shorthand 표현은 _(array) 로 사용할 수 있다.

result = _(people).sortBy(-'height').map((item, i) => `${i + 1}. ${item.name}`).value();
console.log(result);

uniqBy

key값이 중복되는 경우에는 그 key값을 하나만 가지도록 중복된 데이터를 제거한 배열을 리턴한다. 

 

키가 같은 사람을 한명만 표시하는 배열을 출력하자.

result = _.uniqBy(people, 'height');
console.log(result);

[
  { name: 'LDH', age: 26, height: 180 },
  { name: 'SMC', age: 25, height: 174 },
  { name: 'OHJ', age: 24, height: 177 }
]

만약 두번째 파라미터에 아무것도 넣지 않으면 배열에서 중복된 값을 제거해서 배열을 리턴한다.

 

아래와 같은 배열이 있다고 하자.

front = [
  'js',        'google',
  'framework', 'js',
  'facebook',  'library',
  'js',        'library'
]

front 배열에서 중복값을 제거한 배열을 리턴하라.

front = [
  'js',        'google',
  'framework', 'js',
  'facebook',  'library',
  'js',        'library'
]

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

 

flattern, flatternDeep

flattern은 말그대로 평평하게 펴주는 역할을 한다.

2차원 배열을 1차원으로 만들려면 flattern을 사용하면되고 만일, 다차원 배열일 경우 순환해서 모든 배열을 펼치기 위해서는 flatternDeep를 사용하면 된다.

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

 

아래와 같은 배열이 있다고 가정하자.

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

위 이차원 배열을 일차원 배열로 만들어라.

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

위와 아래 코드의 결과는 같다.

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

[ { x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 2, y: 2 } ]

flatmap

collection에서 선택된 key값의 value를 펼친다음에 새로운 배열에 담아서 리턴해준다. 

 

아래와 같은 배열이 있다고 가정하자.

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

key 값이 tags인 value 값을 배열로 출력하라.

result = _.flatMap(frontList, item => item.tags);
console.log(result);

위 코드를 shorthand로 표현하면 다음과 같다.

result = _.flatMap(frontList, 'tags');
console.log(result);

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

만약 두번째 파라미터에 값을 넣어주지 않으면 flattern과 똑같은 역할을 한다.

 

아래와 같은 배열이 배열이 있다고 하자.

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

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

[ { x: 1, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 2, y: 2 } ]

range

파이썬이랑 똑같음 ㅇㅇ

const num = _.range(1, 1001);
console.log(num);

[
   1,  2,  3,   4,  5,  6,  7,  8,  9, 10, 11, 12,
  13, 14, 15,  16, 17, 18, 19, 20, 21, 22, 23, 24,
  25, 26, 27,  28, 29, 30, 31, 32, 33, 34, 35, 36,
  37, 38, 39,  40, 41, 42, 43, 44, 45, 46, 47, 48,
  49, 50, 51,  52, 53, 54, 55, 56, 57, 58, 59, 60,
  61, 62, 63,  64, 65, 66, 67, 68, 69, 70, 71, 72,
  73, 74, 75,  76, 77, 78, 79, 80, 81, 82, 83, 84,
  85, 86, 87,  88, 89, 90, 91, 92, 93, 94, 95, 96,
  97, 98, 99, 100,
  ... 900 more items
]

 

groupBy

배열을 key 값으로 그루핑한 객체로 리턴한다.

즉, {'key값1': [객체1, 객체2], 'key값2': [객체,3 객체4]} 이런 식으로 리턴한다. 

 

아래와 같은 배열이 있다고 하자.

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

위의 일차원 배열을 x를 키 값으로 그루핑해서 이차원 배열로 변환해라.

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

위와 같이 그룹만 묶어주고 출력을 해보면 결과가 다음과 같이 나온다.

{
  '1': [ { x: 1, y: 1 }, { x: 1, y: 2 } ],
  '2': [ { x: 2, y: 1 }, { x: 2, y: 2 } ]
}

위의 결과에서 객체에서 그루핑한 key 값을 빼고 value값만 얻고 싶으면 _.value() 메서드를 사용하면 된다!

 

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

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

[
  [ { x: 1, y: 1 }, { x: 1, y: 2 } ],
  [ { x: 2, y: 1 }, { x: 2, y: 2 } ]
]