Modifying arrays in Javascript - Deep Dive

Overview - Modifying arrays

What is it?

Modifying arrays means changing the contents of a list of items in JavaScript. This can include adding new items, removing existing ones, or changing values inside the array. Arrays are like boxes holding multiple things, and modifying them changes what is inside. This helps programs update data as they run.

Why it matters

Without the ability to modify arrays, programs would only work with fixed lists of data. This would make it hard to handle changing information like user inputs, game scores, or lists of tasks. Modifying arrays lets programs be flexible and dynamic, adapting to new information and user actions.

Where it fits

Before learning to modify arrays, you should understand what arrays are and how to access their items. After this, you can learn about array methods that create new arrays without changing the original, and then move on to more complex data structures like objects and maps.

Mental Model

Core Idea

Modifying arrays is like rearranging, adding, or removing items inside a container to keep it updated.

Think of it like...

Imagine a row of mailboxes where you can put letters in, take letters out, or swap letters between boxes. Changing the mailboxes' contents is like modifying an array.

Array: [ item0, item1, item2, item3 ]
Operations:
  Add -> push/pop (end), unshift/shift (start)
  Remove -> pop/shift/splice
  Change -> direct index assignment

Example:
[ A, B, C ]
  push(D) -> [ A, B, C, D ]
  pop() -> [ A, B ]
  arr[1] = 'X' -> [ A, X, C ]

Build-Up - 7 Steps

1

Foundation

Understanding array basics

Concept: Learn what arrays are and how to access their items by position.

An array is a list of values stored in order. You can get an item by its index number, starting at 0. For example, arr[0] gets the first item. Arrays can hold any type of data like numbers, strings, or even other arrays.

Result

You can read any item from an array using its index.

Knowing how to access array items is the base for modifying them later.

2

Foundation

Directly changing array items

Concept: You can change an item by assigning a new value to its index.

If you want to change the second item in an array, write arr[1] = newValue. This replaces the old value with the new one without changing the array size.

Result

The array now holds the new value at the chosen position.

Understanding direct assignment shows how arrays are mutable containers.

3

Intermediate

Adding items with push and unshift

🤔Before reading on: do you think push adds items to the start or end of an array? Commit to your answer.

Concept: Learn how to add items to the end or start of an array using push and unshift.

push(value) adds a new item to the end of the array. unshift(value) adds a new item to the start, moving all others right. Example: let arr = [1, 2]; arr.push(3); // arr is [1, 2, 3] arr.unshift(0); // arr is [0, 1, 2, 3]

Result

The array grows by one item at the chosen end.

Knowing these methods helps you grow arrays dynamically without manual index management.

4

Intermediate

Removing items with pop and shift

🤔Before reading on: does pop remove from the start or end of an array? Commit to your answer.

Concept: Learn how to remove items from the end or start of an array using pop and shift.

pop() removes the last item and returns it. shift() removes the first item and returns it, shifting others left. Example: let arr = [10, 20, 30]; let last = arr.pop(); // last=30, arr=[10,20] let first = arr.shift(); // first=10, arr=[20]

Result

The array shrinks by one item at the chosen end, and you get the removed item.

These methods let you shrink arrays safely and retrieve removed data.

5

Intermediate

Using splice to add and remove anywhere

🤔Before reading on: do you think splice can only remove items, or can it also add? Commit to your answer.

Concept: splice lets you remove and add items at any position inside the array.

splice(startIndex, deleteCount, ...items) removes deleteCount items from startIndex and inserts items there. Example: let arr = ['a', 'b', 'c', 'd']; arr.splice(1, 2, 'x', 'y'); // removes 'b' and 'c', inserts 'x' and 'y' // arr is ['a', 'x', 'y', 'd']

Result

The array changes size and content at the chosen position.

splice is a powerful tool for flexible array modifications anywhere inside.

6

Advanced

Modifying arrays without mutation

🤔Before reading on: do you think methods like map create new arrays or change the original? Commit to your answer.

Concept: Some methods return new arrays instead of changing the original, helping avoid bugs.

Methods like map, filter, and slice create new arrays based on the original. Example: let arr = [1, 2, 3]; let newArr = arr.map(x => x * 2); // arr is still [1, 2, 3] // newArr is [2, 4, 6]

Result

Original array stays the same; you get a new modified array.

Knowing when arrays are changed or copied helps prevent unexpected bugs in programs.

7

Expert

Performance and pitfalls of array modifications

🤔Before reading on: do you think adding/removing items at the start of large arrays is fast or slow? Commit to your answer.

Concept: Some array modifications are slower because they shift many items internally, affecting performance.

Adding/removing items at the start (unshift/shift) moves all other items, which is slower for big arrays. Adding/removing at the end (push/pop) is faster. For large data, consider using linked lists or other structures. Example: let bigArr = new Array(1000000).fill(0); bigArr.unshift(1); // slow because it shifts all items

Result

Understanding performance helps write faster, more efficient code.

Knowing internal costs of array operations prevents slowdowns in real applications.

