Reduce
배열을 가져가서 점차 줄여가면서 마지막에는 하나의 값만 남긴다.
[3,5,7,9,11].reduce((accumulator, currentValue)=>{
return accumulator+currentValue
})
reduce 안에 있는 콜백함수의 argument로 누적값과 현재의 값이 들어가고
첫번째 누적값을 항상 배열의 0번째 인덱스이다.
첫번째 현재값은 항상 배열의 1번째 인덱스이다.
첫번째 누적값과 현재값을 계산하고 누적값은 return값이 되고 현재값은 2번째 인덱스로
현재값은 배열의 각 요소들을 훑는다는 느낌
누적값은 줄여나가서 결과가 되는 값이라고 생각하면 됨
//reduce에서 아무런 작업을 하지 않고 accumulator를 뽑아보면 배열의 0번째 인덱스인 3이 리턴됨
let result = [3,4,5,7,9,11].reduce((accumulator, currentValue)=>{
return accumulator
})
console.log(result); // 3
//reduce에서 아무런 작업을 하지 않고 currentValue를 뽑아보면 배열의 마지막 인덱스인 11이 리턴됨
let result = [3,4,5,7,9,11].reduce((accumulator, currentValue)=>{
return currentValue
})
console.log(result); // 11
//currentValue는 reduce에서 배열의 각 요소들은 1번째 인덱스부터 마지막 인덱스까지 순회하기 때문에
//아무런 작업을 하지 않으면 마지막 인덱스가 리턴됨
//return값으로 accumulator+currentValue를 주면
let result = [3,5,7,9,11].reduce((accumulator, currentValue)=>{
return accumulator + currentValue
})
console.log(result); // 39
/*
reduce메소드로 인해서 초기의 accumulator의 값은 배열의 0번째 인덱스이 3이 되고
currentValue의 값은 배열의 1번째 인덱스인 5이다
이제 accumulator + currentValue를 해서 리턴된 8이 다시 accumulator에 할당되고
currentValue의 값은 2번째 인덱스인 7이 된다.
이런 방식으로 배열의 마지막 인덱스까지 순회하고 값을 리턴해준다.
*/
/*
이 reduce메소드 진행방법을 for문으로 작성하면
for문을 돌면서 배열의 각 인덱스에 값과 더해지는 count가 accumulator이고
arr1[i]가 currentValue라고 생각하면 된다.
*/
let arr1 =[3,4,5,7,9,11];
let count =0;
for(let i=0; i<arr1.length; i++){
count += arr1[i];
}
console.log(count); //39
reduce의 리턴값은 다음 순회에서 accumulator로 할당되는 걸 생각해보자
const prices = [100, 500, 5000, 11000, 30000];
let result5 =prices.reduce((previousNum, currentNum)=>{
//return을 하게되면 previousNum으로 할당됨
//reduce에서 반환하는 값은 다음 순회에서 accumulator로 할당된다.
//최대값 구하기
if(previousNum < currentNum){
return currentNum;
}else{
return previousNum;
}
위 최대값 구하기에서 preNum은 0번째 인덱스인 100이 할당
current num은 1번째 인덱스인 500이 할당
여기에서 reduce의 리턴값은 다음 순회에서 preNum으로 할당됨
이 조건문에서 preNum의 값이 currentNum보다 작으면
return currentNum -> 다음 순회에 500의 값이 preNum의 값으로 들어감
이렇게 계속 순회에서 조건에 맞지 않으면 그 값을 뽑아옴 (최대값)
//최소값 구하기
if(previousNum>currentNum){
return currentNum;
}else{
return previousNum;
}
})
console.log(result5);
const movie = [
{
name: "heh1",
rating: 96,
},
{
name: "heh2",
rating: 90,
},
{
name: "heh3",
rating: 70,
},
{
name: "heh4",
rating: 100,
},
{
name: "heh5",
rating: 70,
},
{
name: "heh6",
rating: 60,
},
];
//가장 높은 점수의 영화 객체 찾기
let result4 =movie.reduce((bestMovie, currentMovie)=>{
if(bestMovie.rating > currentMovie.rating){
return bestMovie;
}else{
return currentMovie;
}
})
console.log(result4)
초기값 설정!!!
//accumulator 매개변수에 대해서 시작하는 초기 포인트도 지정할 수 있음.
const evens = [2,4,6,8];
//reduce에 두 번째 인수를 전달할 수도 있다.
//reduce에 콜백함수안에 집어 넣는 것이 아님
evens.reduce((sum, num)=> sum+num, 여기에 초기값을 설정해줌)
let result7 =evens.reduce((sum, num)=> sum+num )
console.log(result7)// 20
//초기값을 100으로 설정
let result7 =evens.reduce((sum, num)=> sum+num,100 )
console.log(result7) // 120
//초기값을 빈문자열로 설정
let result7 =evens.reduce((sum, num)=> sum+num, '' );
console.log(result7) // '2468' <-'string'
//초기값을 굳이 설정하지 않아도 될 거 같은데 초기값 설정은 반드시 필요하다
//빈 배열로 reduce메소드를 호출하면???
[].reduce((acc,cur)=> acc+cur)
/*
TypeError: Reduce of empty array with no initial value
이렇게 타입에러가 발생한다.
이때 초기값을 주면 오류 발생 x
*/
[].reduce((acc,cur)=> acc+cur,0)
//객체 안에 있는 프로퍼티값에 접근해서 값을 구할 때
//밑에 있는 코드로 작성하면
const product =[
{id:1,price:200},
{id:2,price:300},
{id:3,price:400},
]
let result9 = product.reduce((acc,cur)=>acc.price+cur.price);
console.log(result9) // NaN
/*
첫번째 순회를 돌 때 acc의 값은 {id:1,price:200}, cur의 값은 {id:2,price:300},
두번째 순회를 돌 때 acc의 값은 500 cur의 값은 {id:3,price:400}가 된다
그럼 여기서 문제가 되는 것은 acc의 값이 number타입인데 return 문에서 acc.price에 접근할 수 없기 때문에 acc.price가 undefined가 되고 unfined+400의 값이 rusult9에 할당된다.
그래서 초기값을 항상 설정해줘야한다.
*/
//초기값을 0으로 설정해주고
const product =[
{id:1,price:200},
{id:2,price:300},
{id:3,price:400},
]
let result9 = product.reduce((acc,cur)=>acc+cur.price,0);
//첫번째 순회를 돌 때 acc =0이 할당되고 cur의 값은 {id:1,price:200}
//return 문을 돌아서 aac(0) + cur.price(200)
//두번째 순회에서 acc의 값은 200 cur의 값은 {id:2,price:300} 이렇게 진행된다.
console.log(result9)
