Vanilla JavaScriptで配列の最後の要素を取得する3つの方法

プレーンなJavaScript(バニラJS)だけを使って、配列の最後の要素を取得する3つの方法を学びましょう。まずは操作対象となる配列を用意します。ここでは、エクササイズのリストを使用します。

エクササイズ配列の作成

const exercises = ['pull-up', 'push-up', 'squat', 'deadlift']

リストの最初の要素を取得するには exercises[0] を、2番目の要素を取得するには exercises[1] を使います。しかし、リスト内のエクササイズの総数がわからない場合はどうすればよいのでしょうか?

ご安心ください。いくつかの方法があります。

1. array.lengthを使って最後の要素を取得する

最初の方法は、JavaScriptの array.length プロパティを利用する方法です。まず変数を用意し、そこに配列を代入します。

const lastExercise = exercises[exercises.length - 1]

console.log(lastExercise) を実行すると、コンソールには配列の最後の要素、この場合は deadlift が出力されます。

2. pop()を使って最後の要素を取得する

次に、JavaScriptの配列メソッドである pop() を使う方法です。これも配列の最後の要素を取得しますが、動作の仕方が少し異なります。試してみましょう。

exercises.pop()

pop() メソッドは確かに配列の最後の要素を対象としますが、注意が必要です。このメソッドは最後の要素を取得するだけでなく、その要素を配列から削除してしまいます。

exercises.pop() の直後に console.log(exercises) を実行すると、配列が元の4つではなく3つの要素になっていることが確認できます。これは用途によっては望ましい場合もあれば、そうでない場合もあります。

3. Array slice()メソッドを使って最後の要素を取得する

最後に紹介する方法は length を使う方法と似ていますが、代わりに slice() を使用します。

const lastExercise = exercises.slice(-1)

console.log(lastExercise) を実行すると、length を使った例と同じ結果が得られます。多くの開発者は slice メソッドの方が length メソッドよりも読みやすいと感じていますが、残念ながらパフォーマンスの面では大幅に遅くなります。

その違いを確認したい場合は、jsperf.comなどで slice と length の比較ベンチマークを実行してみてください。

どちらの方法を選ぶべきか?

では、パフォーマンス重視と可読性重視、どちらの配列メソッドを使うべきでしょうか?正解はありません。状況次第です。

一般的には、画像を扱う場合など、利便性よりもパフォーマンスを優先するのが一つの目安になります。ただし、白黒はっきりつける問題ではありません。単純な配列の最後の要素を取得するだけであれば、1秒間に何百万回も関数を実行しない限り、slice と length のパフォーマンスの違いをアプリで体感することはまずないでしょう。

常に状況に応じて最適な判断をすることが大切です。