【JavaScript】unshift()を使って配列の先頭に要素を追加する方法

「unshift()」はJavaScriptの配列に新しい要素を先頭に追加する役立つメソッドです。この記事では、基本的な使い方から複数の使用例まで解説します。配列操作の幅を広げる際に活用できるこのメソッドについて、詳しく学んでみましょう。

3行で要約すると:

unshift()はJavaScriptのメソッドで、配列の最初に要素を足します。
文字や数字、オブジェクトなど、さまざまなものを先頭に追加できます。
使用すると、元の配列自体が変わってしまうので注意が必要です。

「unshift()」の基本的な使い方

「unshift()」とは？

「unshift()」は、JavaScriptの配列に新しい要素を先頭に追加するためのメソッドです。例えば、友人の名前をリスト化している配列に新しい友人を追加したい場合、このメソッドを使用します。

let friends = ['John', 'Emily', 'Sophia'];
friends.unshift('Oliver');
console.log(friends);  // Output: ['Oliver', 'John', 'Emily', 'Sophia']

上の例でわかるように、unshift()を使うと新しい友人の「Oliver」が配列の先頭に追加されました。

「unshift()」の使用例4パターン

複数の要素を先頭に追加

unshift()は複数の要素を一度に追加することもできます。

let colors = ['red', 'blue'];
colors.unshift('green', 'yellow');
console.log(colors);  // Output: ['green', 'yellow', 'red', 'blue']

配列と文字列を結合して追加

文字列や他の配列と結合して、新しい要素として追加することも可能です。

let words = ['world'];
words.unshift('hello', 'beautiful');
console.log(words);  // Output: ['hello', 'beautiful', 'world']

配列の先頭に数字を追加

数字のリストに新しい数字を先頭に追加する場面もあります。

let numbers = [2, 3, 4];
numbers.unshift(1);
console.log(numbers);  // Output: [1, 2, 3, 4]

配列の先頭にオブジェクトを追加

オブジェクトもunshift()を使用して配列の先頭に追加できます。

let persons = [{name: 'John'}];
persons.unshift({name: 'Emma'});
console.log(persons);  // Output: [{name: 'Emma'}, {name: 'John'}]

「unshift()」と「push()」

「push()」とは？

push()は、配列の最後に新しい要素を追加するためのメソッドです。

let fruits = ['apple', 'banana'];
fruits.push('cherry');
console.log(fruits);  // Output: ['apple', 'banana', 'cherry']

「unshift()」と「push()」の違い

unshift()は配列の先頭に、push()は配列の最後に要素を追加します。

let animals = ['dog', 'cat'];
animals.unshift('elephant');
animals.push('lion');
console.log(animals);  // Output: ['elephant', 'dog', 'cat', 'lion']

「unshift()」を使用する際の注意点

元の配列が変更される

unshift()を使用すると、元の配列自体が変わってしまうので、元のデータを保持したい場合は注意が必要です。コピーを取ってから操作する方法もあります。

let originalArray = [2, 3, 4];
let newArray = [...originalArray];
newArray.unshift(1);
console.log(originalArray); // [2, 3, 4]
console.log(newArray); // [1, 2, 3, 4]

追加した要素の数が返される

unshift()メソッドを使用すると、新しく追加された配列の長さが返されます。そのため、追加後の配列そのものが欲しい場合は注意が必要です。

let myArray = [2, 3, 4];
let lengthAfterUnshift = myArray.unshift(1);
console.log(lengthAfterUnshift); // 4 (配列の新しい長さ)
console.log(myArray); // [1, 2, 3, 4]