---

Lodash

객체, 배열 등의 데이터의 구조를 쉽게 변환하는 JavaScript 라이브러리

Lodash는 주로 배열, 숫자, 객체, 문자열...등을 순회하면서 각 요소마다 원하는 기능을 실행하거나, 구현하기 번거로운 함수들을 제공해주는 JavaScript 라이브러리이다.

그래서 데이터를 handling 할때 복잡한 자바스크립트 코드를 보다 빠르고 간결하게 사용할 수 있다.

---

사용 방법

Install

아래 npm명령어를 통해 Lodash를 설치한다.

npm i --save lodash

Import

Lodash를 import 할때, 중괄호({ })로 감싸지 않는다면, 보통 밑줄( _ )이나, 다른 이름을 지정하여 사용한다.

import _ from 'lodash';
import _.find from 'lodash/find';

Method

Lodash에서 사용하는 대표적인 Method 종류는 다음과 같다.

includes

includes는 해당 배열에 특정 값의 존재여부를 Boolean값으로 반환한다.

_.includes(collection, target, [fromIndex=0])

_.includes([1, 'e', 6], 1); // true
_.includes([1, 'e', 6], 'e'); // true
_.includes('hellolodash', 'lo'); // true

findIndex

findIndex는 배열 내 조건과 일치하는 index를 반환하며, 중복시에는 첫 index를 반환한다.

_.findindex(array,[predicate=.indentity],[thisArg])

let fruits = [
 { name:'apple', price: 100 },
 { name:'peach', price: 100 },
 { name:'banana', price: 80 },
 { name:'orange', price: 110 }, 
];

_.findIndex(fruits, (fruit) => {
  return fruit.price === 100; // 0
});
_.findIndex(fruits, { name: 'banana', price: 80 }); // 2
_.findIndex(fruits, price: 110); // 3

find

find는 해당 조건에 만족하는 첫번째 요소를 반환한다.

_.find(collection, [predicate=.identity], [thisArg])

let fruits = [
 { name:'apple', price: 100 },
 { name:'peach', price: 100 },
 { name:'banana', price: 80 },
 { name:'orange', price: 110 }, 
];

_.find(fruits, (fruit) => {
  return fruit.price < 90; //  {name:'banana', price: 80}
});

filter

filter는 해당 조건을 만족하는 모든 요소를 반환한다.

_.filter(collection, [predicate=.identity], [thisArg])

let fruits = [
 { name:'apple', price: 100 },
 { name:'peach', price: 100 },
 { name:'banana', price: 80 },
 { name:'orange', price: 110 }, 
];

_.filter(fruits, { name:'apple', price: 100 });
// { name:'apple', price: 100 }

_.filter(fruits, (fruit) => fruit.price === 100);
// [
//   { name:'apple', price: 100 },
//   { name:'peach', price: 100 },
// ]

remove

remove는 조건에 맞는 배열 내 요소들을 제거한 뒤 반환한다.

_.remove(array, [predicate=.identity], [thisArg])

let arr = [ 2, 9, 1, 4 ];
let removeArr = _.remove(arr, (n) => {
   return n % 2 === 0; 
});

console.log(array); //-> [9, 1]
console.log(removeArr); //-> [2, 4]

map

map은 각각의 요소별로 Callback함수를 실행한 결과를 배열로 반환한다.

key값을 입력한 경우에는 해당 key값들만 반환한다.

_.map(collection, [iteratee=.identity], [thisArg])

const increment = (n) => {
  return n + 1;
};
_.map([1,2], increment); // [2, 3]

let fruits = [
  {'name': 'apple'},
  {'name': 'banana'},
];
_.map(fruits, 'name'); // ['apple', 'banana']

forEach

forEach는 각각의 요소별로 Callback함수를 실행한다.

_.forEach(collection, [iteratee=.identity], [thisArg])

_.([1, 2]).forEach((n) => {
  console.log(n);
})
.value();
// 1
// 2

flatten

flatten은 다차원 배열의 요소를 보다 간편하게 출력한다.

두번째 인자, depth를 설정하지 않은 경우에는 1depth만 적용된다.

_.flatten(arraym[isDeep])

_.flatten([2, [4, 5, [1]]]); // → [2, 4, 5, [1]]
_.flatten([2, [4, 5, [1]]], true); // → [2, 4, 5, 1]

every

every는 배열의 요소들을 비교하고 분석하여 해당 결과를 Boolean값으로 반환한다.

_.every(collection, [predicate=.identity], [thisArg])

let fruits = [
 { name:'apple', price: 100, sale: true },
 { name:'peach', price: 100, sale: true },
 { name:'banana', price: 80, sale: true },
 { name:'orange', price: 110, sale: true }, 
];

_.every(fruits, { name: 'apple', price: 100 }); // → true
_.every(fruits, 'name', banana); // → true
_.every(fruits, 'sale'); // → true

reduce

reduce는 배열 내부의 값을 통해 Callback함수를 실행하여 결과를 반환한다.

_.reduce(collection, [iteratee=.identity], [accumulator], [thisArg])

_.reduce([4, 9], (sum, n) => {
  return sum + n; // 13
});

---

참고 자료

Lodash 공식 홈페이지