Array Access and Update at Index in DSA Typescript - 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 update

↓

End operation

This flow shows how we start with an array, access an element at a given index, optionally update it, and then finish.

Execution Sample

DSA Typescript

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

Access the element at index 2, update the element at index 1, then print the array.

Execution Table

Step	Operation	Index Accessed	Value Read	Value Updated	Array State
1	Initialize array	-	-	-	[10, 20, 30, 40]
2	Access element	2	30	-	[10, 20, 30, 40]
3	Update element	1	20	25	[10, 25, 30, 40]
4	Print array	-	-	-	[10, 25, 30, 40]
5	End	-	-	-	Operation complete

💡 All operations done, array updated and printed.

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 arr[2] is the third element, which is 30 (see Step 2 in execution_table).

What happens if we update arr[1] to 25?

The value at index 1 changes from 20 to 25, updating the array state (see Step 3 in execution_table).

Does accessing an element change the array?

No, just reading arr[2] does not change the array (Step 2 shows array state unchanged).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'val' after Step 2?

A 30

B 20

C 25

D undefined

💡 Hint

Check the 'Value Read' column at Step 2 in execution_table.

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

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Array State' column in execution_table for changes.

If we tried to access arr[4], what would happen?

A Return 40

B Update arr[4] to 0

C Return undefined

D Throw an error

💡 Hint

Arrays have indices 0 to 3 here; accessing outside returns undefined.

Concept Snapshot

Array Access and Update:
- Access with arr[index], index starts at 0
- Reading does not change array
- Updating arr[index] changes value at that position
- Index must be within array bounds
- After update, array reflects new value

Full Transcript

This concept shows how to access and update elements in an array by index. Arrays start counting at zero, so arr[2] accesses the third element. Reading an element does not change the array. Updating an element at a specific index changes the value stored there. The example code initializes an array, reads the element at index 2, updates the element at index 1, and prints the updated array. The execution table tracks each step, showing the array state and values read or updated. Key moments clarify common confusions about indexing and updates. The quiz tests understanding of values at each step and behavior when accessing out-of-range indices.

Practice

1. What does the expression arr[2] do in an array arr?

easy

A. Accesses the element at index 2 of the array

B. Adds a new element at index 2

C. Removes the element at index 2

D. Returns the length of the array

Solution

1. Step 1: Understand array indexing

   Arrays use zero-based indexing, so index 2 means the third element.

2. Step 2: Access element at index 2

   The expression arr[2] retrieves the element stored at the third position.

3. Final Answer:

   Accesses the element at index 2 of the array -> Option A

4. Quick Check:

   arr[2] means get element at index 2 [OK]

Hint: Remember arrays start at 0, so index 2 is third element [OK]

Common Mistakes:

• Thinking index 2 adds or removes elements
• Confusing index with length
• Assuming indexing starts at 1

2. Which of the following is the correct way to update the element at index 1 in a TypeScript array nums to 10?

easy

A. nums.add(1, 10);

B. nums.update(1, 10);

C. nums.set(1, 10);

D. nums[1] = 10;

Solution

1. Step 1: Recall array element update syntax

   In TypeScript, to update an element at a specific index, use array[index] = value;.

2. Step 2: Apply to given array

   So, nums[1] = 10; correctly updates the element at index 1 to 10.

3. Final Answer:

   nums[1] = 10; -> Option D

4. Quick Check:

   Use bracket notation with assignment for update [OK]

Hint: Use bracket and equals sign to update array element [OK]

Common Mistakes:

• Using non-existent methods like update(), set(), add()
• Confusing update syntax with other languages
• Trying to use push() to update element

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

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

medium

A. [5, 10, 15]

B. [20, 10, 15]

C. [5, 20, 15]

D. [5, 15, 20]

Solution

1. Step 1: Analyze initial array and update

   The array starts as [5, 10, 15]. The statement arr[1] = 20; changes the element at index 1 from 10 to 20.

2. Step 2: Determine final array state

   After update, the array becomes [5, 20, 15]. The console.log prints this updated array.

3. Final Answer:

   [5, 20, 15] -> Option C

4. Quick Check:

   Update index 1 to 20 changes array to [5, 20, 15] [OK]

Hint: Remember index 1 is second element, update it directly [OK]

Common Mistakes:

• Not updating the element, so output stays same
• Mixing up indexes and values
• Assuming update changes order

4. Identify the error in the following TypeScript code that tries to update an array element:

let fruits = ['apple', 'banana', 'cherry'];
fruits(1) = 'orange';

medium

A. Using parentheses instead of square brackets for indexing

B. Array is declared with let instead of const

C. Missing semicolon at the end of the line

D. Trying to assign a string to an array element

Solution

1. Step 1: Check array element update syntax

   Array elements must be accessed or updated using square brackets [], not parentheses ().

2. Step 2: Identify the error in code

   The code uses fruits(1) = 'orange'; which is invalid syntax. It should be fruits[1] = 'orange';.

3. Final Answer:

   Using parentheses instead of square brackets for indexing -> Option A

4. Quick Check:

   Use square brackets [] to access/update array elements [OK]

Hint: Use [] not () to access or update array elements [OK]

Common Mistakes:

• Using parentheses instead of brackets
• Thinking let vs const causes error here
• Ignoring syntax errors due to missing semicolon

5. Given the array let scores = [10, 20, 30, 40, 50];, which code snippet correctly doubles the value at index 3 and then prints the updated array?

hard

A. scores[3] = scores[3] * 2;
console.log(scores);

B. scores[3] *= 2;
console.log(scores);

C. scores.update(3, scores[3] * 2);
console.log(scores);

D. scores[3] = scores[3] + scores[3];
console.log(scores);

Solution

1. Step 1: Understand how to double element at index 3

   Index 3 corresponds to the fourth element (value 40). Doubling means multiplying by 2.

2. Step 2: Check each option for correct syntax and effect

   scores[3] = scores[3] * 2; console.log(scores); uses explicit multiplication and assignment, which works. scores[3] *= 2; console.log(scores); uses shorthand *= operator, also correct. scores.update(3, scores[3] * 2); console.log(scores); uses a non-existent method update(). scores[3] = scores[3] + scores[3]; console.log(scores); adds the element to itself, which also doubles it.

3. Step 3: Identify the best concise and correct option

   scores[3] *= 2; console.log(scores); is the most concise and idiomatic way to double the value at index 3.

4. Final Answer:

   scores[3] *= 2; console.log(scores); -> Option B

5. Quick Check:

   Use *= operator to double value at index 3 [OK]

Hint: Use *= operator to multiply and update in one step [OK]

Common Mistakes:

• Using non-existent update() method
• Forgetting to print the array after update
• Using addition instead of multiplication