Accessing array elements in Javascript - Step-by-Step Execution

Concept Flow - Accessing array elements

Start

↓

Have an array

↓

Choose index number

↓

Access element at index

↓

Use or display element

↓

End

This flow shows how to get a value from an array by picking its position number (index).

Execution Sample

Javascript

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

This code gets the first fruit from the list and prints it.

Execution Table

Step	Action	Expression	Result	Explanation
1	Create array	const fruits = ['apple', 'banana', 'cherry']	fruits = ['apple', 'banana', 'cherry']	Array with 3 elements created
2	Access element	fruits[0]	'apple'	Get element at index 0 (first element)
3	Assign to variable	const first = fruits[0]	first = 'apple'	Variable first stores 'apple'
4	Print value	console.log(first)	apple	Output the value of first
5	End	-	-	Program ends

💡 All steps complete, array element accessed and printed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
fruits	undefined	['apple', 'banana', 'cherry']	['apple', 'banana', 'cherry']	['apple', 'banana', 'cherry']	['apple', 'banana', 'cherry']
first	undefined	undefined	undefined	'apple'	'apple'

Key Moments - 3 Insights

Why do we use fruits[0] to get the first element, not fruits[1]?

Arrays in JavaScript start counting at 0, so the first element is at index 0. See execution_table step 2 where fruits[0] gives 'apple'.

What happens if we try to access an index that does not exist, like fruits[5]?

Accessing an index outside the array returns undefined. This is not shown here but is important to avoid errors.

Why do we assign fruits[0] to a variable before printing?

Assigning to a variable stores the value for reuse or clarity. In step 3, first gets 'apple', then printed in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'first' after step 3?

A 'banana'

B 'apple'

C undefined

D 'cherry'

💡 Hint

Check the 'Result' column in step 3 of execution_table.

At which step is the array 'fruits' created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column for array creation in execution_table.

If we change fruits[0] to fruits[1] in step 2, what will be printed?

A 'apple'

B 'cherry'

C 'banana'

D undefined

💡 Hint

fruits[1] is the second element in the array; check the array contents in variable_tracker.

Concept Snapshot

Access array elements using bracket notation: array[index]
Index starts at 0 for the first element.
Accessing an invalid index returns undefined.
Store accessed element in a variable to use it.
Use console.log() to print the element.

Full Transcript

This lesson shows how to get a value from an array by using its position number called index. We start with an array of fruits. We pick the first fruit by using fruits[0] because counting starts at zero. We save this value in a variable called first. Then we print first, which shows 'apple'. If we try to get an index that does not exist, we get undefined. Remember, arrays start at zero, so fruits[0] is the first item. This is a simple way to access any element in a list.

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