[Javascript] lodash의 설명과 예제, 자주 쓰는 함수

이전 포스팅에서도 lodash 코드를 간략하게 올린 적이 있다.

 - 공식 문서 : https://lodash.com/docs/4.17.15

 - 참조 URL : https://solyi.kr/215 

[Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodas

 

lodash는 기능적 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능을 제공하는 Javscript 라이브러리입니다 (영문 wiki 제공)

 

이전 포스팅에서는 _.deepClone(객체) 코드를 사용하여 깊은 복사를 지원하는 내용을 학습했다.

일반적으로 객체를 복사하여도 같은 메모리 주소를 공유하기 때문에 객체들의 데이터가 틀어질 수 있는데 

다른 메모리에 배치하여 복사하는 개념이라고 생각하면 된다.

 

npm 기준 npm i lodash 로 설치가 가능하고, 개발자옵션인 -D는 붙이지 않도록 주의한다.

 

자주 사용하는 lodash의 기능을 소개하려고 한다.

 

 

• _.uniq(데이터)
  • 배열 데이터가 1개일 때 주로 사용하며 배열 데이터 내의 중복 값을 제거해준다.
• _.unionBy(데이터1, 데이터 2, 고유지정값)
  • 세 번째 인수인 '고유지정값(예를들어 userID)'을 기준으로 데이터1, 2의 더해서 출력할 수 있다.
  • SQL에서 사용되는 UNION 과 같은 개념인 것 같다!
• _.find(데이터, 조회할값)
  • 조건에 일치하는 객체 전체의 값을 반환한다.
• _.findIndex(데이터, 조회할 값)
  • 조건에 일치하는 index값을 반환한다.
• _.remove(배열, 삭제할 값)
  • 배열 에서 삭제할 값을 검색하여 그 부분을 삭제해준다. 객체 삭제가 아님을 유의

 

아래 예제 데이터 참고!

import _ from 'lodash'
// lodash 사용 방법
// 참조  URL : https://lodash.com/docs/4.17.15

// 데이터
const usersA = [
  { userId: '1',  name: 'solyi'},
  { userId: '2',  name: 'carol'}
]
const usersB = [
  { userId: '1',  name: 'solyi'},
  { userId: '3',  name: 'Amy'}
]

// _.uniq(데이터) = 중복제거
// 배열데이터가 하나일때 사용
console.group('@ _.uniq(데이터) = 중복제거')
const usersC = usersA.concat(usersB)
console.log('CONCAT > ', usersC)      // 1 2 1 3 으로 중복도 함께 출력 됨
console.log('uniqBy > ', _.uniqBy(usersC, 'userId'))     // 1 2 3 중복제거된 데이터 출력
console.groupEnd()

// _.unionBy(데이터1, 데이터2, 고유지정값) = 고유한 값들을 합침
// 배열 데이터가 여러개일때 사용
console.group('@ _.unionBy(데이터1, 데이터2, 고유지정값) = 고유한 값들을 합침')
const  usersD = _.unionBy(usersA, usersB, 'userId') //고유한 내용으로 합칠수있음
console.log('unionBy > ' , usersD)
console.groupEnd()



// _.find     // 조회
// _.findIndex  //조회
console.group('@ _.find(데이터, 찾고자하는값  객체 전체 반환')
console.log('@ _.findIndex(데이터), 찾고자 하는값  > index 값 반환 ')   
const users = [
  
  { userId: '1',  name: 'solyi'},
  { userId: '2',  name: 'Amy'},
  { userId: '3',  name: 'carol'},
  { userId: '4',  name: 'sunny'},
  { userId: '5',  name: 'solyi'}
]
const foundUser = _.find(users, { name:'Amy'})
console.log(foundUser)
const foundUserIndex = _.findIndex(users, {name: 'Amy'})
console.log(foundUserIndex)
console.groupEnd()

// _.remove   //삭제
console.group('@ _.remove(배열, 삭제할값)')
_.remove(users,{ name: 'solyi'})
console.log(users)

 

 Github -> https://github.com/choi-solyi/startJsTs/blob/master/javascript/main_P4_CH2_02lodash.js