JavaScriptの配列メソッド入門：push・pop・shift・unshiftで要素を追加・削除する方法

JavaScriptで配列を操作する際に頻繁に使われるのが、以下の4つの配列メソッドです。それぞれ、配列の「先頭」または「末尾」に対して要素を追加・削除する役割を持っています。

• unshift()：配列の先頭に要素を追加します。
• shift()：配列の先頭にある要素を削除します。
• push()：配列の末尾に要素を追加します。
• pop()：配列の末尾にある要素を削除します。

Chrome DevToolsコンソールで試してみよう

この記事の例では、Chrome DevToolsのコンソールを使用します。コンソールを開くには、次のショートカットキーが便利です。

• Mac：Cmd + Option + J
• Windows：Ctrl + Shift + J

ショートカットを使わない場合は、ブラウザの画面上で右クリックして「検証（Inspect）」を選択し、開いた開発者ツールから「Console」タブをクリックしてください。

例で使用する初期配列

まず、例として使用する基本的な配列を定義します。文字列が3つ格納されたシンプルな配列です。

var list = ['item 1', 'item 2', 'item 3'];

各メソッドの戻り値の違いに注意

これらのメソッドを使う際は、戻り値の違いにも注目しましょう。push() と unshift() は操作後の配列の長さ（length）を返す一方、pop() と shift() は削除された要素そのものを返します。この挙動の違いを理解しておくと、実際の開発で非常に役立ちます。

たとえば、キュー（待ち行列）のようなデータ構造を作りたい場合は push() で追加し shift() で取り出す、スタックのように扱いたい場合は push() で追加し pop() で取り出す、といった使い分けが可能です。