JavaScriptのunshiftの使い方！配列の先頭に要素追加

JavaScriptで配列の先頭に要素を追加するunshiftメソッドについて書いています。

unshiftメソッドを使うと、配列の最初に新しい要素を追加し、配列の長さを変更できます。
配列を動的に操作する場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

unshiftメソッドの基本的な使い方

unshiftメソッドは、配列の先頭に1つ以上の要素を追加します。
基本的な構文は以下のとおりです。

array.unshift(element1, ..., elementN)

• element1, ..., elementN: 配列に追加する要素（必須）。

配列に要素を追加する

配列の先頭に要素を追加してみます。

const fruits = ['banana', 'orange'];
fruits.unshift('apple');

console.log(fruits); // 結果：['apple', 'banana', 'orange']

fruits配列を作成して、unshiftメソッドで’apple’を追加しました。
結果、fruits配列の先頭に要素が追加されていることが確認できます。

unshiftメソッドによって、fruits配列が変更されていることに注意してください。

複数の要素を一度に追加する

unshiftメソッドを使って、複数の要素を一度に追加することもできます。

const fruits = ['banana', 'orange'];
fruits.unshift('apple', 'grape', 'mango');

console.log(fruits); // 結果：['apple', 'grape', 'mango', 'banana', 'orange']

unshiftメソッドを呼ぶときに、要素を3つわたしました。
こうすると、fruits配列の先頭に’apple’、’grape’、’mango’の3つの要素が追加されます。

unshiftメソッドの戻り値はサイズ

unshiftメソッドは、新しい配列の長さを返します。

const fruits = ['banana', 'orange'];
const newLength = fruits.unshift('apple');

console.log(newLength); // 結果：3

‘apple’が追加された後にfruits配列の長さは3になります。
newLength変数にはfruits配列の長さ「3」が格納されています。

unshiftメソッドを使うメリット

unshiftメソッドを使う主なメリットは以下のとおりです。

• 配列の先頭に要素を簡単に追加できる: 配列の最初に要素を簡単に追加できます。
• 複数の要素を一度に追加できる: 複数の要素をまとめて追加できます。
• 配列の長さを変更できる: 要素を追加することで、配列の長さを動的に変更できます。

JavaScriptのunshiftメソッドの使い方まとめ

今回はJavaScriptのunshiftメソッドの使い方について解説しました。
記事の内容をまとめます。