JS. Reduce 메서드

MJ·2023년 4월 27일
0

Java Script

목록 보기
52/57
post-thumbnail

Reduce

  • 배열을 가져가 요소를 점차 줄여가면서 마지막에는 1개의 값만 남기는 메서드 입니다.

  • 자동적으로 처리하지 않기에, 사용자가 입력한 값에 따라서 작동합니다.

  • 두개의 매개변수를 갖는 메서드다.


/* 문법 */

[3,5,7,9,11].reduce( (accmulator, currentValue) => { 
  return accmulator + currentValue;
} )


/* 
첫 번째 매개변수 accmulator
- 총 합계를 나타내는 매개변수
- 배열의 요소를 줄여나가는 대상
- 2번째 순회부터 return 으로 반환된 값이 저장됩니다.


두 번째 매개변수 currentValue
- 각각의 배열 요소를 나타냄


return 
- 여기서 반환된 값은 다음번의 순회 대상인 accmulator 매개변수에게 반환됩니다.
*/

/*
callback	accmulator		currentValue	returnValue
첫번째 순환	3				5				8 (3+5)
두번째 순환	8 (return 값)	7				15
세번째 순환	15				9				24
마지막 순환	24				11				35

두 번째 매개변수 currentValue에 해당되는 값은 accmulator의 다음 요소로 시작됩니다.
*/

1.1 reduce 사용하기

const price = [9.99, 1.50, 19.99, 49.99, 30.50];

const totalPrice = price.reduce( (total, value) => { 
    return total + value;
})
/* 
한줄 간소화 : const totalPrice = price.reduce( (total, value) => total+value );
임시적 반환 구문
/*

console.log(totalPrice);	// 출력 : 111.97

/* reduce 메서드 이용해서 배열의 최소값 찾기 */

const price = [9.99, 1.50, 19.99, 49.99, 30.50];

const totalPrice = price.reduce( (min, value) => {
    if(min < value){
        return min;
    }
    return value;
} );

console.log(totalPrice);	// 출력 : 1.50


/*
배열의 요소를 하나하나 비교해가면서 첫번째 min 인자가 value보다 작다면
min을 반환하고 그렇지 않다면 value가 더 작은값이므로 value 인자를 반환한다.

min 인자는 반환된 변수를 가지고, 계속해서 배열의 요소를 비교해가며 제일 작은값을 찾아냄
*/

1.2 객체에서 reduce 사용하기

// movie 배열안의 객체요소 중에서 score 평점 점수가 가장 높은 객체만 출력하기

const movie = [
    {
        name: '어벤져스',
        score: 95,
        year: 2010
    },

    {
        name: '킹콩',
        score: 92,
        year: 2010
    },

    {
        name: '컨저링',
        score: 100,
        year: 2010
    },

    { 
        name: 'B급영화',
        score: 50,
        year: 1990
    },
    
    {
        name: 'C급영화',
        score: 20,
        year: 1980
    }
]

let bestMovie = movie.reduce( (movie, highScore) => {
    if(movie.score > highScore.score ){
        return movie;
1    }
    return highScore;
});

console.log(bestMovie);	// 출력 : { name: '컨저링', score: 100, year: 2010 }


/*
객체안의 프로퍼티(score)에 접근해야 하므로, if 조건문에서 매개변수.score로 접근합니다.
객체의 score 점수를 순회하면서, 가장 높은 점수의 객체 요소만 return 하게 된다.
*/

1.3 redude 메서드의 두 번째 인자

/* reduce의 두번쨰 인자 */

const evens = [2,4,6,8];

const total = evens.reduce((sum, num) => sum + num, 100);
console.log(total);	 // 출력 : 120


/*
이전에 사용했던 함수는 reduce 메서드의 첫 번째 인자에 속합니다.
두 번째 인자를 정하게 되면, 해당 값은 첫 번째 인자의 매개변수(sum)의 초기값이 됩니다.

즉, 100부터 시작해서 표현식을 순환합니다.

100+2, 102+4, 106+6, 112+8, 120(마지막)
*/
profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글