[JavaScript] - substr(), reduce()

Minji Kim·2022년 9월 13일

프로그래머스 Lv.1 자릿수 더하기 문제를 풀며 정리한 내용입니다.

문제

문제 설명

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.

제한사항

N의 범위 : 100,000,000 이하의 자연수

처음 구현한 코드

function solution(n)
{
    const str = String(n);
    let answer = 0;
    for (let i = 0; i < str.length; i++){
        answer += Number(str.substr(i,1));
    }

    // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다.
    console.log(answer);

    return answer;
}

for문 돌릴 시, 보통 vscode에서 코드를 작성했어서 오류가 크게 나타나지 않았는데, 세미콜론 대신 쉼표를 사용한다거나, const 또는 let을 크게 구분해서 사용하지 않아서 오류가 나타났었다.

주로 오타 또는 변수선언 방식에 대한 오류 였던 건데, 변수선언 방식에 대해서는 머리로는 알지만 실제로 구현할 때 막상 적용하지 못 하는 것 같다.

내가 떠오른 로직 중에서는 문자열을 자르는 함수인 substr 메서드만 떠올랐고, 이 함수도 이번에 처음 사용한 거라 간단히 정리해보고자 한다.

substr()

substr(startIndex, limit)

substr 메서드는 아주 간단하다.
문자열을 자를 index를 startIndex에 지정해주고, 자를 문자열의 길이를 limit 인자에 지정해주면 된다.

const str = 'minngki';

console.log(str.substr(4,1)); // "g"
console.log(str.substr(0,5)); // "minngk"

하지만 문제 풀이를 하고 나니, 큰 점수를 얻지 못 했고 다른 사람이 작성한 코드를 보니 배울 점이 꽤나 많았다.

다른 사람 풀이를 본 후 구현한 코드

function solution(n)
{
    return ( (n+'').split('').reduce((acc,cur)=> acc+ parseInt(cur),0) )
}

해당 코드를 보면 reduce 메서드를 사용했는데 이렇게나 간단히 쓰일 수 있구나 싶어 드디어 공부하게 되었다.
map, filter 메서드를 사용하면서 항상 reduce 메서드가 함께 언급되면서 강력한 기능을 포함한다는 것만 알았지만 복잡해보여서 안 하다 드디어 필요성을 느껴 정리해보고자 한다..

reduce()

reduce 메서드의 구문은 다음과 같다.

array.reduce(callback[, initialValue])

reduce 콜백함수는 네 개의 인자를 가질 수 있다.

acc - 누산기
cur - 현재 값
idx - 현재 인덱스
src - 원본 배열

이렇게만 봤을 때는 모르겠으니 예시 코드를 보면서 이해해 보자.

const arr = [1,2,3,4,5];

const reduceArr1 = arr.reduce((acc,cur) => acc+=cur, 0);
console.log(reduceArr1); // 15

const reduceArr2 = arr.reduce((acc,cur) => acc+=cur, 10);
console.log(reduceArr2); // 25