[js] - 자연수 뒤집어 배열로 만들기

function solution(n) {
    let string = n.toString()
    let x = string.length - 1;
    var arr = [];
    
    for (let i=x; i>-1; i--) {
        arr.push(Number(string[i]))
    }
    
    return arr;
}

처음에 이 문제를 보고 나서 나는 다음과 같이 코드를 완성했다.
일단 자연수를 받아서 배열 형태로 리턴해야 하기 때문에 toString() 함수를 통해 문자열로 변환했고, 이후에는 거꾸로 반복문을 돌면서 이 문자열을 인덱스마다 숫자로 변환에 배열에 추가했다.

정답은 맞았지만 내가 보기에도 굉장히 비효율적인 코드같아 보였다...

다른 사람들의 코드를 보니 훨씬 깔끔하고 가독성이 좋아서 몇 개 가져와보았다.

1.메서드 체이닝 방식

function solution(n) {
    return String(n).split('').reverse().map(Number);
}

1) String(n): 숫자 타입인 n을 문자열("12345")로 바꿉니다. 자바스크립트의 배열 메서드들은 문자열이나 배열 상태에서만 쓸 수 있기 때문에 가장 먼저 수행하는 전처리 단계입니다.
2) .split(''): 문자열을 인자로 받은 구분자('', 빈 문자열)를 기준으로 쪼개어 배열을 만듭니다. (["1", "2", "3", "4", "5"]. 각 요소는 아직 문자열입니다.)
3) .reverse(): 배열 순서 뒤집기 (['5', '4', '3', '2', '1'])
4) .map(Number): map은 배열의 모든 요소를 하나씩 꺼내어 특정 함수를 실행한 뒤, 그 결과들로 새로운 배열을 만듭니다. 여기서 Number 함수를 넘겨주면, 자바스크립트가 알아서 Number("5"), Number("4") 등을 실행하여 숫자로 변환합니다. ([5, 4, 3, 2, 1])

2.Array.from() 활용 방식

function solution(n) {
    return Array.from(String(n), Number).reverse();
}

💡 Array.from(iterable, mapFunction)의 구조를 가집니다.

• 첫 번째 인자(String(n)): 배열로 만들 대상(유사 배열 객체나 반복 가능한 객체)을 넣습니다. 문자열은 반복 가능한 객체이므로 한 글자씩 쪼개져서 배열의 재료가 됩니다.
• 두 번째 인자(Number): 배열을 만들면서 동시에 실행할 변환 함수입니다.

동작 순서:

• String(n)을 통해 "12345"라는 재료를 준비합니다.
• Array.from이 한 글자씩 꺼내면서 ("1", "2", ...) 바로 Number()를 적용해 숫자로 바꾼 뒤 배열에 담습니다. 이 시점에서 이미 [1, 2, 3, 4, 5]라는 숫자 배열이 탄생합니다.
• 마지막으로 .reverse()를 호출해 뒤집습니다.

두 방식의 차이점