Under the Hood

JavaScript arrays are objects with indexed properties and a length property. When you modify an array, the engine updates these indexes and length. Methods like push/pop adjust the length and add or remove properties at the end efficiently. Methods like unshift/shift must move all existing items to new indexes, which is slower. splice changes indexes and length dynamically. Some methods create new arrays by copying items instead of changing the original.

Why designed this way?

Arrays are designed to be flexible and easy to use for common tasks. The choice to make push/pop fast and unshift/shift slower reflects typical usage patterns where adding/removing at the end is more common. Creating new arrays for some methods helps avoid bugs from unexpected changes. This design balances speed, simplicity, and safety.

Array internal structure:
┌─────────────┐
│ length: 4   │
│ indexes:    │
│ 0 -> item0  │
│ 1 -> item1  │
│ 2 -> item2  │
│ 3 -> item3  │
└─────────────┘

Operations:
push() -> add item at index length, length++
pop() -> remove item at index length-1, length--
unshift() -> shift all indexes +1, add item at 0
shift() -> remove item at 0, shift all indexes -1
splice() -> remove/insert items, adjust indexes and length

Myth Busters - 4 Common Misconceptions

Quick: Does arr.push() add items to the start or end? Commit to your answer.

Common Belief: push() adds items to the start of the array.

Reality: push() adds items to the end of the array.

Why it matters: Using push() expecting to add at the start causes bugs where items appear in the wrong order.

Quick: Does splice() only remove items or can it also add? Commit to your answer.

Common Belief: splice() only removes items from an array.

Reality: splice() can both remove and add items at any position.

Why it matters: Misunderstanding splice limits your ability to modify arrays flexibly and leads to more complex code.

Quick: Does map() change the original array or create a new one? Commit to your answer.

Common Belief: map() changes the original array in place.

Reality: map() creates a new array and leaves the original unchanged.

Why it matters: Assuming map() mutates the original can cause unexpected bugs when the original data is used elsewhere.

Quick: Is unshift() as fast as push() on large arrays? Commit to your answer.

Common Belief: unshift() and push() have similar performance on large arrays.

Reality: unshift() is slower because it shifts all existing items, while push() adds at the end quickly.

Why it matters: Ignoring performance differences can cause slowdowns in programs handling big data.

Expert Zone

1

Direct index assignment can create sparse arrays if you assign to an index beyond current length, leaving empty slots.

2

Using splice to remove items returns the removed elements, which can be useful for chaining or further processing.

3

Some array methods like sort modify the array in place, which can cause side effects if not expected.

When NOT to use

Modifying arrays directly is not ideal when you want immutable data patterns, such as in functional programming or React state management. In those cases, use methods that return new arrays like map, filter, or spread syntax to avoid side effects.

Production Patterns

In real-world code, push/pop are common for stack-like structures, splice is used for editing lists, and immutable methods are preferred in frameworks like React to trigger UI updates. Performance considerations lead to avoiding unshift/shift on large arrays, sometimes replacing arrays with linked lists or other data structures.

Connections

Linked lists

Alternative data structure with efficient insertions/removals at start and middle.

Understanding array modification costs helps appreciate when linked lists are better for frequent start insertions.

Immutable data structures

Opposite approach where data is never changed but replaced with new versions.

Knowing mutable array methods clarifies why immutable patterns use copies to avoid bugs and enable easier debugging.

Inventory management

Real-world system where items are added, removed, or updated in stock lists.

Modifying arrays is like managing inventory lists, showing how programming models everyday tasks.

Common Pitfalls

#1 Removing items by setting them to undefined instead of deleting.

Wrong approach:

let arr = [1, 2, 3];
arr[1] = undefined;
// arr is [1, undefined, 3]

Correct approach:

let arr = [1, 2, 3];
arr.splice(1, 1);
// arr is [1, 3]

Root cause:

Misunderstanding that setting undefined leaves the item slot in place, not removing it.

#2 Using unshift on large arrays without considering performance.

Wrong approach:

let bigArr = new Array(1000000).fill(0);
bigArr.unshift(1);

Correct approach:

// For large data, use push or different data structure
bigArr.push(1);

Root cause:

Not knowing unshift shifts all items, causing slowdowns.

#3 Assuming map changes the original array.

Wrong approach:

let arr = [1, 2, 3];
arr.map(x => x * 2);
console.log(arr); // expects changed array

Correct approach:

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2);
console.log(arr); // original unchanged
console.log(newArr); // new array

Root cause:

Confusing map's behavior with in-place modification methods.

Key Takeaways

Arrays in JavaScript are flexible containers that can be changed by adding, removing, or updating items.

Direct index assignment changes specific items, while methods like push, pop, unshift, and shift add or remove items at the ends.

splice is a powerful method to modify arrays anywhere by removing and inserting items.

Some methods create new arrays instead of changing the original, which helps avoid bugs and supports immutable programming.

Understanding performance differences between methods helps write efficient code, especially with large arrays.