【JavaScript】再帰関数を使ってネストされた配列内のfalsy値（NaN・undefined・null）を0に置き換える方法

ネストされた配列のfalsy値を一括で置き換えたい

JavaScriptでは、配列の中に配列が含まれる「ネストされた（多次元）配列」を扱うことがあります。たとえば、次のようなデータ構造です。

const arr = [3, 5, 7, 2, [4, NaN, null, 4, 8, [3, undefined, 24, null], null, 5, 1], NaN, 45, 2, 1];

このような配列には、NaN、undefined、nullといったfalsy値（偽と評価される値）が含まれていることがあります。

今回の課題は、再帰関数（recursive function）を作成し、ネストされた配列の中にあるすべてのfalsy値を 0 に置き換えることです。

ポイント：再帰処理とArray.isArray()

• Array.isArray() を使えば、要素が配列かどうかを判定できます。
• 要素が配列の場合は、その配列に対して自分自身の関数を再度呼び出す（再帰する）ことで、どれだけ深くネストしていても対応できます。
• 要素が配列以外の場合は、その値がfalsyかどうかを !arr[i] で判定し、falsyなら 0 を代入します。

実装例

それでは、実際にコードを書いてみましょう。

const arr = [3, 5, 7, 2, [4, NaN, null, 4, 8, [3, undefined, 24, null],
null, 5, 1], NaN, 45, 2, 1];

const recursiveSimplify = (arr) => {
    for(let i = 0; i < arr.length; i++){
        // 要素が配列の場合は再帰的に処理
        if(Array.isArray(arr[i])){
            recursiveSimplify(arr[i]);
        // 配列以外でfalsyな値なら0に置き換え
        }else if(!arr[i]){
            arr[i] = 0;
        };
    };
};

recursiveSimplify(arr);
console.log(arr);

コードの解説

1. ループで各要素をチェック： for ループで配列の先頭から順番に各要素を確認していきます。
2. 配列なら再帰呼び出し： Array.isArray(arr[i]) が true の場合、その要素は配列なので、recursiveSimplify を再度呼び出して内部を処理します。
3. falsy値なら0に置換： 配列以外の要素については !arr[i] が true（つまりfalsy）の場合に 0 を代入します。NaN、undefined、null はいずれもfalsyなので、すべて 0 に変換されます。

実行結果

コンソールへの出力は以下のようになります。

[
    3,
    5,
    7,
    2,
[ 4, 0, 0, 4, 8, [ 3, 0, 24, 0 ], 0, 5, 1 ],
0,
45,
2,
1
]

ご覧のとおり、元の配列内の NaN、undefined、null が、どの階層にあってもすべて 0 に置き換えられていることが確認できます。このように再帰処理を活用すれば、任意の深さにネストされた配列でも柔軟にデータクレンジングを行うことができます。