Accessing array elements in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Accessing nested array elements

What is the output of the following code?

Javascript

const arr = [1, [2, 3], 4];
console.log(arr[1][0]);

A [2, 3]

B 3

C undefined

D 2

💡 Hint

Remember that arr[1] is an array itself, so you need to access its elements by index.

arr[1] is the array [2, 3]. Accessing arr[1][0] gets the first element of that inner array, which is 2.

❓ Predict Output

intermediate

Accessing array elements with negative index

What will be the output of this code?

Javascript

const arr = [10, 20, 30];
console.log(arr[-1]);

A 30

B -1

C undefined

D SyntaxError

💡 Hint

JavaScript arrays do not support negative indices like some other languages.

In JavaScript, negative indices do not access elements from the end. arr[-1] is undefined because no property '-1' exists.

❓ Predict Output

advanced

Accessing array elements after modification

What is the output of this code?

Javascript

const arr = [5, 10, 15];
arr[5] = 25;
console.log(arr.length);
console.log(arr[3]);

A

6
undefined

B

3
undefined

C

6
0

D

5
undefined

💡 Hint

Setting an element at index 5 changes the length of the array.

Assigning arr[5] = 25 sets the sixth element (index 5), so length becomes 6. arr[3] was never set, so it is undefined.

❓ Predict Output

advanced

Accessing array elements with destructuring

What will be logged by this code?

Javascript

const arr = [100, 200, 300];
const [a, , c] = arr;
console.log(a, c);

A 100 300

B 100 200

C 200 300

D undefined undefined

💡 Hint

Destructuring skips the second element with the empty comma.

The destructuring assigns a = arr[0] = 100, skips arr[1], and assigns c = arr[2] = 300.

❓ Predict Output

expert

Accessing array elements with dynamic keys

What is the output of this code?

Javascript

const arr = [1, 2, 3];
const key = '1';
console.log(arr[key]);

A undefined

B 2

C 1

D TypeError

💡 Hint

Array indices are converted to strings internally.

JavaScript arrays use string keys for indices. arr['1'] accesses the element at index 1, which is 2.

Practice

1. What is the index of the first element in a JavaScript array?

easy

A. -1

B. 1

C. 0

D. Depends on the array length

Solution

1. Step 1: Understand array indexing

   JavaScript arrays start counting elements from 0, not 1.

2. Step 2: Identify the first element's index

   The first element is always at index 0.

3. Final Answer:

   0 -> Option C

4. Quick Check:

   First element index = 0 [OK]

Hint: Remember arrays start at zero, not one [OK]

Common Mistakes:

• Thinking first element index is 1
• Confusing negative indexes
• Assuming index depends on array length

2. Which of the following is the correct syntax to access the third element of an array named colors?

easy

A. colors{2}

B. colors[2]

C. colors[3]

D. colors(3)

Solution

1. Step 1: Recall array access syntax

   JavaScript arrays use square brackets with zero-based index to access elements.

2. Step 2: Calculate index for third element

   The third element is at index 2 (0,1,2).

3. Final Answer:

   colors[2] -> Option B

4. Quick Check:

   Third element index = 2 [OK]

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

Common Mistakes:

• Using parentheses instead of brackets
• Using curly braces
• Using index 3 for third element

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

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[1]);

medium

A. undefined

B. apple

C. cherry

D. banana

Solution

1. Step 1: Identify the array elements and indexes

   The array fruits has 'apple' at index 0, 'banana' at index 1, and 'cherry' at index 2.

2. Step 2: Access element at index 1

   fruits[1] returns 'banana'.

3. Final Answer:

   banana -> Option D

4. Quick Check:

   fruits[1] = banana [OK]

Hint: Remember index 1 is second element [OK]

Common Mistakes:

• Choosing first element instead
• Confusing index 1 with 2
• Expecting undefined for valid index

4. Find the error in this code snippet:

const numbers = [10, 20, 30];
console.log(numbers(1));

medium

A. Using parentheses instead of square brackets

B. Array is not declared properly

C. Index 1 is out of range

D. Missing semicolon

Solution

1. Step 1: Check array access syntax

   Arrays must be accessed with square brackets, not parentheses.

2. Step 2: Identify the error in the code

   numbers(1) is invalid syntax; correct is numbers[1].

3. Final Answer:

   Using parentheses instead of square brackets -> Option A

4. Quick Check:

   Array access needs [] not () [OK]

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

Common Mistakes:

• Using () instead of []
• Thinking index 1 is invalid
• Ignoring syntax errors

5. Given the array const data = [5, 10, 15];, what will console.log(data[3]); output?

hard

A. undefined

B. 15

C. Error

D. 0

Solution

1. Step 1: Understand array length and valid indexes

   The array has elements at indexes 0, 1, and 2 only.

2. Step 2: Access index 3 which does not exist

   Accessing an index outside the array returns undefined in JavaScript.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Out-of-range index returns undefined [OK]

Hint: Out-of-range indexes return undefined [OK]

Common Mistakes:

• Expecting error instead of undefined
• Confusing last element with index 3
• Assuming 0 is default value