📚 Lodash 배열 검색 · 정렬 함수 모음

Lodash - 배열 검색 & 정렬 함수 정리

 

_.sortBy()

• 키값을 기준으로 정렬

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

// count 필드 기준으로 정렬하고 싶다. -> 아래와같이 사용하면 된다
sortBy(data, 'count');
/* [
{date: "2020-01-03", count: 5}
{date: "2020-01-01", count: 10}
{date: "2020-01-02", count: 30}
] */

 

• 키값 두개로 정렬하기

// date를 먼저 기준으로 정렬하고 date가 같은 요소들은 name으로 정렬한다.
_.sortBy(items, ['date', 'name']); 
/*
[
  {no: 3, name: "free", date: "180801"},
  {no: 2, name: "is", date: "180802"},
  {no: 4, name: "forever", date: "180804"}, // date:180804 값 두개가 name을 기준으로 정렬
  {no: 1, name: "web", date: "180804"}
]
*/

 

• 정렬 역순

var items = [
  { no: 1, name: 'web', date: '180804' },
  { no: 2, name: 'is', date: '180802' },
  { no: 3, name: 'free', date: '180801' },
  { no: 4, name: 'forever', date: '180804' },
];

_.sortBy(items, 'date').reverse(); // 내림차순. 
/* 출력결과
[
  {no: 4, name: "forever", date: "180804"},
  {no: 1, name: "web", date: "180804"},
  {no: 2, name: "is", date: "180802"},
  {no: 3, name: "free", date: "180801"}
]*/

// 아니면 다음에 배울 orderBy()쓰기
_.orderBy(items, 'date', 'desc');

​

_.orderBy()

• 객체의 키값들을 오름차순, 내림차순 정렬
• _.sortBy()에 오름차순, 내림차순 정렬 옵션을 추가한 것이라고 보면 된다.
• 게시판의 글들을 분류할 때 쓴다.

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];

_.orderBy(users, 'age', 'desc');

_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

​

_.sumBy()

• 배열안에 있는 특정 키의 값들을 sum한다.

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

// 카운트 필드의 값들만 모두 합해서 반환
_.sumBy(data, 'count'); // 45

 

_.uniqBy()

• 특정 값을 기준으로 고유의 값(unique)만 가져옴
• 즉, 인자값을 기준으로 중복 되는 값들을 제거한 후 반환.

myArray = [
  {a: 1, b: 2},
  {a: 2, b: 2},
  {a: 2, b: 2} // 두 번째, 세 번째 객체의 값이 동일
]

newArray = _.uniqBy(myArray, 'a'); // a키를 기준으로 고유의 값만 가져옴. 즉, 중복 제거
/* 
출력결과
{a: 1, b: 2}
{a: 2, b: 2}
*/

newArray = _.uniqBy(myArray, 'b'); // b키를 기준으로 고유의 값만 가져옴. 즉, 중복 제거
/* 
출력결과
{a: 1, b: 2}
*/

​

_.unionBy()

• uniqBy와 똑같이 중복되는 값 제거 기능인데, uniqBy는 하나의 배열을 인자로 쓰는거고,
• unionBy는 여러개 배열을 인자로 받아서 합치고, 중복 되는 값을 제거한 후 반환

_.unionBy(배열1, 배열2, '고유한 속성의 이름')

const fruit1 = [
	{ fruitId: 1, color: "yellow", name: "banana"}, 
	{ fruitId: 2, color: "green", name: "apple" }
]
const fruit2 = [
	{ fruitId: 2, color: "green", name: "apple" }, 
	{ fruitId: 3,color: "red", name: "strawberry" }
]


fruit1.concat(fruit2); // 단순하게 하나로 병합
/*
0: {fruitId: 1, color: "yellow", name: "banana"}
1: {fruitId: 2, color: "green", name: "apple"}
2: {fruitId: 2, color: "green", name: "apple"}
3: {fruitId: 3, color: "red", name: "strawberry"}
*/

// uniqBy는 한개의 배열에 대해서만
_.uniqBy(total, 'fruitId'); // fruitId키 기준으로 중복 값 제거
/*
0: {fruitId: 1, color: "yellow", name: "banana"}
1: {fruitId: 2, color: "green", name: "apple"}
2: {fruitId: 3, color: "red", name: "strawberry"}
*/

// unionBy 여러개의 배열에 대해서 가능
_.unionBy(fruit1, fruit2, 'fruitId'); // fruitId키 기준으로 중복 값 제거
/*
0: {fruitId: 1, color: "yellow", name: "banana"}
1: {fruitId: 2, color: "green", name: "apple"}
2: {fruitId: 3, color: "red", name: "strawberry"} 
*/

---

# 참고자료

https://www.geeksforgeeks.org/lodash-introduction/?ref=gcse

https://lodash.com/docs/4.17.15

https://runebook.dev/ko/docs/lodash/-index-