javaScript(Lodash 사용법)

Dev_Go·2022년 6월 30일
0

javascript(basic) 모음

목록 보기
20/23
post-thumbnail

Lodash


Lodash 홈페이지

Lodash 사용방법

  1. Documentation버튼을 클릭하면 Lodash에서 사용할 수 있는 다양한 메서드들이 나타난다.

  2. 검색을 해서 찾을 수 있고 메서드를 클릭하면 사용방법을 오른쪽에서 확인할 수 있다.

_.uniqBy, _.unionBy 메서드 사용예제

Array.prototype.concat()

둘 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고 대신 새 배열을 반환합니다.


_.uniqBy

하나의 배열데이터에서 특정한 속성이름으로 고유화를 시켜주는 메소드이고 하나의 배열데이터만 인수로 사용할 수 있다.
첫 번째 항목만 유지되는 동등 비교방법을 사용하여 중복 없는 버전의 배열을 만듭니다 .
결과 값의 순서는 배열에서 발생하는 순서에 따라 결정된다.

인수

array (Array) : 검사할 배열입니다.
[iteratee=_.identity] (Function) : 요소별로 호출되는 반복.


_.unionBy

합치기 전에 여러 배열 데이터를 인수에 적어주고 배열 데이터를 합칠때 고유화 작업을 시킬 속성의 이름을 명시해주면 고유한 값의 새로운 배열을 만든다.
결과 값의 순서는 배열에서 발생하는 순서에 따라 결정된다.

인수

[arrays] (...Array) : 검사할 배열입니다.
[iteratee=_.identity] (Function) : 요소별로 호출되는 반복.


예제

import _ from 'lodash'

const usersA = [
  { userId: '1', name: 'Winnie' },
  { userId: '2', name: 'Neo' }
]
const usersB = [
  { userId: '1', name: 'Winnie' },
  { userId: '3', name: 'Amy' }
]
const usersC = usersA.concat(usersB)
console.log('concat', usersC)
console.log('uniqBy', _.uniqBy(usersC, 'userId'))

const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)

결과


_.find, _.findIndex, _.remove 메서드 사용예제

_.find

선언된 배열데이터에서 찾을 기준을 뒤에 명시해줄 수 있다. 찾는 기준이 배열데이터에 포함되어 있으면 반환한다.

인수

collection (Array|Object) : 검사할 컬렉션입니다.
[predicate=_.identity] (Function) : 반복당 호출되는 함수.
[fromIndex=0] (숫자) : 검색할 인덱스입니다.


_.findIndex

선언된 배열데이터에서 찾을 기준을 뒤에 명시해줄 수 있다. 찾는 기준이 배열데이터에 포함되어 있으면 그 객체의 인텍스 번호를 반환한다.

인수

array (Array) : 검사할 배열입니다.
[predicate=_.identity] (Function) : 반복당 호출되는 함수.
[fromIndex=0] (숫자) : 검색할 인덱스입니다.


_.remove

선언된 배열데이터에서 찾을 기준을 뒤에 명시해줄 수 있다. 찾는 기준이 배열데이터에 포함되어 있으면 제거 후 남은 배열데이터를 반환한다.

인수

array (Array) : 수정할 배열입니다.
[predicate=_.identity] (Function) : 반복당 호출되는 함수.


예제

import _ from 'lodash'

const users = [
  { userId: '1', name: 'Winnie' },
  { userId: '2', name: 'Neo' },
  { userId: '3', name: 'Amy' },
  { userId: '4', name: 'Evan' },
  { userId: '5', name: 'Lewis' }
]

const foundUser = _.find(users, { name: 'Amy' })
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
console.log(foundUser)
console.log(foundUserIndex)

_.remove(users, { name: 'Winnie' })
console.log(users)

결과

profile
프론트엔드 4년차

0개의 댓글