Accessing array elements in Javascript

Introduction

We use arrays to store lists of items. Accessing array elements means getting a specific item from the list by its position.

When you want to get the first item in a list of names.

When you need to read a specific score from a list of game scores.

When you want to check the last item in a shopping list.

When you want to update a specific element in a list of tasks.

When you want to loop through a list and access each item by its position.

Syntax

Javascript

const arrayName = [item1, item2, item3];
const element = arrayName[index];

Array positions start at 0, so the first element is at index 0.

If you try to access an index outside the array, you get undefined.

Examples

Access the first element using index 0.

Javascript

const fruits = ['apple', 'banana', 'cherry'];
const firstFruit = fruits[0]; // 'apple'

Access the last element using length - 1.

Javascript

const numbers = [10, 20, 30];
const lastNumber = numbers[numbers.length - 1]; // 30

Accessing any element in an empty array returns undefined.

Javascript

const emptyArray = [];
const element = emptyArray[0]; // undefined

Accessing the only element in a single-item array.

Javascript

const colors = ['red'];
const onlyColor = colors[0]; // 'red'

Sample Program

This program creates an array of animals and accesses elements at different positions, including an index that does not exist.

Javascript

const animals = ['dog', 'cat', 'rabbit'];
console.log('Animals array:', animals);

const firstAnimal = animals[0];
console.log('First animal:', firstAnimal);

const secondAnimal = animals[1];
console.log('Second animal:', secondAnimal);

const lastAnimal = animals[animals.length - 1];
console.log('Last animal:', lastAnimal);

const outOfBounds = animals[5];
console.log('Out of bounds access:', outOfBounds);

Important Notes

Accessing an element by index is very fast, with time complexity O(1).

Trying to access an index outside the array returns undefined, which can cause bugs if not checked.

Use array length to find the last element's index, since arrays can change size.

Summary

Arrays store items in order, starting at index 0.

You get an element by using its index inside square brackets.

Accessing an invalid index returns undefined.

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