push() / pop() / shift() / unshift()

4つとも元の配列を書き換えます。 新しい配列は返りません。

const items = [1, 2, 3];

console.log(items.push(4));
console.log(items);
console.log(items.pop());
console.log(items);

const items = [1, 2, 3];

console.log(items.shift());
console.log(items);
console.log(items.unshift(0));
console.log(items);

戻り値が違います。

• push() … 足したあとの長さ
• pop() … 取り出した要素

4つの違い

const items = [];

console.log(items.pop());
console.log(items.shift());
console.log(items.length);
console.log(items.push());

const items = [1, 2];

items.push([3, 4]);

console.log(items);

足す系は長さ、取る系は要素、と覚えると取り違えません。

先頭を触る shift() / unshift() は、後ろの要素を全部ずらします。件数が多いと末尾より遅くなります。

空の配列では

const items = [1, 2];

items.push(...[3, 4]);

console.log(items);

const items = [1, 2];

console.log(items.concat([3, 4]));
console.log(items);

例外にはなりません。 undefined が返るだけです。

「取れた」のか「空だった」のかを、戻り値だけでは区別できません。 undefined を要素として入れている配列では、なおさら分かりません。 先に length を見てください。

配列を足すと入れ子になる

const items = [1, 2, 3];

console.log([...items, 4]);
console.log([0, ...items]);
console.log(items);

const items = [1, 2, 3];

console.log(items.toSpliced(0, 1));
console.log(items.with(0, 99));
console.log(items.toReversed());
console.log(items);

push() は渡したものをそのまま1つの要素として入れます。

中身を並べたいなら、スプレッド構文で開いてください。

const items = [1, 2, 3];
const added = items.push(4);

console.log(added);

const items = [1, 2, 3];

items.push(4);

console.log(items);

concat() なら、元を変えずに繋げた新しい配列が返ります。

const queue = [1, 2, 3];

for (let i = 0; i < queue.length; i++) {
  queue.shift();
}

console.log(queue);

const queue = [1, 2, 3];
const done = [];

while (queue.length > 0) {
  done.push(queue.shift());
}

console.log(done, queue);

push(...huge) は引数として全部展開するので、要素が非常に多いと上限に当たることがあります。件数が読めないときは concat() かループを使ってください。

元を変えたくないとき

書き換えたくないなら、そもそも使わないのがいちばん簡単です。

取り除く・置き換える側にも、元を変えない対があります（ES2023）。

toSpliced() / with() / toReversed() は Node 20 / Chrome 110 / Safari 16 より前では使えません。

→ slice() と splice()

よくある間違い

戻り値を新しい配列だと思う

返るのは長さです。配列ではありません。 added.map(...) と書けば、そこで落ちます。

const だから安全だと思う

const が固定するのは名前と値の結びつきで、中身ではありません。 → TypeError: Assignment to constant variable.

共有している配列に push() すると、見ている全員に影響します。

繰り返しの中で shift() する

取り出すたびに length が減るので、途中で条件が成立して止まります。

全部取り出すなら while にしてください。

まとめ

• 4つとも元を書き換える
• 足す系は長さ、取る系は要素を返す
• 空配列では undefined。例外にはならない
• 配列を push() すると入れ子になる。... で開く
• 元を変えないなら [...items, x] や toSpliced() / with()
• const でも中身は変わる