JavaScriptで配列のfalsy（偽値）インデックスに要素を挿入する方法

概要

本記事では、pushAtFalsy() という配列関数を作成する方法を解説します。この関数は、配列と挿入したい要素を引数として受け取り、配列内で最初に見つかったfalsy（偽値）のインデックス位置へその要素を挿入します。

JavaScriptにおけるfalsyな値とは、null、undefined、false、0、NaN、空文字列など、真偽値の評価でfalseとみなされる値のことです。また、疎な配列に含まれる「空スロット（ホール）」も同様に扱われます。

もし配列内に挿入先となる空きスペースが存在しない場合は、要素を配列の末尾に追加します。

実装の考え方

処理の流れは以下の通りです。

• まずforループで配列を先頭から順に走査し、falsyな値が格納されているインデックスを探します。
• 見つかった場合は、splice()メソッドを使ってその位置の値を指定された要素で置き換え、ループを抜けます。
• ループが配列の末尾まで到達してもfalsyな位置が見つからなかった場合は、push()メソッドで配列の最後に要素を追加します。

コード例

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

const arr = [13, 34, 65, null, 64, false, 65, 14, undefined, 0, , 5, ,
6, ,85, ,334];
const pushAtFalsy = function(element){
   let index;
   for(index = 0; index < this.length; index++){
      if(!arr[index] && typeof arr[index] !== 'number'){
         this.splice(index, 1, element);
         break;
      };
   };
   if(index === this.length){
      this.push(element);
   }
};
Array.prototype.pushAtFalsy = pushAtFalsy;
arr.pushAtFalsy(4);
arr.pushAtFalsy(42);
arr.pushAtFalsy(424);
arr.pushAtFalsy(4242);
arr.pushAtFalsy(42424);
arr.pushAtFalsy(424242);
arr.pushAtFalsy(4242424);
console.log(arr);

出力結果

コンソールには以下のように表示されます −

[
   13,      34,     65,
    4,      64,     42,
   65,      14,    424,
    0,    4242,      5,
42424,       6, 424242,
   85, 4242424,    334
]

動作の解説

このコードでは、条件式に typeof arr[index] !== 'number' を加えることで、falsyな値である0が誤って置き換えられるのを防いでいます。そのため、7回のpushAtFalsy()呼び出しによって、元の配列に含まれていた7つの空き位置（null・false・undefined および4つの空スロット）が順番に数値で埋められ、0だけはそのまま残ります。このようにArray.prototypeに関数を追加することで、どの配列からでもメソッドとして呼び出せる点がポイントです。