【JavaScript】pop,push,shift,unshiftの使い方と違いを一瞬で理解する方法

2021年4月14日

JavaScriptで、配列の要素を追加するpush、unshift、削除するpop、shiftの使い方と違いをまとめました。

【忙しい人向け】pop、push,shift,unshiftの処理を確認するボタン

↓サンプル配列
{{ JSON.stringify(aryList) }}
↓各種操作をしてみましょう

push() 配列の最後（末尾）に追加

push()は配列の末尾に追加する関数です。
カンマ区切りで入力することで、複数の要素も追加できます。

サンプルコード
var array = ['A', 'B', 'C'];

array.push('D'); // Dを追加

console.log(array);

array.push('E', 'F'); // E,Fを追加 カンマ区切りで複数追加できる

console.log(array);

pop() 配列の最後（末尾）を削除

pop()は配列の末尾を削除する関数です。
pushの逆バージョンで覚えましょう。

サンプルコード
var array = ['A', 'B', 'C'];

array.pop(); // Cを削除

console.log(array);

array.pop(); // Bを削除

console.log(array);

unshift() 配列の最初（先頭）に追加

unshift()は配列の先頭に追加する関数です。
pushと同じく、カンマ区切りで入力することで、複数の要素を追加できます。

サンプルコード
var array = ['A', 'B', 'C'];

array.unshift('D'); // Dを追加

console.log(array);

array.unshift('E', 'F'); // E,Fを追加 カンマ区切りで複数追加できる

console.log(array);

shift() 配列の最初（先頭）を削除

shift()は配列の先頭を削除する関数です。

サンプルコード
var array = ['A', 'B', 'C'];

array.shift(); // Cを削除

console.log(array);

array.shift(); // Bを削除

console.log(array);

まとめ

pop、push,shift,unshiftの違いを一覧でまとめました。

位置 処理
push() 末尾 追加
pop() 末尾 削除
unshift() 先頭 追加
shift() 先頭 削除

覚えてしまえば簡単ですが、あやふやになった時は是非このページで確認しにきてくださいね。

以上、pop,push,shift,unshiftの使い方と違いを一瞬で理解する方法、でした。

JavaScript