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.

Practice

1. Which method adds one or more elements to the end of a JavaScript array?

easy

A. push()

B. pop()

C. shift()

D. unshift()

Solution

1. Step 1: Understand array methods for adding elements

   push() adds elements to the end, unshift() adds to the start.

2. Step 2: Identify the method that adds to the end

   push() is the method that adds elements at the end of the array.

3. Final Answer:

   push() -> Option A

4. Quick Check:

   Adding at end = push() [OK]

Hint: push() adds at end, unshift() adds at start [OK]

Common Mistakes:

• Confusing push() with pop()
• Using shift() to add elements
• Thinking unshift() adds at end

2. Which of the following is the correct syntax to remove the first element from an array arr?

easy

A. arr.pop()

B. arr.shift()

C. arr.unshift()

D. arr.push()

Solution

1. Step 1: Recall methods that remove elements

   pop() removes from end, shift() removes from start.

2. Step 2: Identify method to remove first element

   shift() removes the first element of the array.

3. Final Answer:

   arr.shift() -> Option B

4. Quick Check:

   Remove first element = shift() [OK]

Hint: shift() removes first, pop() removes last [OK]

Common Mistakes:

• Using pop() to remove first element
• Using unshift() which adds elements
• Confusing push() with removal methods

3. What will be the output of the following code?

let arr = [1, 2, 3, 4];
arr.splice(1, 2, 8, 9);
console.log(arr);

medium

A. [1, 8, 9, 4]

B. [1, 2, 3, 4]

C. [8, 9, 4]

D. [1, 8, 9]

Solution

1. Step 1: Understand splice parameters

   splice(1, 2, 8, 9) means start at index 1, remove 2 elements, then insert 8 and 9.

2. Step 2: Apply splice on array

   Original array: [1, 2, 3, 4]. Remove elements at index 1 and 2 (2 and 3), then insert 8 and 9 at index 1. Result: [1, 8, 9, 4].

3. Final Answer:

   [1, 8, 9, 4] -> Option A

4. Quick Check:

   splice removes and inserts = [1, 8, 9, 4] [OK]

Hint: splice(start, deleteCount, items...) edits array in place [OK]

Common Mistakes:

• Confusing splice with slice
• Not removing correct elements
• Forgetting splice inserts new items

4. The following code tries to remove the element '3' from the array but does not work as expected. What is the error?

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

medium

A. The index 3 is out of range for removal

B. The splice method is used incorrectly; it should be pop()

C. The index 3 removes the wrong element, should be 2

D. splice cannot remove elements from arrays

Solution

1. Step 1: Identify the element to remove and its index

   The element '3' is at index 2 in the array [1, 2, 3, 4].

2. Step 2: Check the splice call

   The code calls arr.splice(3, 1), which removes the element at index 3 (which is 4), not 3.

3. Final Answer:

   The index 3 removes the wrong element, should be 2 -> Option C

4. Quick Check:

   Remove '3' at index 2, not 3 [OK]

Hint: Check array indexes carefully before splice [OK]

Common Mistakes:

• Using wrong index for splice
• Confusing pop() with splice()
• Thinking splice can't remove elements

5. You have an array arr = [5, 10, 15, 20]. You want to replace the middle two elements with 12 and 18 using a single method call. Which code correctly does this?

hard

A. arr.splice(2, 2, 12, 18);

B. arr.splice(0, 2, 12, 18);

C. arr.splice(1, 1, 12, 18);

D. arr.splice(1, 2, 12, 18);

Solution

1. Step 1: Identify indexes of middle two elements

   Array is [5, 10, 15, 20]. Middle two elements are at indexes 1 and 2 (10 and 15).

2. Step 2: Use splice to replace these elements

   Call arr.splice(1, 2, 12, 18) to start at index 1, remove 2 elements, and insert 12 and 18.

3. Final Answer:

   arr.splice(1, 2, 12, 18); -> Option D

4. Quick Check:

   Replace middle two with splice(1,2,12,18) [OK]

Hint: splice(startIndex, countToRemove, ...newItems) replaces items [OK]

Common Mistakes:

• Wrong start index
• Removing too few or too many elements
• Using splice with wrong parameters