Array Access and Update at Index in DSA Javascript - Execution Trace

Concept Flow - Array Access and Update at Index

Start with array

↓

Access element at index i

↓

Read or update value

↓

Store updated value if any

↓

End operation

This flow shows how we start with an array, access a specific index, read or update the value there, and then finish.

Execution Sample

DSA Javascript

let arr = [10, 20, 30, 40];
let val = arr[2];
arr[1] = 25;
console.log(arr);

This code reads the value at index 2 and updates the value at index 1 in the array.

Execution Table

Step	Operation	Index Accessed	Value Read	Value Updated	Array State
1	Initialize array	-	-	-	[10, 20, 30, 40]
2	Access value at index 2	2	30	-	[10, 20, 30, 40]
3	Update value at index 1 to 25	1	-	25	[10, 25, 30, 40]
4	Print array	-	-	-	[10, 25, 30, 40]

💡 All operations completed; array updated at index 1.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
arr	[10, 20, 30, 40]	[10, 20, 30, 40]	[10, 25, 30, 40]	[10, 25, 30, 40]
val	undefined	30	30	30

Key Moments - 3 Insights

Why does accessing arr[2] give 30 and not 20 or 40?

Because arrays start counting at index 0, so index 2 points to the third element, which is 30, as shown in step 2 of the execution table.

What happens if we update arr[1] to 25? Does it change the whole array?

Only the element at index 1 changes to 25; other elements stay the same. This is shown in step 3 where the array changes from [10, 20, 30, 40] to [10, 25, 30, 40].

If we try to access an index outside the array, what happens?

Accessing an index outside the array returns undefined and does not change the array. This is not shown here but is important to remember.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'val' after step 2?

A 20

B 30

C 25

D undefined

💡 Hint

Check the 'Value Read' column at step 2 in the execution table.

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

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Array State' column in the execution table for changes.

If we tried to read arr[4], what would be the result?

A 40

B Error

C undefined

D 30

💡 Hint

Remember array indices start at 0 and the array length is 4; index 4 is outside.

Concept Snapshot

Array Access and Update:
- Access with arr[index] reads value at that position.
- Update with arr[index] = newValue changes that element.
- Indexing starts at 0.
- Accessing outside returns undefined.
- Only targeted element changes, rest stay same.

Full Transcript

This lesson shows how to access and update elements in an array by index. We start with an array of numbers. We read the value at index 2, which is the third element, 30. Then we update the value at index 1 from 20 to 25. The array changes only at that position. Accessing an index outside the array returns undefined. The execution table tracks each step and the array's state. The variable tracker shows how 'arr' and 'val' change. Key moments clarify common confusions about indexing and updates. The quiz tests understanding of these steps.

Practice

1. What does arr[2] return if arr = [10, 20, 30, 40]?

easy

A. 40

B. 20

C. 10

D. 30

Solution

1. Step 1: Understand array indexing

   Arrays start at index 0, so index 2 is the third element.

2. Step 2: Identify the element at index 2

   The element at index 2 in [10, 20, 30, 40] is 30.

3. Final Answer:

   30 -> Option D

4. Quick Check:

   Index 2 element = 30 [OK]

Hint: Remember arrays start at zero index [OK]

Common Mistakes:

• Thinking index starts at 1
• Confusing element value with index
• Using negative index without explanation

2. Which of the following is the correct way to update the 3rd element of array nums to 50?

easy

A. nums[3] = 50;

B. nums(3) = 50;

C. nums[2] = 50;

D. nums{2} = 50;

Solution

1. Step 1: Recall array indexing syntax

   In JavaScript, arrays use square brackets with zero-based index.

2. Step 2: Identify correct index for 3rd element

   The 3rd element is at index 2, so nums[2] = 50; is correct.

3. Final Answer:

   nums[2] = 50; -> Option C

4. Quick Check:

   Use square brackets and zero-based index [OK]

Hint: Use square brackets and zero-based index [OK]

Common Mistakes:

• Using parentheses instead of brackets
• Using 1-based index
• Using curly braces for arrays

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

let arr = [5, 10, 15, 20];
arr[1] = arr[3];
console.log(arr);

medium

A. [5, 20, 15, 20]

B. [5, 10, 15, 20]

C. [20, 10, 15, 20]

D. [5, 15, 15, 20]

Solution

1. Step 1: Understand the assignment operation

   The element at index 1 is set to the value at index 3, which is 20.

2. Step 2: Update the array and print

   Original array: [5, 10, 15, 20]. After update: [5, 20, 15, 20].

3. Final Answer:

   [5, 20, 15, 20] -> Option A

4. Quick Check:

   arr[1] = arr[3] updates second element to 20 [OK]

Hint: Remember assignment copies value at index [OK]

Common Mistakes:

• Confusing indexes
• Expecting arr[3] to change
• Thinking assignment swaps values

4. Find the error in the following code snippet:

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

medium

A. No error, array expands and adds 4 at index 3

B. Array becomes empty after assignment

C. Syntax error due to invalid index

D. Index 3 is out of bounds, causes runtime error

Solution

1. Step 1: Understand JavaScript array behavior on out-of-range index

   Assigning to index 3 adds a new element; arrays auto-expand.

2. Step 2: Check the resulting array

   Original: [1, 2, 3]. After assignment: [1, 2, 3, 4]. No error occurs.

3. Final Answer:

   No error, array expands and adds 4 at index 3 -> Option A

4. Quick Check:

   JS arrays auto-expand on assignment [OK]

Hint: JS arrays grow when assigned out-of-range index [OK]

Common Mistakes:

• Expecting runtime error
• Thinking syntax error occurs
• Assuming array clears on assignment

5. Given let arr = [2, 4, 6, 8, 10]; write code to double the value at index 2 and then swap it with the value at index 4. What is the final array?

hard

A. [2, 4, 10, 8, 6]

B. [2, 4, 20, 8, 12]

C. [2, 4, 20, 8, 6]

D. [2, 4, 10, 8, 12]

Solution

1. Step 1: Double the value at index 2

   Value at index 2 is 6. Doubling it: 6 * 2 = 12. Update arr[2] = 12.

2. Step 2: Swap values at index 2 and index 4

   Value at index 4 is 10. Swap arr[2] and arr[4]: arr[2] = 10, arr[4] = 12.

3. Step 3: Write final array

   Array after operations: [2, 4, 10, 8, 12].

4. Final Answer:

   [2, 4, 10, 8, 12] -> Option B

5. Quick Check:

   Double then swap results in [2,4,10,8,12] [OK]

Hint: Double first, then swap values at given indexes [OK]

Common Mistakes:

• Swapping before doubling
• Mixing up indexes
• Not updating array correctly