JavaScript 데이터 실습 - Lodash 함수들

_.uniqBy(array, 'key') _.unionBy(array, 'key')

: 배열데이터 안의 중복 데이터 제거

import _ from 'lodash' // 이름이 { }로 감싸지지 않았으므로 default 내보내기이다.

const usersA = [
  { userId: '1', name: 'Riam'},
  { userId: '2', name: 'Do'}
]

const usersB = [
  { userId: '1', name: 'Riam'},
  { userId: '3', name: 'Claudette'}
]
const usersC = usersA.concat(usersB)
console.log('concat', usersC)
// 결과: [{ userId: '1', name: 'Riam'}, { userId: '2', name: 'Do'}, { userId: '1', name: 'Riam'}, { userId: '3', name: 'Claudette'}]
console.log('uniqBy', _.uniqBy(usersC, 'userId'))
// 결과: [{ userId: '1', name: 'Riam'}, { userId: '2', name: 'Do'}, { userId: '3', name: 'Claudette'}]

const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)
// 결과: [{ userId: '1', name: 'Riam'}, { userId: '2', name: 'Do'}, { userId: '1', name: 'Riam'}, { userId: '3', name: 'Claudette'}]

Lodash는 사용 시 _로 사용하길 권장한다.

concat을 하게되면 배열을 그냥 이어붙이기만 하여 Riam이라는 유저 정보가 중복되게 된다.

이미 중복이 일어난 배열에 대해 중복 제거를 하기 위해선 uniqBy() 함수를 사용하면 된다.

import _ from 'lodash'

_.uniqBy(대상 배열, 'key')

중복 제거와 동시에 배열을 병합하기 위해서는 unionBy() 함수를 사용하면 된다.

import _ from 'lodash'

_.unionBy(대상 배열1, 대상 배열2, ... , 'key')

 

_.find(target, source, start)

: target에서 start의 index부터 source를 찾아 맨 첫 번째의 객체를 반환

 

_.findIndex(target, source, start)

: target에서 start의 index부터 source를 찾아 첫 번째 인덱스 번호를 반환

 

_.remove(target, source)

: target에서 source를 삭제.

 

import _ from 'lodash'

const users = [
  { userId: '1', name: 'Riam'},
  { userId: '2', name: 'Do'},
  { userId: '3', name: 'Claudette'},
  { userId: '4', name: 'Jake'},
  { userId: '5', name: 'Peng'},
  { userId: '6', name: 'Evian'},
  { userId: '7', name: 'Claudette'}
]

console.log(users)
const foundUser = _.find(users, {name: 'Claudette'})
const foundUserIndex = _.findIndex(users, {name: 'Claudette'})
console.log('Users 전체 내용', users)
console.log('Find',foundUser)
console.log('FindIndex',foundUserIndex)

// _.remove(users, {name: 'Claudette'})
// console.log('Remove',users)

users에는 'Claudette'이 userId만 다르게 중복되어 들어가 있다.

그대로 출력하게 되면 다음과 같은 결과가 출력된다.

console.log(users)

여기서 _.findUser() 함수를 이용하여 'Claudette'를 찾게 되면 6번에 있는 클로뎃은 무시된 채 2번에 있는 클로뎃만이 출력된다.

_.findUserIndex() 함수 또한 제일 앞에 있는 클로뎃을 인식하여 숫자 2를 반환하게 된다.

_.findUser(target, source), _.findUserIndex(target, source)

만약 _.findUser() 와 _.findUserIndex()의 세번째 인수로 숫자를 넣게 되면 해당 숫자의 인덱스 번호부터 검색을 시작한다.

const foundUser = _.find(users, {name: 'Claudette'}, 2)
const foundUserIndex = _.findIndex(users, {name: 'Claudette'}, 2)
// 결과: Id가 2인 클로뎃이 출력된다.

const foundUser = _.find(users, {name: 'Claudette'}, 3)
const foundUserIndex = _.findIndex(users, {name: 'Claudette'}, 3)
// 결과: Id가 7인 클로뎃이 출력된다.

_.findUser(target, source, start) _.findUserIndex(target, source, start)