[javascript] 배열 요소 더하기 문자 연결하기 reduce

개발을 하다 보면 배열 안의 요소를 하나의 문자열로 연결해주거나

모든 값을 더해야하는 상황이 있을 것이다.

심지어, 배열로 이루어진 객체들의 값만 더해야하는 상황도 온다.

배열의 각각의 요소를 이용하여 하나의 값을 구하고 싶을때는 reduce 함수를 사용하면 된다.

reduce는 자바스크립트에서 배열 각 요소에 대해서 작성한 함수를 적용하며 하나의 값으로 줄여주는 함수이다.

 

reduce의 사용법이다.

[].reduce(function (preValue, currentValue, Index, array) {
}, initialValue);

preValue  : 이전에 반환한 값이다. 처음 시작할 때 initialValue가 존재하지 않으면 index가 0인 요소부터 실행하고, 존재한다면 initialValue부터 실행한다.

currentValue : 현재 진행하고 있는 값이다. preValue와 반대로 initialValue가 존재하면  index가 0인 요소부터 실행하고, 존재하지 않으면  index가 1인 요소부터 실행한다.

Index : 현재 반복하고 있는 index값 이다. (생략 가능)

array : 현재 함수를 사용한 배열자체를 나타낸다. (생략 가능)

initialValue : 초기 시작할 값을 나타낸다. (생략 가능)

이 함수를 사용한 예시다.

1. 배열 최대값 구하기

[1, 2, 3, 4].reduce(function (preValue, currentValue) {    // 4
    return Math.max(preValue, currentValue);
})

[1, 2, 3, 4].reduce(function (preValue, currentValue) {   // 10

    return Math.max(preValue, currentValue);
}, 10)

1부터 시작하여 현재 값과 이전 값의 최대값을 계속 구하면서 마지막에 4를 반환해준다.

최소 값을 구하려면 min을 사용하면 된다.

2. 배열로 이루어진 문자 연결해주기

['a', 'b', 'c', 'd', 'e'].reduce(function (preValue, currentValue) {  // abcde

    return preValue + currentValue;
})

문자열을 이어준다

3. 객체로 이루어진 배열 요소 더하기

[{value: 1, string: 'a'}, {value: 2, string: 'b'}, {value: 3, string: 'c'}].reduce(function (preValue, currentValue) {  // {value:6, string:'abc'

    return {value: preValue.value + currentValue.value, string: preValue.string + currentValue.string};
})

순환하면서 이전의 객체와 현재 객체의 value와 string을 더해서 계산해준다.

4. 객체로 이루어진 배열안의 타입별로 계산하기

[{value:1 ,type:'a'}, {value:1 ,type:'a'}, {value:1 ,type:'b'}].reduce(function (preValue, currentValue) { // {a:2, b:1}
    (preValue.hasOwnProperty(currentValue.type)) ?
        preValue[currentValue.type] += currentValue.value :
        preValue[currentValue.type] = currentValue.value;
    return preValue
}, {})

빈객체로부터 type이 존재하지 않으면 현재 객체의 value를 초기 값으로 셋팅 해주고

존재하면 더해준다.