【JS】forEachで最初と最後だけに処理をいれる方法

今回はJavaScriptのforEachを使う際に、最初と最後にだけ処理を入れたいときのTipsを紹介します。

では早速いってみましょう。

forEachで最初と最後だけに処理をいれる方法

今回はわかりやすく、最初と最後にconsole.log()で「start」「end」と表示してみたいと思います。

というわけでforEach を使って最初と最後だけに console.log() を使って

「start」「end」を表示するプログラムは以下のように書くことができます。

const array = [1, 2, 3, 4, 5];

array.forEach((item, index) => {
  if (index === 0) {
    console.log('start');
  }
  
  // 実際の処理をここに書く
  
  if (index === array.length - 1) {
    console.log('end');
  }
});

ここからはコードの解説をしていきます。

コードの解説

最初と最後だけ処理を入れるというのは、

つまり「ループ処理が今何回目か」というのが分かればOKということです。

結論としては、forEachを使う時に、第二引数にindexを入れることでそれを判定できます。

array.forEach((item, index) => {
  ...
}

indexは0から始まり、ループの処理の度に自動でインクリメントする（1ずつ足されていく）ので、

これを辿ることでループ処理が今何回目か、を計算することが可能です。

つまり、ループ処理の最初を判定するには

if (index === 0) {
  ...
}

とすれば判定が可能です。

では逆に最後を判定するにはどうするかというと、

処理を回す対象となる配列の長さ-1で計算可能です。

if (index === array.length - 1) {
    ... 処理
  }

分からない人向け：なぜlength-1なのか？

なぜlength-1と書く必要があるのでしょうか。

それはindexは0から始まるのに、配列の数は1から計算されるからです。

.lengthは「配列が何個あるか」を計算してくれるメソッドのため、5個の配列があれば「5」と出力します。

しかしループ処理の中で使うindexという一時変数（ループ処理内で一時的に使われる変数）は

0からカウントされていくので計算時に調整が必要というわけです。

ループ処理内のindex = 0,1,2,3,4 (全部で5）
lengthで計算する配列のインデックス = 1,2,3,4,5 （全部で5）
↑１つズレがあるので合わせる必要がある

まとめ

forEachでループ処理の最初と最後を判定するには

const array = [1, 2, 3, 4, 5];

array.forEach((item, index) => {
  if (index === 0) {
    console.log('start');
  }
  
  // 実際の処理をここに書く
  
  if (index === array.length - 1) {
    console.log('end');
  }
});

と書けばOK。