Modifying arrays in Javascript - Step-by-Step Execution

Concept Flow - Modifying arrays

Start with array

↓

Choose modification method

↓

Add element (push, unshift)

↓

Remove element (pop, shift, splice)

↓

Change element (direct index assignment)

↓

Array updated

↓

Use updated array

We start with an array, pick a way to change it (add, remove, or update elements), then the array changes and we use the new version.

Execution Sample

Javascript

let arr = [1, 2, 3];
arr.push(4);
arr[1] = 20;
arr.splice(0, 1);
console.log(arr);

This code adds 4 to the end, changes the second element to 20, removes the first element, then prints the array.

Execution Table

Step	Operation	Array Before	Action Detail	Array After	Output
1	Initialize	[]	Create array [1, 2, 3]	[1, 2, 3]
2	push(4)	[1, 2, 3]	Add 4 at end	[1, 2, 3, 4]
3	arr[1] = 20	[1, 2, 3, 4]	Change element at index 1	[1, 20, 3, 4]
4	splice(0, 1)	[1, 20, 3, 4]	Remove 1 element at index 0	[20, 3, 4]
5	console.log(arr)	[20, 3, 4]	Print array	[20, 3, 4]	[20, 3, 4]

💡 All modifications done, final array printed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
arr	undefined	[1, 2, 3]	[1, 2, 3, 4]	[1, 20, 3, 4]	[20, 3, 4]	[20, 3, 4]

Key Moments - 3 Insights

Why does arr[1] = 20 change the second element and not add a new one?

Because arrays use zero-based indexes, arr[1] points to the second element. Assigning a value there replaces it instead of adding.

What does splice(0, 1) do exactly?

It removes 1 element starting at index 0, which means it deletes the first element and shifts the rest left, as shown in step 4 of the execution table.

Why does push add at the end but unshift adds at the start?

push appends elements to the array's end, increasing length, while unshift inserts at the start, moving existing elements right.

Visual Quiz - 3 Questions

Look at the execution table, what is the array after step 3?

A [1, 20, 3, 4]

B [1, 2, 3, 4]

C [20, 3, 4]

D [1, 2, 3]

💡 Hint

Check the 'Array After' column for step 3 in the execution table.

At which step is the first element removed from the array?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the splice operation in the execution table.

If we replaced arr.push(4) with arr.unshift(4), what would be the array after step 2?

A [1, 2, 3, 4]

B [4, 1, 2, 3]

C [1, 20, 3, 4]

D [20, 3, 4]

💡 Hint

unshift adds element at the start, so check how the array changes after step 2.

Concept Snapshot

Modifying arrays in JavaScript:
- Use push() to add at end
- Use unshift() to add at start
- Use pop() or shift() to remove from end/start
- Use splice() to remove or add anywhere
- Assign to arr[index] to change elements
- Arrays update in place

Full Transcript

This lesson shows how to change arrays in JavaScript step-by-step. We start with an array [1, 2, 3]. Then we add 4 at the end using push, making it [1, 2, 3, 4]. Next, we change the second element (index 1) to 20, so the array becomes [1, 20, 3, 4]. After that, we remove the first element using splice(0, 1), resulting in [20, 3, 4]. Finally, we print the array. Each step updates the array, and the execution table tracks these changes clearly. Key points include understanding zero-based indexing and how different methods add or remove elements.