자바스크립트를 사용하다 보면 한 번쯤은 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/
'IT > JavsScript' 카테고리의 다른 글
자바스크립트의 형변환 (0) | 2022.07.12 |
---|---|
자바스크립트 this 이해하기 (feat. call, apply, bind의 차이) (0) | 2022.07.11 |
반복문 'for', 'forEach', 'map' 사용법과 차이점 (1) | 2022.06.23 |
호이스팅(Hoisting) 이해하기 (0) | 2022.06.15 |
객체 복사 ( Object.assign (), $.extend() ) (0) | 2022.06.13 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)