JavaScriptのfill()とは？配列を同じ値で埋める方法を基礎から徹底解説

JavaScriptのfill()は、配列の要素を指定した値でまとめて埋めるメソッドです。
初期値をそろえた配列を作りたいときや、一部の要素だけを同じ値に置き換えたいときに役立ちます。

一方で、fill()は元の配列を書き換えるという特徴があるため、使い方を正しく理解していないと意図しない結果になることがあります。特に、オブジェクトを埋める場合には注意が必要です。

この記事では、JavaScriptのfill()について、基本構文、使い方、開始位置と終了位置の指定、注意点、実務での活用例まで、基礎から順番に整理して解説します。
配列の基本から確認したい場合は、先にJavaScriptの配列操作まとめもあわせて読むと理解しやすくなります。

JavaScriptのfill()とは

配列を指定した値で埋めるメソッドです

fill()は、配列のすべて、または一部の要素を、指定した値で埋めるためのメソッドです。

たとえば、長さ5の配列をすべて0で埋めたい場合に使えます。

// fill-basic.js
const arr = new Array(5).fill(0);

console.log(arr); // [0, 0, 0, 0, 0]

このように、fill()を使うと同じ初期値を持つ配列を簡単に作れます。

元の配列を書き換える破壊的メソッドです

fill()は新しい配列を作るのではなく、元の配列そのものを変更します。

// fill-mutate.js
const arr = [1, 2, 3];
const result = arr.fill(9);

console.log(arr);    // [9, 9, 9]
console.log(result); // [9, 9, 9]
console.log(arr === result); // true

戻り値は配列ですが、それは新しい配列ではなく、書き換え後の元の配列です。
配列メソッドの中には新しい配列を返すmap()やfilter()もあるため、違いを整理したい場合はJavaScriptのmap()についてやJavaScriptのfilter()とは？配列の絞り込みを徹底解説も参考になります。

fill()の基本構文

構文は3つの引数で成り立ちます

fill()の基本構文は次の通りです。

array.fill(value, start, end)

各引数の意味は以下の通りです。

• value：埋める値
• start：開始位置（省略可）
• end：終了位置。ここで指定した位置の手前までが対象（省略可）

引数を省略した場合の動きです

startとendを省略した場合は、配列全体が対象になります。

// fill-all.js
const arr = [1, 2, 3, 4];
arr.fill(7);

console.log(arr); // [7, 7, 7, 7]

fill()の基本的な使い方

配列全体を同じ値で埋める方法です

最も基本的な使い方は、配列全体を同じ値で埋める方法です。

// fill-whole-array.js
const arr = [10, 20, 30, 40];
arr.fill(1);

console.log(arr); // [1, 1, 1, 1]

空の配列に初期値を入れる方法です

new Array(要素数)で作った配列は空のスロットを持つため、そのままでは扱いにくいことがあります。
そこでfill()を使うと、初期値つきの配列にできます。

// fill-initialize.js
const scores = new Array(4).fill(0);

console.log(scores); // [0, 0, 0, 0]

数値の初期化はもちろん、文字列や真偽値でも同じように使えます。

// fill-string-boolean.js
const names = new Array(3).fill("未設定");
const flags = new Array(4).fill(false);

console.log(names); // ["未設定", "未設定", "未設定"]
console.log(flags); // [false, false, false, false]

開始位置startを指定する方法

指定した位置から末尾まで埋められます

第2引数のstartを指定すると、その位置から配列の末尾まで埋められます。

// fill-start.js
const arr = [1, 2, 3, 4, 5];
arr.fill(9, 2);

console.log(arr); // [1, 2, 9, 9, 9]

この例では、インデックス2から後ろがすべて9に変わります。

インデックスは0から始まります

JavaScriptの配列は、先頭要素の位置が0です。

そのため、fill(9, 2)は3番目の要素から変更することを意味します。

終了位置endを指定する方法

終了位置はその手前までが対象です

第3引数のendを指定すると、startからendの手前までが埋められます。

// fill-start-end.js
const arr = [1, 2, 3, 4, 5];
arr.fill(8, 1, 4);

console.log(arr); // [1, 8, 8, 8, 5]

この例では、インデックス1から3までが8になります。
4そのものは含まれません。

範囲指定の考え方です

fill(value, start, end)は、次のように考えるとわかりやすいです。

• 開始位置 start は含む
• 終了位置 end は含まない

これはslice()など他の配列メソッドでもよく使われる考え方です。
配列の範囲指定に慣れておきたい場合は、JavaScriptのfind()とは？最初の要素を取得する方法やJavaScriptのincludes()についてとあわせて配列メソッド全体を整理しておくと理解が深まります。

マイナスのインデックスを指定する方法

後ろから数えた位置を指定できます

startやendにはマイナスの数も指定できます。
その場合は、配列の末尾から数えた位置として扱われます。

// fill-negative-index.js
const arr = [1, 2, 3, 4, 5];
arr.fill(0, -2);

console.log(arr); // [1, 2, 3, 0, 0]

-2は「後ろから2番目」を意味するため、インデックス3から埋められます。

startとendの両方にマイナスを使うこともできます

// fill-negative-range.js
const arr = [1, 2, 3, 4, 5, 6];
arr.fill(9, -4, -1);

console.log(arr); // [1, 2, 9, 9, 9, 6]

この例では、後ろから4番目の位置から、後ろから1番目の手前までが対象です。

fill()の戻り値

戻り値は書き換え後の配列です

fill()は、変更後の配列を返します。

// fill-return-value.js
const arr = [1, 2, 3];
const result = arr.fill(5);

console.log(result); // [5, 5, 5]

ただし、新しい配列ではありません。元の配列と同じものです。

