JavaScript로 숫자를 자릿값 배열로 확장하는 방법

JavaScript에서 숫자를 입력받으면 해당 숫자를 구성하는 각 자릿수의 자릿값(place value)을 담은 배열을 반환하는 함수를 작성해야 하는 경우가 있습니다. 예를 들어 숫자 123이 주어졌다면, 함수는 다음과 같은 배열을 출력해야 합니다.

[100, 20, 3]

즉, 123은 백의 자리 100, 십의 자리 20, 일의 자리 3으로 분해되며, 함수는 인자로 전달받은 숫자의 모든 자릿수에 대한 자릿값을 배열 형태로 돌려주는 역할을 합니다.

해결 접근 방식: 재귀(Recursion) 활용

이 문제는 반복문 없이도 재귀 함수를 활용하면 매우 깔끔하게 해결할 수 있습니다. 핵심 아이디어는 다음과 같습니다.

num % 10 연산으로 가장 뒤쪽 자릿수를 추출한 뒤, 현재 자리에 해당하는 배율(factor)을 곱해 자릿값을 계산합니다.
계산된 값을 결과 배열의 맨 앞에 추가(unshift)하여 자릿수 순서를 유지합니다.
Math.floor(num / 10)으로 마지막 자릿수를 제거한 몫과, 10배씩 증가하는 factor를 인자로 전달하며 함수를 재귀 호출합니다.
num이 0이 되면 재귀를 종료하고 완성된 배열을 반환합니다.

코드 구현

위 로직을 화살표 함수와 기본 매개변수(default parameter)를 활용해 구현하면 다음과 같습니다.

const num = 123;
const placeValue = (num, res = [], factor = 1) => {
    if(num){
        const val = (num % 10) * factor;
        res.unshift(val);
        return placeValue(Math.floor(num / 10), res, factor * 10);
    };
    return res;
};
console.log(placeValue(num));

코드 동작 원리 살펴보기

123을 입력했을 때 함수가 실행되는 과정을 단계별로 보면 다음과 같습니다.

첫 번째 호출: 123 % 10 = 3, factor가 1이므로 val = 3 → res = [3], 이후 placeValue(12, [3], 10) 호출
두 번째 호출: 12 % 10 = 2, factor가 10이므로 val = 20 → res = [20, 3], 이후 placeValue(1, [20, 3], 100) 호출
세 번째 호출: 1 % 10 = 1, factor가 100이므로 val = 100 → res = [100, 20, 3], 이후 placeValue(0, ...) 호출
종료 조건: num이 0이므로 최종 결과 [100, 20, 3]을 반환

실행 결과

코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[ 100, 20, 3 ]

이처럼 재귀와 나머지 연산(%), 정수 나눗셈(Math.floor)만으로도 숫자를 자릿값 단위로 손쉽게 분해할 수 있습니다. 필요하다면 음수 처리나 큰 숫자 검증 같은 예외 상황도 추가하여 함수를 더 견고하게 확장할 수 있습니다.