Lodash 정리 및 사용법

개요

---

• 자바스크립트 유틸리티 라이브러리로 _(underscore) 라이브러리 파생
• 데이터를 쉽게 다룰 수 있도록 도와줍니다. (예시로 배열 안에 중복 값을 제거 혹은 원하는 값 찾기 등..)
• React 프로젝트에서도 많이 쓰이며, Angular 프로젝트에서 개발하고 있는 저 또한 정말 많이 사용하고 있는 라이브러리입니다.

사용법

---

제가 주로 많이 사용하는 함수 한에서 작성해보았습니다.

Array 관련 함수

---

_.findIndex() 

const users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
// 콜백함수를 실행하여 결과가 처음으로 true인 인덱스 반환
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// 오브젝트 조건으로 결과가 처음으로 true인 인덱스 반환
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 

_.reverse()

const array = [1, 2, 3];
 
// array의 순서를 역순으로 변경
_.reverse(array);
// => [3, 2, 1]
 
console.log(array);
// => [3, 2, 1]

Collection 관련 함수

---

_.find()

const users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
// 콜백함수를 실행하여 결과가 처음으로 true인 오브젝트 반환
_.find(users, function(o) { return o.age < 40; });
// => { 'user': 'barney',  'age': 36, 'active': true }
 
// 오브젝트 조건으로 결과가 처음으로 true인 오브젝트 반환
_.find(users, { 'age': 1, 'active': true });
// =>  { 'user': 'pebbles', 'age': 1,  'active': true }
 
// 배열 조건으로 결과가 처음으로 true인 오브젝트 반환
_.find(users, ['active', false]);
// => { 'user': 'fred',    'age': 40, 'active': false }
 
// active가 처음으로 true인 오브젝트 반환
_.find(users, 'active');
// => { 'user': 'barney',  'age': 36, 'active': true }

_.filter()

const users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred', 'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1, 'active': true },
  { 'user': 'smith', 'age': 14, 'active': false }
];

console.log(_.filter(users, function (o) { return !o.active; }));
// => [{"user":"fred","age":40,"active":false}
//	  ,{"user":"smith","age":14,"active":false}]

console.log(_.filter(users, { 'age': 36, 'active': true }));
// => [{"user":"barney","age":36,"active":true}]

console.log(_.filter(users, ['active', false]));
// => [{"user":"fred","age":40,"active":false}
//	  ,{"user":"smith","age":14,"active":false}]

console.log(_.filter(users, 'active'));
// => [{"user":"barney","age":36,"active":true}
//	  ,{"user":"pebbles","age":1,"active":true}]

find 함수와 filter 함수 차이는 find 함수는 조건이 true인 첫번째 결과만 반환하며, filter 함수는 결과가 true인 모든 조건들을 배열로 반환합니다.

기타 함수

---

_.cloneDeep() 

복사하고자 하는 값이 내부 자식 요소를 포함하여 모두 참조 형태가 아닌 새로운 값이 매핑되는 형태로 복사

let objects = [{ 'a': 1 }, { 'b': 2 }];
 
let deep = _.cloneDeep(objects);
// 내부값 비교
console.log(deep[0] === objects[0]);
// => false

References

---

https://lodash.com/docs - Lodash Documentation