Array Access and Update at Index in DSA Javascript - Build from Scratch

Array Access and Update at Index

📖 Scenario: You are managing a list of daily temperatures recorded in a week. Sometimes, you need to check the temperature of a specific day or update it if there was a mistake in recording.

🎯 Goal: Learn how to access and update values at specific positions in an array using JavaScript.

📋 What You'll Learn

Create an array with exact temperature values for 7 days

Create a variable to hold the index of the day to update

Update the temperature at the specified index

Print the updated array

💡 Why This Matters

🌍 Real World

Managing daily data like temperatures, sales, or scores often requires accessing and updating specific entries in a list.

💼 Career

Understanding how to access and update array elements is fundamental for software development, data analysis, and many programming tasks.

1

Create the temperature array

Create an array called temperatures with these exact values: 22, 24, 19, 23, 25, 20, 21

DSA Javascript

// Create the array 'temperatures' with the given values
// Your code here

Hint

Use square brackets [] to create an array and separate values with commas.

2

Set the index to update

Create a variable called dayIndex and set it to 3 to represent the fourth day (index starts at 0)

DSA Javascript

const temperatures = [22, 24, 19, 23, 25, 20, 21];
// Create 'dayIndex' and set it to 3
// Your code here

Hint

Remember, array indexes start at 0, so the fourth day is index 3.

3

Update the temperature at the given index

Update the value in temperatures at index dayIndex to 26

DSA Javascript

const temperatures = [22, 24, 19, 23, 25, 20, 21];
const dayIndex = 3;
// Update the temperature at index dayIndex to 26
// Your code here

Hint

Use square brackets with the index to access and assign a new value.

4

Print the updated temperatures array

Print the temperatures array using console.log(temperatures)

DSA Javascript

const temperatures = [22, 24, 19, 23, 25, 20, 21];
const dayIndex = 3;
temperatures[dayIndex] = 26;
// Print the updated temperatures array
// Your code here

Hint

Use console.log to display the array in the console.

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