Array Access and Update at Index in DSA Javascript

Mental Model

An array is like a row of boxes where each box has a number. You can quickly find or change the item in any box by using its number.

Analogy: Imagine a row of mailboxes numbered 0, 1, 2, and so on. To get or put mail in a mailbox, you just use its number without opening all the others.

Index:  0    1    2    3    4
Array: [10] -> [20] -> [30] -> [40] -> [50]

Dry Run Walkthrough

Input: array: [10, 20, 30, 40, 50], update index 2 with value 35, then access index 2

Goal: Change the value at index 2 to 35 and then get the updated value at index 2

Step 1: Access index 2 to update its value to 35

Index:  0    1    2    3    4
Array: [10] -> [20] -> [35] -> [40] -> [50]

Why: We need to change the value at index 2 from 30 to 35

Step 2: Access index 2 to read the updated value

Index:  0    1    2    3    4
Array: [10] -> [20] -> [35] -> [40] -> [50]
Accessed value: 35

Why: We want to confirm the value at index 2 is now 35

Result:

Index:  0    1    2    3    4
Array: [10] -> [20] -> [35] -> [40] -> [50]
Accessed value: 35

Annotated Code

DSA Javascript

class ArrayExample {
  constructor(arr) {
    this.arr = arr;
  }

  updateAtIndex(index, value) {
    if (index < 0 || index >= this.arr.length) {
      throw new Error('Index out of bounds');
    }
    this.arr[index] = value; // update value at given index
  }

  accessAtIndex(index) {
    if (index < 0 || index >= this.arr.length) {
      throw new Error('Index out of bounds');
    }
    return this.arr[index]; // return value at given index
  }
}

// Driver code
const example = new ArrayExample([10, 20, 30, 40, 50]);
example.updateAtIndex(2, 35); // update index 2 to 35
const value = example.accessAtIndex(2); // access index 2
console.log('Updated array:', example.arr.join(' -> '));
console.log('Accessed value at index 2:', value);

this.arr[index] = value; // update value at given index

update the element at the specified index to the new value

return this.arr[index]; // return value at given index

retrieve the element at the specified index

Output

Updated array: 10 -> 20 -> 35 -> 40 -> 50

Accessed value at index 2: 35

Complexity Analysis

Time: O(1) because accessing or updating an element by index in an array is direct and does not depend on array size

Space: O(1) because no extra space is needed for access or update operations

vs Alternative: Compared to linked lists where access by index is O(n), arrays provide faster direct access and update at any index

Edge Cases

index is negative

throws an error 'Index out of bounds' to prevent invalid access

DSA Javascript

if (index < 0 || index >= this.arr.length) { throw new Error('Index out of bounds'); }

index is equal or greater than array length

throws an error 'Index out of bounds' to prevent invalid access

DSA Javascript

if (index < 0 || index >= this.arr.length) { throw new Error('Index out of bounds'); }

When to Use This Pattern

When a problem asks to quickly get or change a value at a specific position, think of array access and update by index because it is the fastest way to do so.

Common Mistakes

Mistake: Trying to access or update an index outside the array bounds without checking
Fix: Always check if the index is within 0 and array length - 1 before accessing or updating

Summary

It lets you quickly get or change the value at a specific position in an array.

Use it when you need fast direct access or update to elements by their position.

Remember arrays let you jump straight to any position using the index number.

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