[ React ] Lodash - sumBy, filter, includes

최종 목표

---

users의 총목록에서 선택된 사용자들의 time의 총합을 구하기

 

 

selectedUserList은 선택된 사용자들의 목록

---

const selectedUserList = ['홍길동', '고길동']

 

 

사용사들의 총 기록 목록

---

const users = [
    {
        name: "홍길동",
        time: 120,
    },
   {
        name: "고길동",
        time: 60,
    },
    {
        name: "김영희",
        time: 60,
    },
]

 

 

Lodash 사용

---

1. filter, includes 사용해 선택된 user 목록 출력하기

 

_.filter(배열, 배열의 각 값)

// return 필터된 새로운 배열 반환

 

_.includes(검색할 배열, 찾고 싶은 값)

// return: boolean

 

users목록을 user로 각각 돌면서 selectedUserList에 있는 이름과 동일한 경우 filteredList에 추가한다.

const filteredList = _.filter(users, user => _.includes(selectedUserList, user.name))

 

filteredList의 결과

const filteredList = [
    {
        "name": "홍길동",
        "time": 120
    },
    {
        "name": "고길동",
        "time": 60
    }
]

 

 

2. #1에서 출력된 목록에 sumBy를 사용해 총 시간 합 구하기

sumBy를 사용해 filteredList안의 time의 합을 구한다.

const totalTime = _.sumBy(filteredList,'time')

 

totalTime은 선택된 홍길동 120분과 고길동 60분으로 총 180을 출력한다.

 

 

 

전체 코드

---

const selectedUserList = ['홍길동', '고길동']
const users = [
    {
        name: "홍길동",
        time: 120,
    },
   {
        name: "고길동",
        time: 60,
    },
    {
        name: "김영희",
        time: 60,
    },
]

const filteredList = _.filter(users, user => _.includes(selectedUserList, user.name))
const totalTime = _.sumBy(filteredList,'time')
console.log('totalTime', totalTime) // 180

 

 

위 코드 한줄로 쓰는 방법

---

const selectedUserList = ['홍길동', '고길동']
const users = [
    {
        name: "홍길동",
        time: 120,
    },
   {
        name: "고길동",
        time: 60,
    },
    {
        name: "김영희",
        time: 60,
    },
]

const totalTime = _.sumBy(_.filter(users, user => _.includes(selectedUserList, user.name)), 'time')
console.log('totalTime', totalTime) // 180