[JavaScript] lodash 라이브러리

lodash란?

JavaScript의 라이브러리 중 하나이며, 전세계적으로 많이 사용되는 라이브러리 중 하나이다.

주로 array, collection, date 같은 데이터의 구조를 간편하게 함수형으로 다룰 수 있게 하기 위해서 탄생했다.

특히 frontend 환경에서 서버(DB)에서 받은 데이터를 정렬하고 사용할 때 많이 쓰인다.

밑줄 (_) 기호를 선언하여 사용된다.

_.변수 이런 식으로 작성할 경우 lodash wrapper로 변수로 감싸게 되면서 해당 변수에 대한 chaining을 시작한다.

 

공식문서: https://lodash.com/

Lodash

 

 

 

 

 

 

lodash를 사용하는 이유

• 브라우저에서 지원하지 않는 성능이 보장되어있는 다양한 메소드를 가지고 있다
• 퍼포먼스 측면에서 native보다 더 나은 성능을 가졌다
• npm이나 기타 패키지 매니저를 통해 쉽게 사용 가능하다
• 함수의 확장성 때문에 사용한다 (대부분의 같은 기능을 하는 함수 ES6 문법이 성능이 더 빠르다)

 

 

 

 

lodash 설치하기

$ npm install --save lodash
$ npm install -g npm  // global 설치

 

브라우저에서 사용할 때

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

 

Node.js 에서 사용할 때

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

 

 

 

 

 

 

lodash method

array 관련 method

• findIndex() : 배열 내에서 원하는 index를 쉽게 구할 수 있다.
• flatten() : 다차원 배열 내의 요소를 출력하는데 편리
• remove() : 배열 내의 조건에 맞는 요소들을 제거한 후 반환해준다

 

collection 관련 method

• every() : 배열 안 요소들의 값들을 비교하고 분석하는데 편하다 (boolean 값으로 출력)
• find() : 조건을 만족하는 컬렉션에서의 첫 번째 요소를 찾는 메소드
• filter() : 특정 조건을 만족하는 모든 요소를 추출하는 메소드
• map() : 계산 결과 배열 함수를 실행하고 그 결과를 배열로 반환
• forEach() : 배열의 값마다 함수를 실행시킬 때 사용
• includes() : 해당 collection에 target 값이 있는지 판별해준다 (boolean 값으로 출력)
• reduce() :  첫번째 인자에 대해 배열 내부의 값을 통해 콜백함수를 실행시킨 후 결과값을 반환

 

깊은 복사를 할 때 사용

• cloneDeep(value) : 배열 안의 데이터를 깊은 복사할 때 사용

코어 자바스크립트 중첩 객체 복사 부분에도 lodash가 언급되어 있다. (바로가기)

 

 

 

 

 

 

lodash를 사용하는 예제

// import를 해줘야 사용할 수 있다
import _ from 'lodash';
 
var _ = require('lodash');
 
var myFriend=[
    {name:'kys',job:'developer',age:27},
    {name:'cys',job:'webtoons man',age:27},
    {name:'yhs',job:'florist',age:26},
    {name:'chj',job:'nonghyup man',age:27},
    {name:'ghh',job:'coffee man',age:27},
    {name:'ldh',job:'kangaroo',age:27},
]
 
// 콜백함수가 처음으로 참이되는 객체를 반환
_.find(myFriend, function(friend) {
	return friend.age < 28;
}); // → { name: 'kys',job:'developer' ,'age': 27}

 

 

 

 

 

 

lodash와 ES6 차이

	장점	단점
Lodash	메소드에서 제공하는 다양한 기능으로 생산성이 높다	외부 라이브러리를 사용하기 때문에 무겁다. ES6에 비하여 속도가 느리다.
ES6	속도가 빠르다 기본 문법이라 호환성이 좋다	예외 처리를 잘해야 한다. (Array 타입밖에 지원을 안하기 때문) 복잡한 데이터 처리에는 직접 메소드를 만들어야 하므로 번거롭다.

인용 출처: https://inpa.tistory.com/entry/LODASH-%F0%9F%93%9A-Lodash-vs-ES6-%EC%84%A4%EC%B9%98-%EC%9B%90%EB%A6%AC

[LODASH] 📚 Lodash.js 소개 및 ES6 자바스크립트와 비교

 

 

 

 

 

 

 

 

 

 

---

몇 주 전에 스터디 하다가 배운 라이브러리였는데, 이번에 유데미에서 강의를 듣다가 또 나와서 복습 겸 정리했다.

그 때 한번 예제를 적어보면서 실습해봤는데, 아직은 잘 감이 잡히지 않는다.

이렇게 한 번 익혀두고 나중에 다시 보면 좀 더 알지 않을까 싶다.

 

모든 건 내 블로그가 아닌 공식문서를 다시 보는걸로..!!