JavaScript

The push() method in JavaScript is a method for adding elements to the end of an array.

push() [method]

 JavaScriptの配列に要素を追加する方法として、push()メソッドがあります。push()は、引数として渡された要素を配列の末尾に追加するために使用されます。

 例えば、以下のような配列があるとします。


const fruits = ["apple", "banana", "orange"];

 この配列に新しい要素を追加するには、push()メソッドを使用します。


fruits.push("grape");

 このコードでは、文字列 "grape" が fruits配列の末尾に追加されます。push()メソッドは、追加された後の配列の要素数を返します。この場合、fruits配列の要素数は 4 になります。


const fruits = ["apple", "banana", "orange"];

fruits.push("grape");

console.log(fruits);

push()メソッドの実行画像

 また、push()メソッドは、1つ以上の要素を引数として受け取ることができます。以下の例では、さらに、2つの要素を追加しています。


fruits.push("kiwi", "mango");

console.log(fruits);

 この場合、fruits配列には["apple", "banana", "orange", "grape", "kiwi", "mango"]という要素が含まれることになります。

push()メソッドの実行画像

 push()メソッドは、配列の末尾に要素を追加するため、unshift()メソッドは配列の先頭に要素を追加するために使用されます。


fruits.unshift("pear");

console.log(fruits);

 このコードでは、文字列 "pear" が fruits配列の先頭に追加されます。fruits配列には["pear", "apple", "banana", "orange", "grape", "kiwi", "mango"]という要素が含まれることになります。

push()メソッドの実行画像

 push()メソッドは、配列に要素を追加する場合に非常に便利であり、JavaScriptのプログラミングにおいて頻繁に使用されます。

 push()メソッドは、配列の末尾に要素を追加することができるため、スタック(後入れ先出し)の実装に適しています。以下は、スタックの例です。


const stack = [];

stack.push("apple");
stack.push("banana");
stack.push("orange");

console.log(stack); // ["apple", "banana", "orange"]

stack.pop();

console.log(stack); // ["apple", "banana"]

 上記の例では、stack配列に要素を追加することで、スタックを実現しています。最後に pop()メソッドを使用して、配列の末尾から要素を削除しています。

push()メソッドの実行画像

 push()メソッドは、配列に要素を追加する際に、配列の末尾に要素を追加するため、配列の要素数が増加します。これは、メモリ使用量を増やすことになるため、大量のデータを処理する場合には注意が必要です。

 push()メソッドは、引数として何も渡されなかった場合、配列の末尾に undefined という値を追加しますが、このことはコンソールに表示されません。このため、配列の要素数を表示しても、undefined が追加されたことがわかりません。

 以下は、push()メソッドで引数を渡さずに配列に要素を追加し、その後配列の内容をコンソールに表示する例です。


const numbers = [1, 2, 3];

numbers.push();

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

push()メソッドの実行画像

 push()メソッドで引数を渡さずに要素を追加することは、一般的には避けるべきです。明示的に undefined を配列に追加する場合には、引数として undefined を渡すことができます。


const numbers = [1, 2, 3];

numbers.push(undefined);

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

push()メソッドの実行画像

 このように、push()メソッドには、引数を渡さなかった場合に追加される値があることに注意が必要です。

 push()メソッドは、配列の末尾に要素を追加するだけでなく、Arrayオブジェクトのプロトタイプに定義されているメソッドなので、配列に対して使用できる様々なメソッドを利用できます。

 例えば、push()メソッドを使用して新しい要素を追加した後に、join()メソッドを使用して配列の要素を文字列に結合することができます。


const fruits2 = ["apple", "banana", "orange"];

fruits2.push("grape");

const fruitsString = fruits2.join(", ");

console.log(fruitsString); // "apple, banana, orange, grape"

 このコードでは、push()メソッドを使用して文字列 "grape" を fruits配列に追加し、join()メソッドを使用して配列の要素をカンマで区切った文字列に変換しています。

push()メソッドの実行画像

 また、push()メソッドは、可変長引数を使用して複数の要素を一度に配列に追加することができます。


const numbers = [1, 2, 3];

numbers.push(4, 5, 6);

console.log(numbers); // [1, 2, 3, 4, 5, 6]

 このコードでは、push()メソッドを使用して複数の要素を一度に numbers配列に追加しています。

push()メソッドの実行画像

 push()メソッドは、配列の末尾に要素を追加するため、配列の順序を保持するためにも有用です。例えば、以下のコードでは、push()メソッドを使用して新しいオブジェクトを people配列に追加しています。


const people = [
	{ name: "Alice", age: 25 },
	{ name: "Bob", age: 30 }
];

people.push({ name: "Charlie", age: 35 });

console.log(people); // [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 35 }]

push()メソッドの実行画像

 push()メソッドを使用して、空の配列に要素を追加することができます。以下の例では、空の配列に push()メソッドを使用してオブジェクトを追加しています。


const myArray = [];

myArray.push({ name: "John", age: 20 });

console.log(myArray); // [{ name: "John", age: 20 }]

push()メソッドの実行画像

 push()メソッドは、JavaScriptで配列を扱う際に頻繁に使用されるメソッドであり、様々な使い方ができるため、JavaScriptの開発において非常に重要なメソッドの一つです。