Zenn
🚴‍♂️

ES5以降のJavaScriptでArrayの最後を取得する

2021/08/23に公開
JavaScript
tech

結論: スプレッド構文 × array.reverse() × 分割代入

ES5以降のJavaScript or TypeScriptで有効な、配列の最後の値を取得するコード

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const [last] = [...words].reverse()
console.log(last) // 'present'

解説

スプレッド演算子
別インスタンスでwords配列のコピーを作る為に利用
元の配列を書き換えてもいいのであれば不要だけれど、一度定義した変数を途中で書き換えるのはヒューマンエラーによるバグの発生原因にもなるので、元の変数や参照渡しによる代入等を行わず、新しくインスタンスを作ります。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
console.log([...words]) // Array ["spray", "limit", "elite", "exuberant", "destruction", "present"]

Array.prototype.reverse()
配列の並びを逆転させる為に利用

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
console.log([...words].reverse()) // Array ["present", "destruction", "exuberant", "elite", "limit", "spray"]

分割代入

配列の特定のindex（今回は0番目）の値を取り出す為に利用
逆転しているので、0番目が最後の値になっている。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const [last] = [...words].reverse()
console.log([...words].reverse()) // "present"

getLastValueForArray関数の定義が不要になるかも

元々こんな関数を定義していたのですが

getLastValueForArray.ts
// NOTE: 可読性が悪かったので、関数化していた。
function getLastValueForArray <T>(array: T[]): T {
  const last = array[array.length - 1]
  // const last = array.slice(-1)[0]
  // const last = [...array].pop()
  return last
}

このコードなら関数化する必要無いくらい可読性も高いし、サクッと書けそうです。

getLastValueForArray.ts
// NOTE: 簡単過ぎるコードなので、関数化は不要かも？
function getLastValueForArray <T>(array: T[]): T {
  const [last] = [...array].reverse()
  return last
}

でも実行速度を気にするなら、おそらく中身がarray[array.length - 1]の関数を定義した方がいいんでしょうね。

感想

ぶっちゃけ関数化するならarray[array.length - 1]でいいし
直接書くにしてもconst last = [...array].pop()で良い気もするし、微妙なコードかも知れない。

読んだみなさんもコメントで自由な「俺ならこうする！」を展開してくださると幸いです！

参考

このコードは「Reactハンズオンラーニング第2版 P.25 2.4.4 スプレッド構文」のコードと同じになります。

Discussion