ㅇㅇㅈ Blog

프론트엔드 수행중

0%

Array.reduce()

Array reduce()

ruduce를 이요해 객체 데이터에서 특정값 더하기

1
2
3
4
5
6
7
8
9
10
let arr = [
{name:'Tom', age:20},
{name:'Anna', age:30},
{name:'Bobby', age:40},
{name:'Cole', age:50},
]

const sum = arr.reduce((acc,value) => acc + value.age, 0)
console.log(sum)
// 140

groupBy

1
2
3
4
5
6
7
8
9
10
11
12
13
const groupBy = (data, key) => {
// data = 객체 배열 데이터
// key = 분류할 키
return data.reduce((acc, el) => {
// 초기값 {}
// console.log(el); // data 안에 있는 각각의 객체들
acc[el[key]] = acc[el[key]] || [];

acc[el[key]].push(el);

return acc;
}, {});
};

console.log(data)

  • 객체 배열이 들어온다

console.log(el)

  • 각각의 객체
  • 키를 기준으로 그룹시켜준다 (현재는 type이 key)

console.log(acc[el[key]])

filter()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 4자 이상만 필터
let snacks = ['새우깡', '프링글스', '감자깡', '꿀꽈배기', '콘칩', '허니버터칩']
const result = snacks.filter(item => item.length > 3)
// console.log(result)


// 18 이상만 필터
const aboveEighteen = (number) => {
return number > 18
}

let numbers = [12, 5, 8, 33, 18, 22].filter(aboveEighteen)
console.log(numbers) // [33, 22]

// 짝수만 필터
const isEven = (number) => {
return number % 2 === 0
}

let filteredNumbers = [1, 1, 3, 0, -10, 22, 900].filter(isEven)
console.log(filteredNumbers) //[0, -10, 22, 900]


// 매운 들어 갔을때만 필터
let snacksTwo = ['새우깡', '프링글스', '감자깡', '꿀꽈배기', '콘칩', '허니버터칩', '매운 새우깡', '매운 감자깡']
const filterItems = (query) => {
return snacksTwo.filter(snack => snack.indexOf(query) > -1)
}
console.log(filterItems('매운')) // ['매운 새우깡', '매운 감자깡']

// 객체 필터하기
let students = [
{ id: 1, name: 'james', age: 30 },
{ id: 2, name: 'tim', age: 40 },
{ id: 3, name: 'jhon', age: 25 },
{ id: 4, name: 'Anna', age: 39 },
{ id: 5, name: 'bobby', age: 22 },
]

const filterStudents = students.filter(e => e.age >= 30)
console.log(filterStudents)
// 0: {id: 1, name: 'james', age: 30}
// 1: {id: 2, name: 'tim', age: 40}
// 2: {id: 4, name: 'Anna', age: 39}

데이터를 가공할때 reduce와 filter가 많이 쓰이는거 같아서 개념을 확실히 익혀둬야 할거 같다