【JavaScript】配列に要素を追加するメソッドを解説(push/unshift)

こんにちは！Kです！

今回は、JavaScriptで配列に要素を追加するメソッドを2つ解説したいと思います！

今回解説するメソッドは以下の通りです。

・push()
・unshift()

この2つのメソッドは、配列の要素に「追加する」という処理自体は同じなのですが、追加の仕方が少し違うのでその違いを理解しましょう！

push()

push()メソッドは、配列の末尾（一番後ろ）に 一 つ以上の要素を追加します。

戻り値は、新しい配列の要素数を返します。

基本構文は以下の通りです。

arr.push([element1[, ...[, elementN]]])

【引数】
elementN・・・配列の末尾に追加する要素

【返値】
メソッドが呼び出されたオブジェクトの新しいlengthプロパティ

コード例

// 配列
const moji = ['A', 'B', 'C'];

// 追加する要素
const cnt = moji.push('D');

// 結果出力
console.log('要素数：' + cnt);
console.log('配列の要素：' + moji);

■実行結果

要素数：4
配列の要素：A,B,C,D

上記の例のようにpush()メソッドを使うと、配列の一番後ろに要素が追加されたことが分かります。

普通に理由なく配列に要素を追加したいのであればpush()メソッドを使えば問題ないと思います。

unshift()

unshift()メソッドは、配列の最初（一番前）に 一つ以上の要素を追加します。

戻り値は、push()メソッドと同じく新しい配列の要素数を返します。

基本構文は以下の通りです。

arr.unshift([element1[, ...[, elementN]]])

【引数】
elementN・・・配列の先頭に追加する要素

【返値】
メソッドが呼び出されたオブジェクトの新しいlengthプロパティ

コード例

// 配列
const moji = ['A', 'B', 'C'];

// 追加する要素
const cnt = moji.unshift('D');

// 結果出力
console.log('要素数：' + cnt);
console.log('配列の要素：' + moji);

■実行結果

要素数：4
配列の要素：D,A,B,C

上記の例のようにunshift()メソッドを使うと、配列の先頭に要素が追加されたことが分かります。

まとめ

上で解説した二つのメソッドの違いをまとめると以下の通りです。

push()
配列の末尾に要素を追加する

unshift()
配列の先頭に要素を追加する

いかがでしょうか？
配列の先頭に追加するか末尾に追加するかの違いなので分かりやすいと思います。

実は今回解説したpush()、unshift()メソッドとは別に、「splice()メソッド」というものもあります。

splice()メソッドも配列に要素を追加するメソッドですが、追加する位置を指定することができるという点で上記の二つのメソッドと違いがあります。

シンプルに解説したかったので今回の記事ではあえて解説しませんでした。
次回splice()メソッドについては解説したいと思います。
ぜひ今回の記事とあわせて読んでみて下さい！

それでは、また！

Follow me!