JavaScript: push,pop,unshift,shiftをスッキリ整理

JavaScriptの配列を操作するメソッドにpush()、pop()、unshift()、shift()があります。 どれも要素を追加したり削除したりするメソッドなのですが、まぎらわしいので整理しました。

図が一番わかりやすいので図で表示します。

push pop shift unshift
  • push(): 末尾に追加
  • pop(): 末尾を削除
  • unshift(): 先頭に追加
  • shift(): 先頭を削除

それぞれのメソッドの戻り値は？

それぞれの戻り値と、メソッド実行後の配列がどうなっているのかを見てみます。

push(): 末尾に追加


var arr = [10, 20, 30];
var re = arr.push(40);
console.log(arr);       // Array [ 10, 20, 30, 40 ]
console.log(re);        // 4

push()の戻り値は新しい配列の要素数です。

pop(): 末尾を削除


var arr = [10, 20, 30];
var re = arr.pop();
console.log(arr);       // Array [ 10, 20 ]
console.log(re);        // 30

pop()の戻り値は、削除した末尾要素の値です。 別の言い方をすると、「配列の末尾要素だけを取得したい場合は、pop()メソッドで取得できる」ということです。

unshift(): 先頭に追加


var arr = [10, 20, 30];
var re = arr.unshift(40);
console.log(arr);       // Array [ 40, 10, 20, 30 ]
console.log(re);        // 4

unshift()の戻り値も、push()と同じで新しい配列の要素数です。

shift(): 先頭を削除


var arr = [10, 20, 30];
var re = arr.shift();
console.log(arr);       // Array [ 20, 30 ]
console.log(re);        // 10

shift()の戻り値は、削除した先頭要素の値です。 別の言い方をすると、「配列の先頭要素だけを取得したい場合は、shift()メソッドで取得できる」ということです。

JavaScript入門