Advanced Array Methods

Array fill()

Fill arrays with values - like a paint bucket for arrays!

Find videos you like?

Save to resource drawer for future reference!

What is Array fill()?

Think of fill() as a paint bucket tool for arrays! It replaces elements with a static value - you can fill the entire array or just a specific range. Perfect for initializing arrays with default values or resetting portions to a specific state.

Important!

fill() modifies the original array (it's mutable)! It doesn't create a new array.

🎨How fill() Works

🎨

Fill All

arr.fill(value)

Replaces every element

✂️

Fill Range

arr.fill(val, start, end)

From start to end index

↩️

Returns Array

Returns the modified array

Chainable!

Syntax & Parameters

arr.fill(value, start?, end?)

• value: The value to fill (any type)

• start: Starting index (default: 0)

• end: Ending index (default: array.length, not included)

⚠️ Watch Out!

If you fill with an object or array, all elements will reference the same object! Changing one changes all. Use Array.from() with a function if you need unique objects.

Example 1: Basic fill() Operations

Fill entire arrays or specific ranges

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Example 2: Practical Use Cases

Real-world scenarios for fill()

javascript

code

DarkEditable

// 1. Initialize grid/matrix
const grid = Array(3)
  .fill(null)
  .map(() => Array(3).fill(0));

console.log(grid);
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]
// 3x3 grid filled with zeros

// 2. Reset array portions
const scores = [95, 87, 92, 78, 88];
// Reset middle 3 scores to 0
scores.fill(0, 1, 4);
console.log(scores);
// [95, 0, 0, 0, 88]

// 3. Create boolean flags array
const flags = new Array(5).fill(false);
console.log(flags);
// [false, false, false, false, false]

// Toggle some flags
flags[1] = true;
flags[3] = true;
console.log(flags);
// [false, true, false, true, false]

// 4. Initialize with strings
const placeholders = new Array(4).fill('Loading...');
console.log(placeholders);
// ['Loading...', 'Loading...', 'Loading...', 'Loading...']

// 5. ⚠️ Object reference problem
const bad = new Array(3).fill({ count: 0 });
bad[0].count = 5;
console.log(bad);
// [{ count: 5 }, { count: 5 }, { count: 5 }]
// All reference same object! ❌

// Solution: Use Array.from() with function
const good = Array.from({ length: 3 }, () => ({ count: 0 }));
good[0].count = 5;
console.log(good);
// [{ count: 5 }, { count: 0 }, { count: 0 }]
// Each is unique object! ✅

Console Output

Click "Run Code" to see output here...

Common Patterns

0️⃣

Initialize with Zeros

const arr = new Array(10).fill(0);

🔄

Reset Portion

arr.fill(null, 2, 5); // Reset indices 2-4

🎲

Same Default Value

const defaults = new Array(5).fill('pending');

⛓️

Chain with Other Methods

arr.fill(0).map((_, i) => i * 2);

Key Takeaways

🎨

Fill Arrays

Replace elements with static value quickly

🔧

Mutable

Modifies original array, doesn't create new one

✂️

Range Control

Use start/end parameters to fill specific sections

⚠️

Object Caveat

Objects are referenced, not copied - use with care

Previous Topic

Array.of

Creating arrays with predictable behavior.

Next Topic

Array includes

Checking for array membership with NaN support.

Ask a Question

Have a question about Array fill? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Advanced Array Methods

Array fill()

Fill arrays with values - like a paint bucket for arrays!

Find videos you like?

Save to resource drawer for future reference!

What is Array fill()?

Important!

fill() modifies the original array (it's mutable)! It doesn't create a new array.

🎨How fill() Works

🎨

Fill All

arr.fill(value)

Replaces every element

✂️

Fill Range

arr.fill(val, start, end)

From start to end index

↩️

Returns Array

Returns the modified array

Chainable!

Syntax & Parameters

arr.fill(value, start?, end?)

• value: The value to fill (any type)

• start: Starting index (default: 0)

• end: Ending index (default: array.length, not included)

⚠️ Watch Out!

If you fill with an object or array, all elements will reference the same object! Changing one changes all. Use Array.from() with a function if you need unique objects.

Example 1: Basic fill() Operations

Fill entire arrays or specific ranges

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Example 2: Practical Use Cases

Real-world scenarios for fill()

javascript

code

DarkEditable

// 1. Initialize grid/matrix
const grid = Array(3)
  .fill(null)
  .map(() => Array(3).fill(0));

console.log(grid);
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]
// 3x3 grid filled with zeros

// 2. Reset array portions
const scores = [95, 87, 92, 78, 88];
// Reset middle 3 scores to 0
scores.fill(0, 1, 4);
console.log(scores);
// [95, 0, 0, 0, 88]

// 3. Create boolean flags array
const flags = new Array(5).fill(false);
console.log(flags);
// [false, false, false, false, false]

// Toggle some flags
flags[1] = true;
flags[3] = true;
console.log(flags);
// [false, true, false, true, false]

// 4. Initialize with strings
const placeholders = new Array(4).fill('Loading...');
console.log(placeholders);
// ['Loading...', 'Loading...', 'Loading...', 'Loading...']

// 5. ⚠️ Object reference problem
const bad = new Array(3).fill({ count: 0 });
bad[0].count = 5;
console.log(bad);
// [{ count: 5 }, { count: 5 }, { count: 5 }]
// All reference same object! ❌

Console Output

Click "Run Code" to see output here...

Common Patterns

0️⃣

Initialize with Zeros

const arr = new Array(10).fill(0);

🔄

Reset Portion

arr.fill(null, 2, 5); // Reset indices 2-4

🎲

Same Default Value

const defaults = new Array(5).fill('pending');

⛓️

Chain with Other Methods

arr.fill(0).map((_, i) => i * 2);

Key Takeaways

🎨

Fill Arrays

Replace elements with static value quickly

🔧

Mutable

Modifies original array, doesn't create new one

✂️

Range Control

Use start/end parameters to fill specific sections

⚠️

Object Caveat

Objects are referenced, not copied - use with care

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Array.of

Array includes

JavaScript Code Editor

Building Your Learning Module...

Array fill()

What is Array fill()?

Important!

Fill All

Fill Range

Returns Array

Syntax & Parameters

⚠️ Watch Out!

Example 1: Basic fill() Operations

Example 2: Practical Use Cases

Initialize with Zeros

Reset Portion

Same Default Value

Chain with Other Methods

Key Takeaways

Fill Arrays

Mutable

Range Control

Object Caveat

Array.of

Array includes

JavaScript Code Editor

Array fill()

What is Array fill()?

Important!

Fill All

Fill Range

Returns Array

Syntax & Parameters

⚠️ Watch Out!

Example 1: Basic fill() Operations

Example 2: Practical Use Cases

Initialize with Zeros

Reset Portion

Same Default Value

Chain with Other Methods

Key Takeaways

Fill Arrays

Mutable

Range Control

Object Caveat