JavaScriptで配列最後の要素をスマートに取得するには

JavaScriptでの配列最後の要素を取り出す方法。

この取得方法には２種類あって、
愚直な方法と少しスマートな方法の２つあります。

それをコード例と一緒にまとめました。

このページの目次

方法１．インデックス（添え字）から取得
方法２．sliceメソッドを使って取得
蛇足．配列のマイナス添え字の挙動について
最後要素の取得方法のまとめ

方法１．インデックス（添え字）から取得

１つめはよくあるやり方です。

インデックス（添え字）で取得する方法

一番簡単な例はこういうコードです。

var sweets = [
  'Ice Cream Sandwich',
  'Jelly Bean',
  'KitKat',
  'Lollipop',
  'Marshmallow'
];

var last = sweets[sweets.length-1];
console.log('last : ', last);
  /// => last : Marshmallow

var sweets = [

'Ice Cream Sandwich',

'Jelly Bean',

'KitKat',

'Lollipop',

'Marshmallow'

];

var last = sweets[sweets.length-1];

console.log('last : ', last);

/// => last : Marshmallow

※ インデックスは0から始まる。念のため...

一番簡単でなじみ深い書き方だと思います。

ただ、配列名が長いと冗長になのが欠点・・・

▼ 極端な例を出すならこういう感じ

var veryLongLongLongArrayName = [...];

var last = veryLongLongLongArrayName[
  veryLongLongLongArrayName.length-1
];

var veryLongLongLongArrayName = [...];

var last = veryLongLongLongArrayName[

veryLongLongLongArrayName.length-1

];

こういうのは少しスマートではありません。

もっと助長性の低い＝　無駄のない書き方もあります。

方法２．sliceメソッドを使って取得

２つめは sliceメソッドを使うこと

配列の一部を切り出せる関数ですね。

▼ MDNでのsliceメソッドの説明

slice() メソッドは begin から end まで選択された配列の一部をシャローコピーして、新しい配列オブジェクトを返します (end は含まれません)。元の配列は変更されません。
arr.slice([begin[, end]])
begin Optional
取り出しの開始位置を示す 0 から始まるインデックスです。
end Optional
取り出しを終える直前の位置を示す 0 から始まるインデックスです。 slice は end 自体は含めず、その直前まで取り出します。
引用元　：　Array.prototypr.slice() - JavaScript | MDN

このslice関数には負のインデックスも渡せます。

負のインデックスを渡すと配列最後から指定することができ、たとえば slice(-3); だったら配列の最後から３つの要素を取り出すという処理も可能なんです。

これを利用して最後の要素を取り出してみます。

▼ 配列最後の要素を取り出すコード例

var sweets = [
  'Ice Cream Sandwich',
  'Jelly Bean',
  'KitKat',
  'Lollipop',
  'Marshmallow'
];

var last = sweets.slice(-1)[0];
console.log('last : ', last);
  /// => last :  Marshmallow

var sweets = [

'Ice Cream Sandwich',

'Jelly Bean',

'KitKat',

'Lollipop',

'Marshmallow'

];

var last = sweets.slice(-1)[0];

console.log('last : ', last);

/// => last : Marshmallow

上コードの sweets.slice(-1); で配列１番目を返してくれるけど、これは配列。値として取り出すには sweets.slice(-1)[0] で要素にアクセスしないとダメです。

それさえ気を付ければOK。

蛇足．配列のマイナス添え字の挙動について

少しだけ関連があるので補足。

今紹介したコードをもう１度見てみます。

/// 配列最後の要素を取得
var last = sweets[sweets.length-1];

/// あるいはこっちでも取得可
var last = sweets.slice(-1)[0];

/// 配列最後の要素を取得

var last = sweets[sweets.length-1];

/// あるいはこっちでも取得可

var last = sweets.slice(-1)[0];

もし仮に配列が空っぽだった場合・・・添え字（インデックス）は -1 になってしまいます。その場合の挙動には注意が必要だと思います。

なぜならエラーが一切でないからです。

MDNではマイナス添え字はこう説明されてます。

▼ 配列要素へのアクセスより抜粋

JavaScript の配列のインデックスは 0 から始まるので、配列の最初の要素はインデックス 0 にあります。そして、最後の要素のインデックスは length プロパティの値から 1 を引いた値になります。不正なインデックス番号を使った場合は undefined を返します。
引用元　：　Array - JavaScript | MDN

マイナス添え字は undefined になるとのこと

実際に次のコードで確認してみました。

var sweets = [];

var last = sweets[sweets.length-1];
console.log('last : ', last);
  /// => last :  undefined

var sweets = [];

var last = sweets[sweets.length-1];

console.log('last : ', last);

/// => last : undefined

確かに undefine になってます。

エラーが出ないからマイナス添え字には要注意ですね。

最後要素の取得方法のまとめ

次の２つのどちらか

インデックス（添え字）
たとえば sweets[sweets.length-1]; みたいな感じで。ただし長い配列名だと冗長（＝無駄が多い）書き方になってしまうのが欠点。
sliceメソッドを使う
あるいは sweets.slice(-1)[0]; のようにしても取得可能。こちらは少し分かりにくいけど、助長性を限りなく低くできる。