Array length property in Javascript - Step-by-Step Execution

Concept Flow - Array length property

Create Array

↓

Access length property

↓

Get number of elements

↓

Use length value

↓

Modify array?

Yes↓

length updates automatically

↩Back to Access length property

The array length property gives the number of elements in the array and updates automatically when the array changes.

Execution Sample

Javascript

const arr = [10, 20, 30];
console.log(arr.length); // 3
arr.push(40);
console.log(arr.length); // 4

This code shows how the length property changes when we add an element to the array.

Execution Table

Step	Code Line	Array Content	Length Property	Action	Output
1	const arr = [10, 20, 30];	[10, 20, 30]	3	Create array with 3 elements
2	console.log(arr.length);	[10, 20, 30]	3	Access length property	3
3	arr.push(40);	[10, 20, 30, 40]	4	Add element 40, length updates
4	console.log(arr.length);	[10, 20, 30, 40]	4	Access updated length	4
5	End	[10, 20, 30, 40]	4	Program ends

💡 Program ends after printing updated length 4

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
arr	undefined	[10, 20, 30]	[10, 20, 30, 40]	[10, 20, 30, 40]
arr.length	undefined	3	4	4

Key Moments - 2 Insights

Why does arr.length change after arr.push(40) without explicitly updating length?

Because the length property automatically updates when the array changes, as shown in step 3 of the execution_table.

What does arr.length represent exactly?

It represents the number of elements in the array at that moment, as seen in steps 2 and 4 where it reflects the current array size.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of arr.length?

A 4

B undefined

C 3

D 0

💡 Hint

Check the 'Length Property' column at step 2 in the execution_table.

At which step does the array length change from 3 to 4?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Length Property' and 'Action' columns in the execution_table.

If we remove the last element instead of adding, how would arr.length change?

A It would decrease

B It would stay the same

C It would increase

D It would become undefined

💡 Hint

Think about how length changes when elements are removed, related to the automatic update shown in the execution_table.

Concept Snapshot

Array length property:
- Use arr.length to get number of elements
- Automatically updates when array changes
- Read-only for counting, but can be set to truncate
- Commonly used to loop or check size

Full Transcript

This visual trace shows how the JavaScript array length property works. We start by creating an array with three elements. The length property then shows 3. When we add an element using push, the array grows and length updates to 4 automatically. Accessing length always gives the current number of elements. This helps in loops and size checks without manual counting.