JavaScriptのpush()メソッドとunshift()メソッドの違いを解説

JavaScriptには、配列に要素を追加するためのメソッドとして「push()」と「unshift()」があります。どちらも元の配列を直接変更する破壊的メソッドですが、要素を追加する位置や内部での動作が異なります。

push()メソッドとは

push()メソッドは、配列の末尾に1つ以上の要素を追加します。戻り値は、要素を追加した後の配列の新しい長さです。この操作により、配列の長さが変化します。

unshift()メソッドとは

unshift()メソッドは、配列の先頭（インデックス0）に1つ以上の要素を追加します。既存の要素はすべて後ろのインデックスへとずらされ、戻り値として要素追加後の配列の新しい長さを返します。

コード例

let fruits = ['apple', 'mango', 'orange', 'kiwi'];
let fruits2 = ['apple', 'mango', 'orange', 'kiwi'];
console.log(fruits.push("pineapple"));
console.log(fruits2.unshift("pineapple"));
console.log(fruits);
console.log(fruits2);

実行結果

5
5
[ 'apple', 'mango', 'orange', 'kiwi', 'pineapple' ]
[ 'pineapple', 'apple', 'mango', 'orange', 'kiwi' ]

両者の主な違い

• 追加位置： push()は配列の末尾に、unshift()は配列の先頭に要素を追加します。
• 戻り値： どちらのメソッドも、要素追加後の新しい配列の長さを返します。
• 処理速度： unshift()は、先頭に要素を追加した後に既存のすべての要素を一つずつ後ろへ移動させる必要があるため、push()よりも低速になります。

注意点

上記の例では、どちらのメソッドを使用しても元の配列そのものが変更されている点に注意してください。元の配列を保持したまま新しい配列を作成したい場合は、スプレッド構文（[...arr, item]）やconcat()メソッドといった非破壊的な方法を活用するとよいでしょう。