lodash 유용하게쓰기 (응용해서 쓰기)

이번에 회사에서 업무를 진행하면서,

서버에서 내려준 데이터를 다양한 곳에서 사용할때 데이터 포멧팅이 필요한 경우가 많았습니다.

여러 배열과 객체를 내가 원하는 포멧으로 포멧팅을 진행하고자 할때 lodash를 유용하게 썼습니다.

다양하게 제공해주는 것들이 많아서 편했습니다.

문서도 너무 잘나와있다. 필요할때 메서드들을 찾아서 사용하면 됩니다.

여기선 메서드들에 대한 설명을 자세히 나열하진 않을 것이니 어떤 메서드인지 찾고 싶다면 아래 문서를 참조해주세요!

[lodash 문서]

Lodash Documentation

Lodash Documentation

lodash를 쓰면 너무 좋은데, 다양한 응용되는 상황들에 어떤식으로 써주면 될지 정리를 좀 해두려고 한다.

(물론 js내장 함수로도 다 구현할 수 있다.!)

---

📝 목차

중간중간 추가할예정이다.

• sortBy 응용하기
• sumBy 응용하기
• orderBy 응용하기
• map 응용하기

---

[sortBy 응용하기]

1. 키값으로 정렬하기

😀 키가 정해져 있는 경우 (기본)

// data 가 아래와 같은 경우
const data = [
  {
    date: '2020-01-01',
    count: 10
  },
  {
    date: '2020-01-02',
    count: 30
  },
  {
    date: '2020-01-03',
    count: 5
  },
]

// 카운트 필드 기준으로 정렬하고 싶다. -> 아래와같이 사용하면 된다
sortBy(data, 'count');

😀 키가 정해져있지 않은 경우(응용)

sortBy를 써서 키값으로 정렬할 수 있는 걸 알았는데, 키값이 정해져 있지 않은 경우는 어떻게 해야할까?

이런경우는 보통 groubBy를 쓰고 나서 유용하게 사용할 수 있다.

또, chain이랑 같이 사용하면 유용하다!

// data 가 아래와 같은 경우

const data = {
  type1: {count: 123},
  type2: {count: 123},
  type2: {count: 123},
}

// 아래와 같이 하면된다.
// toPairs로 배열형태로 바꿔서 첫번째 배열값(키)에 따라 정렬 진행, 다시 fromPairs로 객체형태로변경
_.chain(data).toPairs().sortBy(0).fromPairs().value()

---

[sumBy 응용하기]

배열안에 있는 특정 키에대해 데이터를 합해서 보고 싶다면 아래와 같이 하면된다.

// data 가 아래와 같은 경우
const data = [
  {
    date: '2020-01-01',
    count: 10
  },
  {
    date: '2020-01-02',
    count: 30
  },
  {
    date: '2020-01-03',
    count: 5
  },
]

// 카운트 필드 기준으로 정렬하고 싶다. -> 아래와같이 사용하면 된다
sumBy(data, 'count');

---

[OrderBy 응용]

sortBy말고 내림차순 오름차순의 조건이 필요한 경우가 있다 sortBy는 기본적으로 오름차순이기 때문에

내림차순 정렬을 원한다면, 두가지 방법이 있는데,

1. sortBy 후에 reverse 로 배열 뒤집기
2. orderBy 사용하기

1번의 방법은 간편하지만 배열을 한번 정렬하고 다시 뒤집는다는 거 자체가 별로 좋아보이지 않는다!

2번의 방법이 성능상으로 더 나을 것 같다.

const data = [
  {
    date: '2020-01-01',
    count: 10
  },
  {
    date: '2020-01-02',
    count: 30
  },
  {
    date: '2020-01-03',
    count: 5
  },
]

// count를 기준으로 정렬이 필요한 경우 아래와 같이 하면 된다
orderBy(data, ['count'], ['desc'])

---

[map 응용하기]

map은 js에도 있는 내장함수 입니다. 배열을 돌때 사용합니다.

lodash에 있는 map은 오브젝트도 돌 수 있습니다.

const data = {
  a: 20,
  b: 30,
  c: 10,
}

// 위와같은 데이터를 아래와 같이 변경하고 싶다면?
const data2 = [
  {
    type: 'a',
    count: 20
  },
  {
    type: 'b',
    count: 30
  },
  {
    type: 'c',
    count: 10
  }
]

// 객체를 돌때는 [밸류, 키] 로 받아 사용할 수 있다.
.map(data, (count, type) => ({
  type: type,
  count: count,
}))

그럼 만약 돌고나서 정렬도 하고 싶다? 하면 위에서 말씀드렸던 chain + orderBy의 조합을 이용하면 됩니다.

const data = _chain(data)
.map((count, type) => ({
  type: type,
  count: count,
}))
.orderBy(['count'], ['desc'])
.value() // chain 을 썼을땐 마지막엔 꼭 value()!

---

--- 계속 추가 예정

 

😇 좋은 꿀팁이나 응용 있으시면 댓글 달아주시길 바랍니다!