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.