Array Modification Methods

Array Modification Methods: The Toy Box Story

Imagine you have a toy box where you keep all your favorite toys. Sometimes you want to add new toys, remove old ones, rearrange them, or even create a copy of your toy box without messing up the original. JavaScript arrays work exactly like this toy box!

The Big Picture

Arrays are lists of things. Modification methods let you change what’s in that list. Some methods change the original array (mutating), while newer methods create a fresh copy (non-mutating).

graph TD
    A["Array Modification Methods"] --> B["Mutating Methods"]
    A --> C["Non-Mutating Methods"]
    B --> D["push/pop"]
    B --> E["shift/unshift"]
    B --> F["splice"]
    B --> G["sort/reverse"]
    B --> H["fill/copyWithin"]
    C --> I["toSorted/toReversed"]
    C --> J["toSpliced"]
    C --> K["with"]

1. Push and Pop: The Stack of Plates

Think of a stack of plates at a buffet. You push a new plate on top, and you pop the top plate off when someone takes it.

push() – Add to the End

Adds one or more items to the end of the array. Returns the new length.

let toys = ['car', 'doll'];
toys.push('robot');
// toys is now ['car', 'doll', 'robot']

toys.push('ball', 'kite');
// toys is now ['car', 'doll',
//   'robot', 'ball', 'kite']

pop() – Remove from the End

Removes the last item and returns it.

let toys = ['car', 'doll', 'robot'];
let lastToy = toys.pop();
// lastToy is 'robot'
// toys is now ['car', 'doll']

Remember: Push in, pop out – always from the back door!

2. Shift and Unshift: The Waiting Line

Imagine a line of kids waiting for ice cream. The first kid in line gets served first (shift), and a new kid can join at the front if they cut in line (unshift).

shift() – Remove from the Front

Removes the first item and returns it.

let line = ['Alice', 'Bob', 'Charlie'];
let served = line.shift();
// served is 'Alice'
// line is now ['Bob', 'Charlie']

unshift() – Add to the Front

Adds one or more items to the beginning. Returns new length.

let line = ['Bob', 'Charlie'];
line.unshift('Alice');
// line is now ['Alice', 'Bob', 'Charlie']

line.unshift('Zara', 'Max');
// line is now
// ['Zara', 'Max', 'Alice', 'Bob', 'Charlie']

Memory trick: Shift moves everyone forward (first leaves), Unshift squeezes someone at the front.

3. Splice: The Swiss Army Knife

Splice is the most powerful method. It can add, remove, or replace items anywhere in the array!

Syntax

array.splice(start, deleteCount, ...items)

• start: Where to begin
• deleteCount: How many to remove
• items: What to add (optional)

Remove Items

let fruits = ['apple', 'banana',
  'cherry', 'date'];
let removed = fruits.splice(1, 2);
// removed is ['banana', 'cherry']
// fruits is now ['apple', 'date']

Add Items (without removing)

let colors = ['red', 'blue'];
colors.splice(1, 0, 'green', 'yellow');
// colors is now
// ['red', 'green', 'yellow', 'blue']

Replace Items

let pets = ['cat', 'dog', 'fish'];
pets.splice(1, 1, 'hamster');
// pets is now ['cat', 'hamster', 'fish']

Think of it as: A surgeon for your array – precise cuts and insertions!

4. Sort and Reverse: Organizing the Bookshelf

sort() – Arrange in Order

By default, sort converts items to strings and sorts alphabetically.

let letters = ['c', 'a', 'b'];
letters.sort();
// letters is now ['a', 'b', 'c']

Watch out with numbers!

let nums = [10, 2, 30, 1];
nums.sort();
// nums is ['1', '10', '2', '30'] - WRONG!

// Fix: Use a compare function
nums.sort((a, b) => a - b);
// nums is now [1, 2, 10, 30] - Correct!

reverse() – Flip Everything

Reverses the array in place.

let countdown = [1, 2, 3, 4, 5];
countdown.reverse();
// countdown is now [5, 4, 3, 2, 1]

5. Fill and CopyWithin: The Painters

fill() – Paint Everything One Color

Fills all (or some) elements with a single value.

let boxes = [1, 2, 3, 4, 5];
boxes.fill(0);
// boxes is now [0, 0, 0, 0, 0]

let rooms = [1, 2, 3, 4, 5];
rooms.fill('X', 1, 4);
// rooms is now [1, 'X', 'X', 'X', 5]
// Filled from index 1 to 3 (not 4)

copyWithin() – Clone a Section

Copies part of the array to another location within the same array.

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);
// Copies from index 3 to the end,
// pastes at index 0
// arr is now [4, 5, 3, 4, 5]

let letters = ['a', 'b', 'c', 'd', 'e'];
letters.copyWithin(1, 3, 4);
// Copy index 3-4 ('d'), paste at index 1
// letters is now ['a', 'd', 'c', 'd', 'e']

6. The New Non-Mutating Heroes (ES2023)

These methods do the same job but don’t change the original array. They return a new copy!

toSorted() – Sort Without Changing

let nums = [3, 1, 2];
let sorted = nums.toSorted((a, b) => a - b);
// sorted is [1, 2, 3]
// nums is STILL [3, 1, 2] - untouched!

toReversed() – Reverse Without Changing

let arr = [1, 2, 3];
let reversed = arr.toReversed();
// reversed is [3, 2, 1]
// arr is STILL [1, 2, 3]

7. toSpliced: Safe Surgery

Like splice, but returns a new array instead of modifying the original.

let colors = ['red', 'green', 'blue'];
let newColors = colors.toSpliced(1, 1, 'yellow');
// newColors is ['red', 'yellow', 'blue']
// colors is STILL ['red', 'green', 'blue']

Adding without removing

let items = ['a', 'b', 'c'];
let result = items.toSpliced(1, 0, 'x', 'y');
// result is ['a', 'x', 'y', 'b', 'c']
// items is STILL ['a', 'b', 'c']

8. With: Change One Item Safely

The with() method creates a new array with one element replaced.

let fruits = ['apple', 'banana', 'cherry'];
let newFruits = fruits.with(1, 'blueberry');
// newFruits is ['apple', 'blueberry', 'cherry']
// fruits is STILL ['apple', 'banana', 'cherry']

Using negative index

let nums = [10, 20, 30];
let result = nums.with(-1, 99);
// result is [10, 20, 99]
// -1 means the last item

Quick Comparison Table

The Golden Rule

Old methods (push, pop, splice, sort, etc.) mutate the original array.

New methods (toSorted, toReversed, toSpliced, with) return a new array, keeping the original safe.

When you want to keep your data safe (like in React state), use the new non-mutating methods!

You Did It!

You now know how to:

• Add and remove items from both ends
• Perform precise array surgery with splice
• Organize with sort and reverse
• Paint with fill and copyWithin
• Use the safe, modern methods that don’t touch the original

Your toy box skills are now legendary!