Common array operations in Javascript - Step-by-Step Execution

Concept Flow - Common array operations

Start with an array

↓

Access elements by index

↓

Add elements (push/pop, unshift/shift)

↓

Modify elements

↓

Search elements (indexOf, includes)

↓

Iterate over elements (forEach, map)

↓

End of operations

This flow shows how we start with an array and perform common operations like accessing, adding, modifying, searching, and iterating elements.

Execution Sample

Javascript

const arr = [10, 20, 30];
arr.push(40);
const first = arr[0];
arr[1] = 25;
const has30 = arr.includes(30);
arr.forEach(x => console.log(x));

This code creates an array, adds an element, accesses and modifies elements, checks for a value, and prints all elements.

Execution Table

Step	Operation	Array State	Variables Changed	Output/Notes
1	Initialize arr	[10, 20, 30]	arr	Array created with 3 elements
2	arr.push(40)	[10, 20, 30, 40]	arr	40 added at the end
3	Access arr[0]	[10, 20, 30, 40]	first = 10	first stores 10
4	Modify arr[1] = 25	[10, 25, 30, 40]	arr	Second element changed from 20 to 25
5	Check arr.includes(30)	[10, 25, 30, 40]	has30 = true	30 is found in array
6	arr.forEach(x => console.log(x))	[10, 25, 30, 40]	-	Prints 10, 25, 30, 40 each on new line
7	End	[10, 25, 30, 40]	arr, first, has30	All operations done

💡 All common array operations executed step-by-step

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
arr	[10, 20, 30]	[10, 20, 30, 40]	[10, 20, 30, 40]	[10, 25, 30, 40]	[10, 25, 30, 40]	[10, 25, 30, 40]	[10, 25, 30, 40]
first	undefined	undefined	10	10	10	10	10
has30	undefined	undefined	undefined	undefined	true	true	true

Key Moments - 3 Insights

Why does arr.push(40) add the element at the end and not the beginning?

arr.push() always adds elements to the end of the array, unlike arr.unshift() which adds to the beginning. This is shown in execution_table step 2 where 40 is appended.

Why does modifying arr[1] change the second element and not the first?

Array indexes start at 0, so arr[1] refers to the second element. Step 4 in execution_table shows arr[1] changed from 20 to 25.

What does arr.includes(30) return if 30 is not in the array?

arr.includes(value) returns false if the value is not found. In step 5, it returns true because 30 is present.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of variable 'first'?

A 10

B 20

C 30

D undefined

💡 Hint

Check the 'Variables Changed' column at step 3 in execution_table

At which step does the array change from [10, 20, 30] to [10, 25, 30, 40]?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look at the 'Array State' column in execution_table for each step

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

A [10, 20, 30, 40]

B [40, 10, 20, 30]

C [10, 20, 30]

D [40]

💡 Hint

unshift adds element to the start of the array, check step 2 array state for push

Concept Snapshot

Common array operations in JavaScript:
- Access elements by index: arr[0]
- Add elements: push() adds at end, unshift() at start
- Remove elements: pop() removes last, shift() removes first
- Modify elements by index
- Search with includes() or indexOf()
- Iterate with forEach() or map()

Full Transcript

This lesson shows common array operations in JavaScript. We start with an array of numbers. We add a new number at the end using push. We access the first element by index 0 and store it in a variable. We modify the second element by assigning a new value. We check if a number exists in the array using includes. Finally, we print all elements using forEach. The execution table tracks each step, showing how the array and variables change. Key moments clarify why push adds at the end, how indexing works, and what includes returns. The quiz tests understanding of variable values and array states during execution.

Practice

1. Which method adds a new item to the end of a JavaScript array?

easy

A. shift()

B. pop()

C. push()

D. unshift()

Solution

1. Step 1: Understand array methods for adding/removing items

   push() adds items to the end, pop() removes from the end, shift() removes from the start, unshift() adds to the start.

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

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

3. Final Answer:

   push() -> Option C

4. Quick Check:

   push() adds item at end [OK]

Hint: Remember push adds at end, pop removes from end [OK]

Common Mistakes:

• Confusing push() with pop()
• Using shift() to add items
• Using unshift() to add at end

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

easy

A. arr.shift()

B. arr.unshift()

C. arr.push()

D. arr.pop()

Solution

1. Step 1: Recall array methods for removing items

   pop() removes last item, shift() removes first item, push() adds last, unshift() adds first.

2. Step 2: Choose method that removes first item

   shift() removes the first item from the array.

3. Final Answer:

   arr.shift() -> Option A

4. Quick Check:

   shift() removes first item [OK]

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

Common Mistakes:

• Using pop() to remove first item
• Using push() or unshift() to remove items
• Confusing shift() with unshift()

3. What is the output of the following code?

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana');
if (index !== -1) {
  fruits.splice(index, 1);
}
console.log(fruits);

medium

A. ['apple', 'banana', 'cherry']

B. ['banana', 'cherry']

C. ['apple']

D. ['apple', 'cherry']

Solution

1. Step 1: Find the index of 'banana' in the array

   indexOf('banana') returns 1 because 'banana' is at position 1.

2. Step 2: Remove 'banana' using splice

   splice(1, 1) removes 1 item at index 1, so 'banana' is removed.

3. Final Answer:

   ['apple', 'cherry'] -> Option D

4. Quick Check:

   Removed 'banana' from array [OK]

Hint: indexOf finds position, splice removes item at that position [OK]

Common Mistakes:

• Not checking index before splice
• Using splice with wrong index
• Expecting splice to return new array

4. The following code is intended to remove 'orange' from the array, but it doesn't work as expected. What is the error?

const colors = ['red', 'green', 'blue'];
const index = colors.indexOf('orange');
colors.splice(index, 1);
console.log(colors);

medium

A. indexOf returns -1 if item not found, causing splice to remove last item

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

C. indexOf should be replaced with includes()

D. splice() cannot remove items by index

Solution

1. Step 1: Check indexOf result for 'orange'

   Since 'orange' is not in the array, indexOf returns -1.

2. Step 2: Understand splice behavior with negative index

   splice(-1, 1) removes the last item, so 'blue' is removed unexpectedly.

3. Final Answer:

   indexOf returns -1 if item not found, causing splice to remove last item -> Option A

4. Quick Check:

   Check index before splice to avoid removing wrong item [OK]

Hint: Check indexOf result before splice to avoid errors [OK]

Common Mistakes:

• Not checking if index is -1
• Using includes() instead of indexOf for index
• Assuming splice can't remove by index

5. Given an array nums = [1, 2, 3, 4, 5], which code snippet correctly removes all even numbers from the array?

hard

A. nums = nums.filter(n => n % 2 === 0);

B. nums = nums.filter(n => n % 2 !== 0);

C. nums.splice(1, 2);

D. nums.pop(); nums.pop();

Solution

1. Step 1: Understand filtering even numbers

   To remove even numbers, keep only numbers where n % 2 !== 0 (odd numbers).

2. Step 2: Check each option

   nums.filter(n => n % 2 !== 0) keeps odd numbers, removing all evens. nums.filter(n => n % 2 === 0) keeps evens. nums.splice(1, 2) removes items at fixed indexes. nums.pop() twice removes only the last two items.

3. Final Answer:

   nums = nums.filter(n => n % 2 !== 0); -> Option B

4. Quick Check:

   filter odd numbers to remove even [OK]

Hint: Use filter with condition to keep desired items [OK]

Common Mistakes:

• Using filter condition backwards
• Using splice without index knowledge
• Using pop to remove specific items