[JavaScript] lodash library란?

lodash library에 대해 알아보자 

 

 

 

[ lodash ]

lodash는 JavaScript의 인기 있는 라이브러리 중 하나입니다. 

보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다루기 위해 사용합니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용합니다. 

 

이런 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다.

 

ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작합니다.
_라는 기호를 이용해서 사용하기 때문에 명칭 또한 lodash가 된 것이죠.

 

그 외에 lodash를 사용하는 이유들은 다음과 같습니다.

• 브라우저에서 지원하지 않는 성능이 보장되어 있는다양한 메서드를 가지고 있음.
• 퍼포먼스 측면에서 native보다 더 나은 성능을 가짐.
• npm이나 기타 패키지 매니저를 통해 쉽게 사용 가능.

 

여러 가지 사용 방법이 있지만, 가장 사용하기 쉬운 방법은 https://lodash.com/ 에서 min.js 파일을 다운로드하는 것입니다. 

 

 

 

대충 이런 파일 : )

 

 

 

사용 시 주의할 점은 lodash 라이브러리를 사용할 js 파일보다 위에 선언되어 있어야 한다는 것입니다. 

 

 

 

[ lodash method ]

 

lodash에는 여러 가지 method가 있지만 그중 많이 쓰이는 method에 대해 알아보겠습니다. 

 

 

※ array 관련 method 

 

findIndex()

형식: _.findindex(array,[predicate=.indentity],[thisArg])
출력: index number
배열 내에서 원하는 index를 쉽게 구할 수 있습니다.

 

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
// 콜백함수를 통해 user의 이름이 barney인 객체의 index를 반환
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// 이름이 fred이고 active 상태가 false인 객체의 index를 반환
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// active 상태가 false인 객체 중 첫번째 index를 반환
_.findIndex(users, ['active', false]);
// => 0
 
// active 상태가 true인 객체의 index를 
_.findIndex(users, 'active');
// => 2

 

 

flatten() 

형식: _.flatten(arraym[isDeep])
다차원 배열 내의 요소를 출력하는데 편리합니다.

 

// 배열안의 배열 값을 순서대로 나열합니다.(depth를 명시하지 않을 경우1depth만)
 
_.flatten([1, [2, 3, [4]]]);
// → [1, 2, 3, [4]]
 
// 배열안의 배열 값을 깊이와 상관없이 순서대로 나열합니다.
_.flatten([1, [2, 3, [4]]], true);
// → [1, 2, 3, 4]

 

 

remove()

형식: .remove(array, [predicate=.identity], [thisArg])
출력: 제거된 array
배열 내의 조건에 맞는 요소들을 제거한 후 반환해줍니다.

 

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

 

---

 

※ collection 관련 method 

 

every()

형식: .every(collection, [predicate=.identity], [thisArg])
출력: boolean 값
배열 안 요소들의 값들을 비교하고 분석하는데 용이합니다.

 

var myFriend = [
  { name: 'kys', active: false },
  { name: 'cys', active: false }
];
 
// 값을 비교할 수 있습니다.
_.every(myFriend, { name: 'kys', active: false });
// → true
 
// key와 value가 있는지 확인할 수 있습니다.
_.every(myFriend, 'active', false);
// → true
 
// key에 해당하는 value가 모두 true이면 true를 반환합니다.
_.every(myFriend, 'active');
// → false

 

 

find()

형식: .find(collection, [predicate=.identity], [thisArg])
find()는 조건을 만족하는 컬렉션에서의 첫번째 요소를 찾는 메소드입니다.

 

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}

 

 

filter()

형식: .filter(collection, [predicate=.identity], [thisArg])
filter()는 특정 조건을 만족하는 모든 요소를 추출하는 메소드입니다.

 

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},
]
 
// 입력한 object의 key와 value들을 모두 포함하는 객체들을 배열로 반환합니다.
_.filter(myFriend, { age: 26, job: 'florist' });
// → [{ name: 'yhs',job:'florist', age: 26}]
 
 
// 입력한 key값이 true인 객체들을 배열로 반환합니다.
_.filter(myFriend, friend=>friend.age==26);
// → [{ name: 'yhs',job:'florist', age: 26}]

 

 

map()

형식: .map(collection, [iteratee=.identity], [thisArg])
출력: 계산 결과 배열함수를 실행하고 그 결과를 배열로 반환합니다.
key값을 입력할 경우 해당 key값들만 간추려서 반환홥니다.

 

function doubles(n) {
  return n * 2;
}
 
_.map([1,2],doubles);
//->[2,4]
 
var myFriend=[
  {'name':'kys'},
  {'name':'cys'},
];
 
.map(myFriend,'name');
//->['kys','cys']

 

forEach()

형식: .forEach(collection, [iteratee=.identity], [thisArg])
배열의 값마다 함수를 실행시킬 때 용이하게 사용됩니다.

 

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

 

 

includes()

형식: _.includes(collection, target, [fromIndex=0])
출력: boolean
해당 collection에 target값이 있는지 판별해줍니다.

 

// 배열에 값이 있는지 찾습니다.
_.includes([1, 2, 3], 1);
// → true
 
// index에 해당 값이 있는지 찾습니다.
_.includes([1, 2, 3], 1, 2);
// → false
 
// 일치하는 값이 있는지 찾습니다.
_.includes({ 'name': 'yhs', 'age': 26 }, 'yhs');
// → true
 
// 일치하는 값이 문자열 안에 있는지 찾습니다.
_.includes('dontknow', 'ont');
// → true

 

 

reduce()

형식: .reduce(collection, [iteratee=.identity], [accumulator], [thisArg])

 

//첫번째 인자에 대해 배열 내부의 값을 통해 콜백함수를 실행시킨 후 결과값을 반환합니다.
 
_.reduce([1, 2], function(total, n) {
  return total + n;
});
// → 3

 

 

REF: https://lodash.com/

        https://velog.io/@kysung95/%EC% A7% A4% EB% A7%89% EA% B8%80-lodash-%EC%95% 8C% EA% B3% A0-%EC%93% B0% EC% 9E%90