[JavaScript] Lodash 란?

Lodash (https://lodash.com)

→ 모듈성, 성능 및 추가 기능을 제공하는 최신 JavaScript 유틸리티 라이브러리이다

→ 라이센스는 MIT 라이센스로 Object, Array 등의 데이터 구조를 쉽게 변환하는 기능을 제공해준다.

 

설치

npm i -g lodash

 

import

import _ from "lodash"

※ 기본적으로 _ 로  명시해주나, _가 아닌 다른 이름으로 하여도 됨.

 

1. defaultTo

 

기본값 설정 값이 있으면 해당 값을 저장, 값이 비어있으면(null or undefined) 일 경우 기본값을 저장

 

사용법

let a = 100;
a = _.defaultTo(a, 1);
console.log("100 default :", a);

a = undefined;
a = _.defaultTo(a, 1);

console.log("undefined default :", a);

a = "";
a = _.defaultTo(a, 1);
console.log('"" default :', a);

a = null;
a = _.defaultTo(a, 1);
console.log("null :", a);

결과

100 default : 100
undefined default : 1
 "" default : 
null : 1

 

2. uniqBy와 unionBy

중복된 값이 있을 때 중복된 값을 제거

 

사용법

const fruit1 = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "cherry" },
];
const fruit2 = [
  { id: 2, name: "orange" },
  { id: 4, name: "apple" },
];

// 두개 배열 병합
const fruit = fruit1.concat(fruit2);
// 중복 제거
const uniqBy = _.uniqBy(fruit, "id");

// 병합 후 중복제거
const unionBy = _.unionBy(fruit1, fruit2, "id");

console.log("fruit1:", fruit1);
console.log("fruit2:", fruit2);
console.log("fruit:", fruit);
console.log("fruit uniqBy:", uniqBy);
console.log("fruit unionBy:", unionBy);

한개의 배열에서 중복을 제거할 때는 uniqBy 두개 이상의 배열을 병합 시 중복제거 할 때는 unionBy를 사용한다.

 

결과

fruit1: (3) [{…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
length: 3[[Prototype]]: Array(0)

fruit2: (2) [{…}, {…}]
0: {id: 2, name: 'orange'}
1: {id: 4, name: 'apple'}
length: 2[[Prototype]]: Array(0)

fruit: 
(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 2, name: 'orange'}
4:{id: 4, name: 'apple'}
length: 5[[Prototype]]:Array(0)

fruit uniqBy: 
(4) [{…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 3, name: 'cherry'}
3:{id: 4, name: 'apple'}
length:4[[Prototype]]:Array(0)

fruit unionBy: 
(4) [{…}, {…}, {…}, {…}]
0: {id: 1, name: 'apple'}
1: {id: 2, name: 'banana'}
2: {id: 3, name: 'cherry'}
3: {id: 4, name: 'apple'}
length: 4[[Prototype]]: Array(0)

 

 

3. find, findIndex

 

배열 내에 조건에 해당하는 데이터 찾기 또는 데이터의 인덱스 찾기

 

사용법

console.log("fruit find :", _.find(uniqBy, { id: 2 }));
console.log("fruit findIndex :", _.findIndex(uniqBy, { id: 2 }));

결과

fruit find : {id: 2, name: 'banana'}
fruit findIndex : 1

4. remove

 

배열의 조건에 해당하는 데이터 삭제

 

사용법

_.remove(uniqBy, { id: 2 });
console.log("fruit remove :", uniqBy);

 

결과

fruit remove : (3) [{…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 4, name: 'apple'}
length:3[[Prototype]]:Array(0)

 

5. shuffle, sortBy, sortBy revers

 

배열의 순서 랜덤으로 섞기, 배열의 오름차순, 내림차순정렬

 

사용법

const shuffle = _.shuffle(fruit);
console.log("fruit shuffle :", shuffle);
const sort = _.sortBy(shuffle, "id");
console.log("fruit sortBy :", sort);
const reverse = sort.reverse();
console.log("fruit sortBy revers:", reverse);

 

결과

fruit shuffle :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 2, name: 'banana'}
1:{id: 2, name: 'orange'}
2:{id: 4, name: 'apple'}
3:{id: 1, name: 'apple'}
4:{id: 3, name: 'cherry'}
length:5[[Prototype]]:Array(0)

fruit sortBy :(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 1, name: 'apple'}
1:{id: 2, name: 'banana'}
2:{id: 2, name: 'orange'}
3:{id: 3, name: 'cherry'}
4:{id: 4, name: 'apple'}
length:5[[Prototype]]:Array(0)

sortBy revers:(5) [{…}, {…}, {…}, {…}, {…}]
0:{id: 4, name: 'apple'}
1:{id: 3, name: 'cherry'}
2:{id: 2, name: 'orange'}
3:{id: 2, name: 'banana'}
4:{id: 1, name: 'apple'}
length:5[[Prototype]]:Array(0)