JavaScriptで配列の最後の要素を取得する方法はいろいろありますが、一番いい方法はどれでしょうか？
書きやすさや可読性の観点から比較したいと思います。
今回やりたいことは配列の最後の要素を取得したいだけで、配列に変更は加えません。そのため popメソッド は使用できません。
1. atメソッド（推奨）
先に結論を言うと atメソッド がいいです。
const colors = ["red", "green", "blue"];
const last = colors.at(-1);
console.log(last);
// "blue"
Pythonなどでは負の数で後ろからアクセスできますが、JavaScriptではPythonのようにブランケット記法で負の数は扱えません。
const colors = ["red", "green", "blue"];
const last = colors[-1];
console.log(last);
// undefined
そこで使用するのがES2022で導入された atメソッド です。atメソッド は負の数が扱える以外は基本ブランケット記法と同じ処理になります。（あとで注意として記載していますが、完全に同じではありません）
一番シンプルで可読性の高い書き方です。
2. lengthプロパティ
const colors = ["red", "green", "blue"];
const last = colors[colors.length - 1];
console.log(last);
// "blue"
配列の長さから1を引くことで最後の要素のインデックスを取得する方法です。個人的には一番よく見かける方法かなと思います。
3. sliceメソッド
const colors = ["red", "green", "blue"];
const last = colors.slice(-1)[0];
console.log(last);
// "blue"
slice(-1) で配列の最後の要素を含む新しい配列を作成します。その後、[0] でその要素を取得します。
JavaScriptをある程度理解している人であれば、それほど難しくありませんが、ぱっと見分かりづらいのが難点です。
注意
シンプルで使用しやすい atメソッド ですが、注意点があります。
それは整数以外を使用した時です。実際にどうなるか試してみます。
const colors = ["red", "green", "blue"];
console.log(colors.at("foo")); // red
console.log(colors.at(undefined)); // red
console.log(colors.at(NaN)); // red
console.log(colors.at(1.5)); // green
文字列やundefiendなどは 0 として扱われ、小数点以下は切り捨てとなります。
ブランケット記法とは違って undefined は返しませんので、注意してください。
参考
https://qiita.com/petamoriken/items/da03f55cb626617c1958
おまけ
3つの方法を紹介しましたが、どれが一番早いのでしょうか？計測してみました。
測定方法
node: v20.10.0
配列の要素数は1000。10回実行しそれぞれ平均値を求める。
結果
1. At methodの平均実行時間 : 約0.00297秒
2. lengthの平均実行時間 : 約0.0115秒
3. Slice methodの平均実行時間 : 約0.00277秒
lengthプロパティを使用する方法が他と比べて遅く、sliceメソッド を使用する方法が atメソッド と比べて若干早いという結果になりました。
ただどれを使用してもパフォーマンスに大きな影響はないと思いますので、それほど気にしなくてよいと思います。