JS - Lodash ?

1. Lodash 란?

   1-1. 정의

 

• Lodash란 자바스크립트의 라이브러리로 개발을 할 때 일반적으로 많이 사용하는 기능들을 모아 제공해줍니다. 객체, 배열 등의 데이터 구조에서 데이터를 쉽게 찾거나 변환이 가능하여 자바스크립트 유틸 라이브러리로 가장 많이 쓰이고 있습니다.
• _ 기호를 사용하여 명칭이 Lodash입니다.

 

   1-2. 사용 이유

 

Lodash는 외부 라이브러리를 사용하기 때문에 무겁고 ES6에 비해 속도가 느립니다. (단점)

그렇다면 왜 사용하는 것일까요? 그 이유는 크게 아래와 같습니다.

 

• 메서드에서 제공하는 다양한 기능으로 생산성이 높습니다.
• 다양한 데이터 타입을 지원하므로 처리가 용이합니다.
• 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메서드가 있습니다.

 

   1-3. ES6와 비교

 

ES6는 어떤 장/단점이 있는지 찾아봤습니다.

 

• 장점
  
  
  1. 속도가 빠르다.
  2. 코드 유지 및 보수가 편하다.
  3. 기본 문법이기 때문에 호환성이 좋다.
• 단점
  
  
  1. Array 타입만 지원하기 때문에 예외처리가 필요하다. 
  2. 복잡한 데이터 처리에는 사용할 메서드를 직접 만들어야 하기 때문에 번거롭다.

ES6 : 초기 로딩 속도를 빠르게 하거나 리소스 양을 줄여야 하고 처리할 데이터가 많지 않은 경우 
Lodash : 예외 처리에 대한 오류가 발생하여 위험한 상황이나, 다양한 데이터 타입을 가공해야 하는 경우
사용하는 것이 좋을 것 같습니다!

2. Lodash 설치

Lodash 공식 홈페이지에서 설치방법 3가지를 제공합니다.

 

   2-1. 브라우저

<script src="lodash.js"></script>

   2-2. npm

$ npm i -g npm
$ npm i --save lodash

   2-3. Node.js

// lodash 라이브러리 전체 로드
var _ = require('lodash');

// 코어 모듈 로드
var _ = require('lodash/core');

// 메소드 그룹 별 로드
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// 메소드 별 로드
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

3. Lodash 메서드

Lodash Documentation

위 Lodash 공식 문서를 보면 알 수 있듯이 많은 메서드를 제공합니다. 그중에서 제가 ES6와 비슷한 문법이 아니면서 제가 자주 사용했던 메서드 몇 개만 정리해보겠습니다. 더 많은 내용은 위 공식 문서에서 찾아보시면 좋을 것 같습니다!

 

   _.uniqBy

/*
    _.unionBy(배열)
    배열 데이터 중복 값 제거 후 반환
*/

let temp = _.uniqBy([1, 2, 3, 3, 3, 4, 5]); // == [1, 2, 3, 4, 5]

   _.uniqBy

/*
    _.unionBy(배열1, 배열2, ... );
    2개 이상의 배열의 데이터를 합치고, 중복 값을 제거 후 반환
*/

let temp = _.unionBy([1, 2, 3], [2, 3, 4, 4, 5, 6], [7, 8], [7, 8, 9, 10, 10]);
// == [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

   _.remove

/*
    _.remove(배열, 제거조건)
    배열의 데이터 중 제거 조건에 맞는 데이터를 제거 후 반환
*/

let arrData = [
			{ name: 'aa', age: 18 },
			{ name: 'bb', age: 20 },
			{ name: 'cc', age: 22 },
		];
        
let temp = _.remove(arrData, { name: 'aa' });
// == [{name: 'aa', age: 18}]

console.log(arrData);
/* == 
    [
        { name: 'bb', age: 20 },
        { name: 'cc', age: 22 },
    ]
*/

   ES6와 같은 메서드 명의 차이점 (ex. findIndex, map) 

let temp1 = arrData.findIndex(dr => {
	return dr.age === 22;
});

let temp2 = _.findIndex(arrData, function (dr) {
	return dr.age === 22;
});
let temp3 = _.findIndex(arrData, { age: 22 });

/*
temp1,2,3 모두 결과값 2로 같음

ES6의 findIndex()는 파라미터로 콜백함수밖에 못오지만,
Losash의 findIndex()는 객체값도 줄수 있다는

차이점이 있음.
*/

const data = {
	a: 20,
	b: 30,
	c: 10,
};
        
let doubleData = _.map(data, (count, type) => ({
	type: type,
	count: count * 2,
}));

// ==
// [
//   { type: 'a', count: 40 },
//   { type: 'b', count: 60 },
//   { type: 'c', count: 20 }
// ]

// 원래라면 map메소드는 배열에서 못쓰지만, _.map은 객체 자페를 map할 수 있음

🤔  정리 !

• Lodash란 다양한 데이터 구조를 다룰 수 있는 자바스크립트 유틸 라이브러리!
• ES6와 비교했을 때 장단점이 있기 때문에, 예외 처리에 대한 오류가 발생할 가능성이 있거나 다양한 데이터 타입들을 가공해야 할 경우 사용하는 것을 추천!

 

공부를 하다 보니 Lodash 라이브러리가 ES6보다 성능이 좋을 수 있다는 말이 많았다! 이를 이해하기 위해서는 ES6의 엄격한 평가 / Lodash의 지연 평가의 개념에 대해 알아야 한다! 블로그에 따로 정리하고 링크를 걸어둬야겠다!

 

🔗 참고한 글

Lodash