// fill-same-reference.js
const arr = [1, 2, 3];
const result = arr.fill(5);

console.log(arr === result); // true

fill()を使うと便利な場面

初期値を持つ配列を作りたいときです

一定数の入力欄の状態や集計用の数値を準備するときに便利です。

// fill-counter.js
const counts = new Array(5).fill(0);

counts[0] += 1;
counts[1] += 2;

console.log(counts); // [1, 2, 0, 0, 0]

一部だけ同じ値に置き換えたいときです

範囲を指定してまとめて更新したいときにも使えます。

// fill-partial-update.js
const seats = ["空席", "空席", "空席", "空席", "空席"];
seats.fill("予約済み", 1, 4);

console.log(seats); // ["空席", "予約済み", "予約済み", "予約済み", "空席"]

Array.from()と組み合わせる前段階として使うことがあります

fill()は同じ値で埋めるのが得意ですが、連番のように要素ごとに異なる値を入れたい場合はArray.from()が適しています。

// array-from-sequence.js
const numbers = Array.from({ length: 5 }, function (_, index) {
  return index + 1;
});

console.log(numbers); // [1, 2, 3, 4, 5]

使い分けを整理したい場合は、JavaScriptのArray.from()についてもあわせて確認すると便利です。

fill()を使うときの注意点

オブジェクトを埋めると同じ参照が入ります

fill()でオブジェクトを指定すると、各要素に別々のオブジェクトが入るのではなく、同じオブジェクトへの参照が入ります。

// fill-object-warning.js
const arr = new Array(3).fill({ count: 0 });

arr[0].count = 10;

console.log(arr);
// [{ count: 10 }, { count: 10 }, { count: 10 }]

1つだけ変更したつもりでも、すべて同じように変わってしまいます。

別々のオブジェクトを作りたいならArray.from()が向いています

各要素に独立したオブジェクトを入れたい場合は、Array.from()などで1つずつ生成する方法が適しています。

// array-from-object.js
const arr = Array.from({ length: 3 }, function () {
  return { count: 0 };
});

arr[0].count = 10;

console.log(arr);
// [{ count: 10 }, { count: 0 }, { count: 0 }]

文字列や数値ではこの問題は起こりません

数値、文字列、真偽値などのプリミティブ値を埋める場合は、参照の共有を意識する必要はありません。

// fill-primitive-safe.js
const arr = new Array(3).fill(0);

arr[0] = 99;

console.log(arr); // [99, 0, 0]

fill()と他の配列メソッドの違い

map()との違いです

map()は各要素をもとに新しい配列を作るメソッドです。
一方、fill()は同じ値で埋めながら元の配列を変更します。

// fill-vs-map.js
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

const mapped = arr1.map(function (num) {
  return num * 2;
});

arr2.fill(0);

console.log(mapped); // [2, 4, 6]
console.log(arr1);   // [1, 2, 3]
console.log(arr2);   // [0, 0, 0]

new Array()との組み合わせです

new Array(5)だけでは空のスロットを持つ配列になります。

// new-array-only.js
const arr = new Array(5);

console.log(arr); // [ <5 empty items> ]
console.log(arr.length); // 5

この状態では初期値が入っていないため、fill()で値を入れることで扱いやすくなります。

// new-array-with-fill.js
const arr = new Array(5).fill(0);

console.log(arr); // [0, 0, 0, 0, 0]

new Array()そのものの挙動を整理したい場合は、JavaScriptのnew Array()についても参考になります。

fill()のよくある疑問

fill()は新しい配列を返しますか

戻り値として配列は返しますが、新しい配列ではありません。
元の配列を書き換えた結果を返します。

fill()で一部だけ変更できますか

できます。
startとendを指定すれば、特定の範囲だけを埋められます。

// fill-part-only.js
const arr = [1, 2, 3, 4, 5];
arr.fill(7, 1, 3);

console.log(arr); // [1, 7, 7, 4, 5]

空配列にfill()を使うとどうなりますか

長さ0の配列には何も起こりません。

// fill-empty-array.js
const arr = [];
arr.fill(1);

console.log(arr); // []

実務で意識したいfill()の使いどころ

単純な初期化には使いやすいメソッドです

同じ値で埋めるだけでよい場合、fill()は短く読みやすく書けます。
とくに、件数分の初期値をそろえたい場面では便利です。

要素ごとに別の値を作る用途には向きません

配列の各要素にインデックスを使って別の値を入れたい場合や、オブジェクトを個別に生成したい場合は、Array.from()やmap()の方が向いています。

用途に応じて、次のように使い分けると整理しやすいです。

• 同じ値で埋める：fill()
• 要素ごとに変換する：map()
• 条件で絞り込む：filter()
• 1つの値にまとめる：reduce()

まとめ

fill()は配列を同じ値で埋めるときに便利です

JavaScriptのfill()は、配列全体または一部を指定した値で埋めるメソッドです。
初期化や範囲指定の更新を簡潔に書けるのが大きな利点です。

理解しておきたいポイントは次の通りです。

• 配列を同じ値で埋められる
• startとendで範囲指定ができる
• 元の配列を書き換える
• オブジェクトを埋めると同じ参照が共有される

とくに、破壊的メソッドであることと、オブジェクトの参照共有は見落としやすいため、基礎の段階でしっかり押さえておくことが大切です。

関連記事

• JavaScriptのArray.from()について
• JavaScriptのnew Array()について
• JavaScriptのmap()について
• JavaScriptのfilter()とは？配列の絞り込みを徹底解説
• JavaScriptのreduce()とは？配列を1つにまとめる方法
• JavaScriptのfind()とは？最初の要素を取得する方法
• JavaScriptのincludes()について