JavaScriptの配列から空の要素（undefined）をすべて削除する方法

例として、次のような配列リテラルがあるとしましょう。

const arr = [4, 6, , 45, 3, 345, , 56, 6];

この配列には、値が代入されていない「空のスロット（ホール）」が含まれています。ここでは、このような配列を受け取り、undefinedや空の要素だけを元の配列から直接（in-place）削除するJavaScript関数を作成します。

注意すべき点は、削除対象がundefinedおよび空の値のみであるということです。0や空文字列（''）といった、他のfalsyな値まで削除してしまうのは誤りです。

実装のアプローチ

forループで配列を先頭から走査し、Array.prototype.splice()メソッドを使って該当する要素をその場で削除していきます。splice()は配列自体を変更するため、ループ変数iの進め方に工夫が必要になります。

コード例

const arr = [4, 6, , 45, 3, 345, , 56, 6];
const eliminateUndefined = arr => {
    for(let i = 0; i < arr.length; ){
        if(typeof arr[i] !== 'undefined'){
            i++;
            continue;
        };
        arr.splice(i, 1);
    };
};
eliminateUndefined(arr);
console.log(arr);

ポイントは、要素が定義済みの場合にのみインデックスを1つ進め、undefinedだった場合にはsplice()で削除した後もインデックスを据え置くことです。これにより、要素が削除されて後ろの要素が前に詰められたとしても、チェック漏れが発生しません。

出力結果

コンソールには次のように表示されます。

[
    4, 6, 45, 3,
    345, 56, 6
]

このように、元の配列からはundefined・空の要素だけが取り除かれ、それ以外の値はそのまま保持されます。0やfalseなども含めてすべてのfalsyな値を除去したい場合は別途filter()などを検討する必要がありますが、本記事の要件では不要です。