JavaScript: push,pop,unshift,shiftをスッキリ整理
JavaScriptの配列を操作するメソッドにpush()、pop()、unshift()、shift()があります。 どれも要素を追加したり削除したりするメソッドなのですが、まぎらわしいので整理しました。
図が一番わかりやすいので図で表示します。

- 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()メソッドで取得できる」ということです。