Lodash 활용법 알아보기

 

자바스크립트를 사용하다 보면 한 번쯤은 Lodash에 대해 들어보게 됩니다. Lodash는 자바스크립트에서 구현하기 힘든 부분을 보다 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 

성능적인 개선 부분에서도 많이 사용하는데  공식문서 가이드 를 참고해도 사용방법을 알 수 있지만  구체적인 예시가 있어야 이해하기가 쉽기에 아래 예제를 통해 사용 방법을 익혀 봅시다.

👏 Collection

배열과 객체 모두 사용 가능한 메서드

💡 filter

_.filter( 컬렉션, 검색할 데이터 또는 콜백 함수 )
컬렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 포함한 컬렉션을 반환합니다. 리스트 검색 조건에 유용합니다.

var users = [
  { user: 'barney', age: 36, active: true },
  { user: 'fred', age: 40, active: false },
];

_.filter(users, (o) => !o.active);
// => [ { 'user': 'fred',   'age': 40, 'active': false } ]

// _.matches 메소드가 생략된 형태
_.filter(users, { age: 36, active: true });
// === _.filter(users, _.matches({ 'age': 36, 'active': true }))
// => [ { 'user': 'barney', 'age': 36, 'active': true } ]

// _.matchesProperty 메소드가 생략된 형태
_.filter(users, ['active', false]);
// => [ { 'user': 'fred',   'age': 40, 'active': false } ]

// _.property 메소드가 생략된 형태
_.filter(users, 'active');
// => [ { 'user': 'barney', 'age': 36, 'active': true } ]

💡 reject

_.reject( 컬렉션, 제외시킬 데이터 또는 콜백 함수 )
컬렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 제외한 컬렉션을 반환하며. Delete API를 호출 한 뒤 삭제된 결괏값을 제외해서 리스트를 갱신하고 싶을 때 유용합니다.

 

💡 size

_.size( 컬렉션 )
컬렉션의 사이즈를 반환한다. length와 같다고 생각하면 됩니다.

_.size([1, 2, 3])
// => 3

_.size({ 'a': 1, 'b': 2 })
// => 2

_.size('apple')
// => 5

 

💡 sampleSize

_.sampleSize( 컬렉션, [추출 개수=1])
컬렉션에서 추출 개수만큼 랜덤 값을 배열로 반환합니다.

_.sampleSize(_.range(1, 45), 7);
// => 로또 번호 추출

 

👏 Array

배열에 사용 가능한 메서드

💡 compact

_.compact( 배열 )
배열에서 false, null, 0, “”(빈 값), undefined, NaN의 값을 제외시킨 배열을 반환합니다.

_.compact([0, 1, false, 2, '',undefined, 3]);
// => [1, 2, 3]

 

💡 take

_.take( 배열, [가져올 요소 수=1])
배열에서 앞에서부터 n개의 요소를 반환합니다.

_.take([3, 5, 4, 7, 9], 3);
// => [3, 5, 4]​

 

💡 uniq

_.uniq( 배열 )
배열의 중복 값을 제거합니다.

_.uniq([1, 1, 3]);
// => [1, 3]

 

💡 zip

_.zip( 배열, 배열… )
배열의 인덱스에 따라 배열을 다시 만듭니다.

_.zip(['a', 'b'], [1, 2], [true, false]);
// => [['a', 1, true], ['b', 2, false]]​

 

👏 Object

객체에 사용 가능한 메서드

💡 get

_.get( 객체, 가져올 키, 기본값 )
객체에서 해당 키(key) 값에 해당하는 값(Value)을 가져옵니다.

 

const object = { a: 1, b: 2, c: 3, e: { f: 5 } };

_.get(object, 'a');
// => 1

_.get(object, 'd');
// undefined

_.get(object, 'd', 4);
// 4

💡 omit

_.omit( 객체, 제외할 키 배열 )
객체에서 해당 키(key)에 해당하는 값을 제외한 객체를 반환합니다.

 

const object = { a: 1, b: '2', c: 3 };

_.omit(object, ['a', 'c']);
// => { 'b': '2' }

_.omit(object, 'a');
// => { 'b': '2', 'c': 3 }

💡 values

_.values( 객체 )
객체에서 값만을 추출한 배열을 반환합니다.

 

_.values({ a: 1, b: 2, c: [3, 4] });
// => [ 1, 2, [3, 4] ]

_.values('hi');
// => ['h', 'i']

👏 Util

유틸성이 있는 메서드

💡 constant

_.constant( 반환 값 )
반환 값을 반환해주는 함수로. 단독으로는 거의 사용하지 않고, 다른 Lodash 함수들과 같이 사용한다.

_.constant(0);
// => 0

_.constant({ a: 1 });
// => { a: 1 }​

 

💡 times

_.times( 반복 횟수, 콜백 함수 )
콜백함수 조건에 맞게 반복 횟수만큼의 데이터를 배열로 반환합니다. 초기화를 시킬 때도 유용합니다

 

.times(3, _.constant(0));
// => [0, 0, 0]

💡 range

_.range( [시작 인덱스], 종료 인덱스, [증가 폭=1])
배열을 초기화시킬 때 유용하다. 단지 배열을 숫자로 초기화해야 된다면 _.range가 속도면에서 _.times(n, constant)보다월등히 속도가 빠릅니다.

_.range(0, 6, 0);
// => [0, 0, 0, 0, 0, 0]

_.range(4);
// => [0, 1, 2, 3]

 

출처 : https://gracefullight.dev/2016/12/25/Lodash-%ED%99%9C%EC%9A%A9%EB%B2%95/