Accessing array elements in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the first element of the array.

Javascript

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

Drag options to blanks, or click blank then click option'

A0

B1

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 instead of 0 to access the first element.

Using an index that is out of range.

Arrays in JavaScript start at index 0, so the first element is at index 0.

2fill in blank

medium

Complete the code to access the last element of the array.

Javascript

const colors = ['red', 'green', 'blue', 'yellow'];
console.log(colors[colors.length [1] 1]);

Drag options to blanks, or click blank then click option'

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 1 instead of subtracting 1 from length.

Using length directly as index.

To get the last element, subtract 1 from the array's length because indexes start at 0.

3fill in blank

hard

Fix the error in the code to correctly access the second element.

Javascript

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

Drag options to blanks, or click blank then click option'

A1

B2

C0

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using index 2 to access the second element.

Using index 0 which is the first element.

The second element is at index 1 because counting starts at zero.

4fill in blank

hard

Fill both blanks to create an array of squares for numbers greater than 2.

Javascript

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.filter(n => n [1] 2).map(n => n [2] n);
console.log(squares);

Drag options to blanks, or click blank then click option'

A>

B<

C**

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' in filter.

Using '**' which is exponentiation but less common in JS for this task.

Filter numbers greater than 2, then multiply each number by itself to get squares.

5fill in blank

hard

Fill all three blanks to create an object mapping each fruit to its length if length is greater than 5.

Javascript

const fruits = ['apple', 'banana', 'cherry', 'date'];
const result = {};
for (let [1] of fruits) {
  if ([1].length > 5) {
    result[[1]] = [2];
  }
}
console.log(result);

Drag options to blanks, or click blank then click option'

Afruit

Bfruit.length

Cfor

Dof

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'for ... in' instead of 'for ... of'.

Using fruit instead of fruit.length for the value.

This uses a for...of loop to iterate over the array and build an object mapping fruit names to their lengths if the length is greater than 5. BLANK_1 is the loop variable name, BLANK_2 is the value (length), and BLANK_3 is the loop keyword for.

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