JavaScript | 配列に要素を追加する（push, unshift）

配列に要素を追加する方法を、レベル別の練習問題＋解答＋解説を用意しました。

初級（基本操作を覚える）

1. 問題

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits);

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits);

解答
['apple', 'banana', 'orange']
解説
push() は配列の最後に要素を追加する。ここでは 'orange' が末尾に入る。

2. 問題

let tasks = ['task2', 'task3'];
tasks.unshift('task1');
console.log(tasks);

let tasks = ['task2', 'task3'];
tasks.unshift('task1');
console.log(tasks);

解答
['task1', 'task2', 'task3']
解説
unshift() は配列の先頭に要素を追加する。既存の要素は後ろにずれる。

中級（インデックスを意識する）

3. 問題

let nums = [10, 20, 30];
nums[1] = 25;
nums[nums.length] = 40;
console.log(nums);

let nums = [10, 20, 30];
nums[1] = 25;
nums[nums.length] = 40;
console.log(nums);

解答
[10, 25, 30, 40]
解説

• nums[1] = 25; で 20 を上書き。
• nums[nums.length] = 40; は「最後の位置」に追加するので push と同じ効果。

4. 問題

let arr = ['A'];
arr[5] = 'B';
console.log(arr);
console.log(arr.length);

let arr = ['A'];
arr[5] = 'B';
console.log(arr);
console.log(arr.length);

解答
['A', empty ×4, 'B']
6
解説
インデックスを飛ばすと「空の要素（undefined 扱い）」ができる。length は最大インデックス＋1 になる。

上級（複数追加や戻り値を理解する）

5. 問題

let colors = ['red'];
let len = colors.push('blue', 'green');
console.log(colors);
console.log(len);

let colors = ['red'];
let len = colors.push('blue', 'green');
console.log(colors);
console.log(len);

解答

• 配列: ['red', 'blue', 'green']
• 戻り値: 3

解説
push() は複数要素を一度に追加できる。戻り値は「追加後の配列の長さ」。

6. 問題

let queue = ['B', 'C'];
let len = queue.unshift('A', 'AA');
console.log(queue);
console.log(len);

let queue = ['B', 'C'];
let len = queue.unshift('A', 'AA');
console.log(queue);
console.log(len);

解答

• 配列: ['A', 'AA', 'B', 'C']
• 戻り値: 4

解説
unshift() も複数要素をまとめて先頭に追加できる。戻り値は新しい長さ。

まとめ

• 最後に追加 → push()
• 最初に追加 → unshift()
• 位置を指定 → インデックス代入（穴に注意）
• 戻り値 → push/unshift は「新しい配列の長さ」を返す