reduce() 구조
const reducer = (previousValue, currentValue) => {
return previousValue + currentValue;
}
reduce()는 previousValue와 currentValue 두개의 매개변수를 받아 작동한다.
previousValue는 누산값, currentValue는 배열을 순회하며 얻는 현재값이다.
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => {
return previousValue + currentValue;
}
예를 들어,
배열 array1와 reducer를 arrow function으로 선언했따.
그리고 배열 array1의 reduce method에 콜백함수로 reducer를 전달해준다.
array1을 기준으로 previousValue는 따로 값을 지정해주지 않았기 때문에 처음 순회에서 1이고 currentValue는 바로 다음 값인 2가 된다.
그리고 previousValue + currentValue를 리턴하기 때문에
다음 순회 과정에서 previousValue에는 이전 순회 값 previousValue + currentValue = 1 + 2 = 3이 담기게 된다.
그리고 currentValue는 3이 된다. (이전 순회과정에서 currentValue가 2였으니깐)
이렇게 순회 과정을 거치고 마지막 currentValue가 4(마지막 index)가 되면서 끝이 난다.
// output : 10
console.log(array1.reduce(reducer));
reduce() 활용
let arr;
const getData = async () => {
const resourse = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await resourse.json();
return data;
}
const setData = async () => {
const data = await getData();
arr = data;
console.log(arr);
}
const reducer = async () => {
await setData();
const newArr = arr.reduce((prev, cur) => {
if(cur.username.includes('o')) {
console.log(cur.username)
prev.push(cur.username);
}
return prev;
}, []);
console.log(newArr);
}
reducer();
이 코드는 https://jsonplaceholder.typicode.com/users 에서 가상의 user data를 fetch로 받아온다.
reducer를 실행하면 setData()로 arr1에 user data가 들어간다.
이제 그 밑의 코드가 핵심인데,
reduce를 통해 user 정보가 들어간 배열에서
문자 o를 포함한 username을 가진 유저만 걸러내는 코드이다.
여기서는 reduce에 초깃값을 빈 배열 []로 지정해줬는데,
이러면 순회과정에서 prev 값이 배열 안의 첫번째 값이 아닌, 빈 배열 []로 지정된다.
자연스럽게 cur는 배열 안의 첫번째 값이 된다.
쉽게 생각해서 prev값을 따로 지정해주면 인덱스가 하나씩 땡겨진다고 생각하자
Javascript에서 reduce는 아주 강력한 메서드라고 하니 확실히 알아둘 필요가 있겠다.
