JavaScriptのunshift()とは？配列の先頭に要素を追加する方法を徹底解説

unshift()とは

JavaScriptの**unshift()**は、配列の先頭（インデックス0）に要素を追加するためのメソッドです。
追加した結果、配列の長さ（length）も更新されるのが特徴です。

基本構文

array.unshift(要素1, 要素2, ...);

• 配列の先頭に要素を追加する
• 複数の要素を一度に追加できる
• 戻り値は「追加後の配列の長さ」

unshift()の基本的な使い方

1つの要素を追加する

const arr = [2, 3, 4];

const result = arr.unshift(1);

console.log(arr);    // [1, 2, 3, 4]
console.log(result); // 4

ポイント

• 配列の先頭に「1」が追加される
• 戻り値は新しい配列の長さ（4）

複数の要素を追加する

const arr = [3, 4];

arr.unshift(1, 2);

console.log(arr); // [1, 2, 3, 4]

ポイント

• 引数に複数指定すると、順番通りに先頭へ追加される

unshift()の特徴

配列そのものが変更される（破壊的メソッド）

unshift()は、元の配列を直接変更します。

const arr = [2, 3];

arr.unshift(1);

console.log(arr); // [1, 2, 3]

補足

元の配列を変更したくない場合は、スプレッド構文を使う方法が適しています。

const arr = [2, 3];

const newArr = [1, ...arr];

console.log(newArr); // [1, 2, 3]

push()との違い

配列操作では、よく**push()**と比較されます。

push()の例

const arr = [1, 2];

arr.push(3);

console.log(arr); // [1, 2, 3]

👉 関連記事：JavaScriptのpush()の使い方を解説した記事

unshift()がよく使われる場面

最新データを先頭に追加したい場合

const logs = ["古いデータ"];

logs.unshift("新しいデータ");

console.log(logs); // ["新しいデータ", "古いデータ"]

活用例

• チャット履歴
• 最新ニュース一覧
• タスクの優先順位管理

unshift()の注意点

パフォーマンスに注意

配列の先頭に要素を追加すると、既存のすべての要素のインデックスがずれます。
そのため、大きな配列では処理コストが高くなる場合があります。

const arr = [];

for (let i = 0; i < 10000; i++) {
  arr.unshift(i);
}

console.log(arr.length); // 10000

補足

大量データの場合は、以下のような方法も検討されます。

• push()で追加して最後にreverse()
• データ構造の見直し（キュー構造など）

unshift()とshift()の関係

unshift()は「追加」ですが、対になるのが**shift()**です。

shift()の例

const arr = [1, 2, 3];

const removed = arr.shift();

console.log(arr);     // [2, 3]
console.log(removed); // 1

👉 関連記事：JavaScriptのshift()の使い方を徹底解説

まとめ

• unshift()は配列の先頭に要素を追加するメソッド
• 複数の要素をまとめて追加できる
• 戻り値は配列の長さ
• 元の配列を変更する（破壊的）
• 大量データではパフォーマンスに注意

関連記事

• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのpush()の使い方を解説した記事
• JavaScriptのshift()の使い方を徹底解説
• JavaScriptのsplice()の基本解説
• JavaScriptのslice()の基本解説