【JavaScript】数値を位（一の位・十の位・百の位）ごとに分解して配列に変換する方法

はじめに

この記事では、与えられた数値を位ごとに分解した配列として出力する関数をJavaScriptで作成する方法を解説します。

例えば、123 という数値が入力された場合、以下のような配列を出力することが求められます。

[100, 20, 3]

つまり、引数として渡された数値を構成する各桁の位の値をすべて含む配列を返すのが、この関数の目的です。123であれば「100（百の位）」「20（十の位）」「3（一の位）」という形に分解されます。

実装のアプローチ

この問題は、再帰処理を使うことでシンプルかつ効率的に解決できます。

基本的な考え方は次の通りです。

1. 数値を10で割った余り（num % 10）から一の位の数字を取り出す
2. 現在の桁の係数（1、10、100…）を掛けて位の値を計算する
3. 結果を配列の先頭に追加し、残りの数値に対して再帰的に同じ処理を繰り返す

コード例

以下が実際のコードです。

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));

コードの解説

• num % 10：数値の一の位の数字を取り出します
• factor：現在処理している桁を表す係数です。再帰のたびに10倍され、1 → 10 → 100 と変化します
• res.unshift(val)：計算した位の値を結果配列の先頭に挿入することで、最終的に左から上位の桁順に並ぶようにしています
• Math.floor(num / 10)：一の位を取り除いた残りの数値を生成し、再帰呼び出しに渡します
• numが0になった時点で再帰が終了し、完成した配列が返されます

実行結果

上記のコードをコンソールで実行すると、以下の出力が得られます。

[ 100, 20, 3 ]

このように、元の数値 123 が位ごとの値を持つ配列 [100, 20, 3] に変換されていることが確認できます。

まとめ

再帰的なアプローチを用いることで、任意の桁数の整数を位ごとに分解し、配列として取得できる関数を短いコードで実装できました。剰余演算とMath.floor()を組み合わせた桁の取り出しは、他の数値操作の問題にも応用できるテクニックなので、ぜひ覚えておきましょう。