First and Last Occurrence of Element in DSA Javascript - Execution Trace

Concept Flow - First and Last Occurrence of Element

Start

↓

Initialize first = -1, last = -1

↓

Traverse array from i=0 to end

↓

Check if array[i

Yes↓

If first == -1, set first = i

↓

Set last = i

↓

i = i+1

↓

Repeat until i == array.length

↓

Return first and last

↓

End

We scan the array once, updating first and last positions when we find the target element.

Execution Sample

DSA Javascript

function findFirstLast(arr, target) {
  let first = -1, last = -1;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
      if (first === -1) first = i;
      last = i;
    }
  }
  return [first, last];
}

This code finds the first and last index of the target element in the array.

Execution Table

Step	Operation	Index i	arr[i]	Condition arr[i] == target	first	last	Visual State
1	Initialize first and last	-	-	-	-1	-1	first=-1, last=-1
2	Check arr[0]	0	5	No	-1	-1	No change
3	Check arr[1]	1	3	No	-1	-1	No change
4	Check arr[2]	2	7	Yes	2	2	first=2, last=2
5	Check arr[3]	3	7	Yes	2	3	last updated to 3
6	Check arr[4]	4	2	No	2	3	No change
7	Check arr[5]	5	7	Yes	2	5	last updated to 5
8	End of array	-	-	-	2	5	Return [2,5]

💡 Reached end of array, all elements checked.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	Final
first	-1	-1	-1	2	2	2	2	2
last	-1	-1	-1	2	3	3	5	5
i	-	0	1	2	3	4	5	-

Key Moments - 3 Insights

Why do we check if first == -1 before setting it?

Because first should store the earliest index where target appears. We only set it once at the first occurrence (see Step 4 in execution_table).

Why do we update last every time we find the target?

Because last should always point to the most recent occurrence of the target (see Steps 4, 5, 7). This way, after the loop, last is the last occurrence.

What if the target is not in the array at all?

first and last remain -1, indicating target not found (see initial values in Step 1 and no updates in execution_table).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'first' after Step 5?

A 3

B -1

C 2

D 5

💡 Hint

Check the 'first' column in execution_table row for Step 5.

At which step does the condition arr[i] == target become true for the first time?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Condition arr[i] == target' column in execution_table.

If the target was 10 instead of 7, what would be the final values of first and last?

A [2, 5]

B [-1, -1]

C [0, 0]

D [5, 5]

💡 Hint

Refer to variable_tracker and key_moments about target not found.

Concept Snapshot

Find first and last occurrence of an element in an array:
- Initialize first and last as -1
- Loop through array indices
- If element matches target:
  - If first == -1, set first = current index
  - Always update last = current index
- After loop, return [first, last]
- If target not found, both remain -1

Full Transcript

This concept finds the first and last positions of a target element in an array by scanning it once. We start with first and last set to -1, meaning not found. As we check each element, if it matches the target, we set first if it's the first time, and update last every time. After checking all elements, we return the positions. If the target is not found, both remain -1. This is efficient and simple to implement.

Practice

1. What does the "First and Last Occurrence of Element" problem ask you to find in an array?

easy

A. The number of unique elements in the array

B. The sum of all elements in the array

C. The maximum and minimum values in the array

D. The first and last positions where a given element appears

Solution

1. Step 1: Understand the problem statement

   The problem asks to find the first and last positions of a specific element in an array.

2. Step 2: Identify what is being searched

   We look for the first index and last index where the element appears.

3. Final Answer:

   The first and last positions where a given element appears -> Option D

4. Quick Check:

   First and last occurrence = positions of element [OK]

Hint: Look for start and end indexes of the element [OK]

Common Mistakes:

• Confusing with sum or count of elements
• Looking for max/min values instead
• Ignoring the order of occurrences

2. Which of the following JavaScript code snippets correctly finds the first occurrence index of element 5 in array [1, 5, 3, 5, 7]?

easy

A. array.indexOf(5)

B. array.findIndex(5)

C. array.lastIndexOf(5)

D. array.find(5)

Solution

1. Step 1: Recall JavaScript methods for finding index

   indexOf returns the first index of the element, lastIndexOf returns the last index.

2. Step 2: Check method usage

   array.indexOf(5) correctly returns the first occurrence index of 5.

3. Final Answer:

   array.indexOf(5) -> Option A

4. Quick Check:

   indexOf finds first occurrence [OK]

Hint: Use indexOf for first occurrence, lastIndexOf for last [OK]

Common Mistakes:

• Using findIndex incorrectly with a value instead of a function
• Using find which returns element, not index
• Confusing lastIndexOf with first occurrence

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

const arr = [2, 4, 6, 4, 8];
const first = arr.indexOf(4);
const last = arr.lastIndexOf(4);
console.log([first, last]);

medium

A. [2, 4]

B. [3, 1]

C. [1, 3]

D. [0, 4]

Solution

1. Step 1: Find first occurrence of 4 in array

   4 appears first at index 1.

2. Step 2: Find last occurrence of 4 in array

   4 appears last at index 3.

3. Final Answer:

   [1, 3] -> Option C

4. Quick Check:

   First = 1, Last = 3 [OK]

Hint: indexOf gives first, lastIndexOf gives last [OK]

Common Mistakes:

• Mixing up first and last indexes
• Using wrong array indexes
• Confusing element values with indexes

4. Identify the error in the following code that tries to find the first and last occurrence of 7 in array [7, 2, 7, 5]:

const arr = [7, 2, 7, 5];
const first = arr.findIndex(7);
const last = arr.findLastIndex(7);
console.log([first, last]);

medium

A. findLastIndex is not a valid JavaScript method

B. findIndex and findLastIndex require a function, not a value

C. The array does not contain 7, so indexes are -1

D. The code is correct and will output [0, 2]

Solution

1. Step 1: Check usage of findIndex and findLastIndex

   Both methods require a function as argument, not a direct value.

2. Step 2: Identify the error in argument

   Passing 7 directly causes incorrect usage; should pass a function like x => x === 7.

3. Final Answer:

   findIndex and findLastIndex require a function, not a value -> Option B

4. Quick Check:

   Methods need function argument [OK]

Hint: Pass a function to findIndex, not a direct value [OK]

Common Mistakes:

• Passing value instead of function to findIndex
• Assuming findLastIndex exists in all JS versions
• Confusing findIndex with indexOf

5. Given an array arr = [3, 5, 3, 7, 5, 3], write a function in JavaScript that returns an object with the first and last occurrence indexes of element 3. What will be the output of findOccurrences(arr, 3)?

function findOccurrences(array, element) {
  return {
    first: array.indexOf(element),
    last: array.lastIndexOf(element)
  };
}

const arr = [3, 5, 3, 7, 5, 3];
console.log(findOccurrences(arr, 3));

hard

A. {"first": 0, "last": 5}

B. {"first": 2, "last": 5}

C. {"first": 1, "last": 4}

D. {"first": 0, "last": 2}

Solution

1. Step 1: Find first occurrence of 3 in array

   3 first appears at index 0.

2. Step 2: Find last occurrence of 3 in array

   3 last appears at index 5.

3. Final Answer:

   {"first": 0, "last": 5} -> Option A

4. Quick Check:

   First = 0, Last = 5 [OK]

Hint: Use indexOf and lastIndexOf to get first and last indexes [OK]

Common Mistakes:

• Mixing up first and last indexes
• Returning values instead of indexes
• Incorrectly reading array indexes