[프로그래머스] 자릿수 더하기 - JavaScript / reduce()에 대해 이해해보자!

✏️ 문제 설명

정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요

---

제한사항

• 0 ≤ n ≤ 1,000,000

---

입출력 예

 

n	result
1234	10
930211	16

 

---

입출력 예 설명

입출력 예 #1

• 1 + 2 + 3 + 4 = 10을 return합니다.

입출력 예 #2

• 9 + 3 + 0 + 2 + 1 + 1 = 16을 return합니다.

 

---

 

✏️ 문제 풀이

- 내 풀이

function solution(n) {
    const nArr = n.toString().split('');
    let result = 0;
    for (let num of nArr) {
    result += +num;
    }
    return result;
}

처음에는 아래 방식처럼 풀려고 했는데 a, b를 Number로 형변환해 연산해야하는데, 형변환을 어디에 넣어줘야 할지 (a,b)에 넣거나 (a+b)에 넣어도 오류가 난다. 결국 어디에 넣어야 할지 모르겠어서 위 방식의 반복문으로 문제를 풀었다.

 

// 잘못된 풀이
function solution(n) {
  return n.toString().split('').reduce(Number(a, b) => a + b);
}

 

- 다른 풀이

function solution(n) {
  return n.toString().split("").reduce((acc, cur) => acc + Number(cur), 0);
}

다른 분이 푼 풀이를 보니 reduce에 대한 이해가 부족해서 못 푼 것이라고 느꼈다.

 

[참고]

이 reduce()메서드는 배열의 각 요소에 대해 사용자 제공 "reducer" 콜백 함수를 순서대로 실행하고 이전 요소에 대한 계산의 반환 값을 전달합니다. 배열의 모든 요소에서 리듀서를 실행한 최종 결과는 단일 값입니다.

 

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

위의 예시를 보면 숫자들의 합을 더할 때는 단순히 acc, curr을 더하는 것 같지만

accumulator와 currentValue의 의미를 보면 currentValue 현재 값에 +  accumulator를 더하는 것이다.

 

reduce(function (accumulator, currentValue) { /* … */ }, initialValue)

따라서 이렇게 initialValue도 지정할 수 있는데 0으로 지정해주고 0 + Number(accumulator) 해주면 계속 Number값으로 연산되어 합계를 구할 수 있다.

 

n.toString().split("").reduce((acc, cur) => acc + Number(cur), 0);

= Array.prototype.reduce().reduce((acc, cur) => acc + Number(cur), 0);

 

// reduce() Syntax
// Arrow function
reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })

reduce((accumulator, currentValue) => { /* … */ }, initialValue)
reduce((accumulator, currentValue, currentIndex) => { /* … */ }, initialValue)
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function (accumulator, currentValue) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ })

reduce(function (accumulator, currentValue) { /* … */ }, initialValue)
reduce(function (accumulator, currentValue, currentIndex) { /* … */ }, initialValue)
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

 

📌 매개변수

callbackFn

: 배열의 각 요소에 대해 실행할 함수입니다. 반환 값은 accumulator이고 다음에 callbackFn를 호출할 때 매개변수의 값이 됩니다. 마지막 호출의 경우 반환 값은 reduce()의 반환 값이 됩니다.

 

이 함수는 다음 인수로 호출됩니다.

accumulator

: callbackFn에 대한 이전 호출의 결과 값입니다. 지정된 경우 첫 번째 호출에서 initialValue, 그렇지 않으면 array[0]의 값입니다.

 

currentValue

: 현재 요소의 값입니다. 첫 번째 호출에서 initialValue가 지정된 경우 array[0] 값이 지정되고, 그렇지 않으면 array[1] 입니다.

 

currentIndex

: currentValue 배열에서 인덱스 위치입니다. 첫 번째 호출에서 initialValue가 지정되면 0, 그렇지 않으면 1 입니다.

 

array

: 배열 reduce()이 호출되었습니다.

 

initialValue (선택)

: accumulator 콜백이 처음 호출될 때 초기화 되는 값입니다. initialValue가 지정되면 배열 callbackFn의 첫 번째 값을 currentValue로 사용하여 실행을 시작합니다 . initialValue가 지정 되지 않은 경우 accumulator 배열의 첫 번째 값으로 초기화되고 배열 callbackFn의 두 번째 값을 currentValue을 지정해 실행을 시작합니다. 이 경우 배열이 비어 있으면(accumulator로 반환할 첫 번째 값이 없음) 오류가 발생합니다.

 

 

 

🙂 공부하면서 정리하는 글입니다. 피드백, 공감 환영합니다.