JavaScript Array fill() Method

What You’ll Learn

The fill() method overwrites array elements with a single value, optionally within a start/end range. This tutorial covers syntax, five examples, the exclusive end index, initialization patterns, and how it differs from map() and copyWithin().

Introduction

Need to reset a buffer to zero, mark a slice as inactive, or bootstrap a fixed-length array with defaults? The fill() method sets one value across some or all indexes in a single call.

Unlike map(), which computes a different value per index, fill() always writes the same value you pass in. Unlike copyWithin(), it does not copy from another part of the array—it injects the value you provide.

Understanding the fill() Method

array.fill(value, start, end) writes value into every index from start up to but not including end. When start and end are omitted, the entire array is filled.

The method returns the modified array (same reference), so you can chain further array operations.

📝 Syntax

General form of Array.prototype.fill:

array.fill(value, start, end)

Parameters

• value — value to write into each selected slot.
• start — optional; first index to fill (default 0).
• end — optional; stop before this index (default array.length).

Return value

• The modified array (same reference).
• Length is unchanged.

Common patterns

• arr.fill(0) — zero out the whole array.
• arr.fill(10, 1, 4) — fill indexes 1–3 with 10.
• new Array(5).fill(false) — create a five-slot boolean array.
• [...arr].fill(x) — fill a clone, keep the original.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const numbers = [1, 2, 3, 4, 5];

numbers.fill(10, 1, 4);

console.log(numbers);
// [1, 10, 10, 10, 5]

[1, 10, 10, 10, 5]

const scores = [88, 92, 75, 60];

scores.fill(0);

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

[0, 0, 0, 0]

const grid = new Array(8).fill(0);

console.log(grid);
// [0, 0, 0, 0, 0, 0, 0, 0]
console.log(grid.length);
// 8

[0, 0, 0, 0, 0, 0, 0, 0]
8

const original = [1, 2, 3, 4, 5];
const updated = [...original].fill(10, 1, 4);

console.log(original);
// [1, 2, 3, 4, 5]
console.log(updated);
// [1, 10, 10, 10, 5]

[1, 2, 3, 4, 5]
[1, 10, 10, 10, 5]

const flags = new Array(8).fill(false);

flags.fill(true, 2, 5);

console.log(flags);
// [false, false, true, true, true, false, false, false]

[false, false, true, true, true, false, false, false]

🚀 Common Use Cases

• Buffer clearing — reset numeric buffers to zero before reuse.
• Grid initialization — create game boards or matrices with defaults.
• Feature toggles — bulk-set boolean flags in a segment.
• Placeholder data — pre-fill arrays with null or "" for forms.
• Typed arrays — same API on Uint8Array and friends.
• Performance — faster than manual loops for large static fills.

📝 Notes

• end is exclusive, matching slice and copyWithin.
• Negative start / end count from the end of the array.
• Object and array values are shared by reference across filled slots.
• Avoid new Array(n).fill({})—use Array.from with a factory for unique objects.
• fill on a sparse array creates defined slots in the filled range.
• Works on typed arrays with the same signature.

💡 Best Practices