Arrays in JavaScript: lists with structure and control

Learn how to create, read, loop through and modify arrays while understanding indexes, length and mutation so you can build list logic without common beginner mistakes.

How much do you know about JavaScript?

📘 Theory

Foundations: index, order and length

Arrays start at index 0, and that rule affects everything else.

The first element of an array is at `arr[0]`, and the `length` property tells you how many elements exist, not what the last index is.

If you access an out-of-range index, you get `undefined`, so it is worth validating boundaries when you loop or inspect specific positions.

The first index is `0`.
The last valid index is `length - 1`.
`length` does not return the last index.
An invalid index produces `undefined`.

Controlled mutation with basic methods

`push`, `pop`, `shift` and `unshift` mutate the original array.

These methods are useful in queues, stacks and basic list management. The key is remembering that they modify the array they act on.

Later, when you need immutability, you will see alternatives based on spread syntax and copy-producing methods.

push

pop

unshift

shift

Loop through arrays with `for` and `for...of`

Choose the loop based on whether you need the index or just the value.

A classic `for` loop gives you precise control over index, step size and stop conditions.

`for...of` simplifies reading when you only need each value and not the numeric position.

Daily patterns with arrays

First and last element access, accumulation and simple search are foundational patterns.

These operations appear constantly in real features: show the first or last item, count elements, sum values or verify whether something exists.

Once these patterns feel natural, `map`, `filter` and `reduce` become much easier to learn.

First element: `arr[0]`.
Last element: `arr[arr.length - 1]` or `arr.at(-1)`.
Accumulation: start with `let total = 0` and use a loop.
Existence: `includes`; position: `indexOf`.

Array hygiene to avoid bugs

Validate boundaries and avoid accidental mutation when it adds no value.

When a list comes from user input or an API, assume it may be empty or incomplete. Check the length before accessing critical indexes.

During debugging, printing `length`, the current index and the current value often reveals the mistake in seconds.

1 Foundations: index, order and length 2 Controlled mutation with basic methods 3 Loop through arrays with `for` and `for...of` 4 Daily patterns with arrays 5 Array hygiene to avoid bugs

🧭 Key visuals

Arrays in JavaScript

It reinforces index-based access, transformation and iteration over collections.

Representation of indexed lists and common operations on arrays

An array as an ordered list

It reinforces the beginner mental model of list, index and iteration, which is exactly what this lesson wants to consolidate.

Diagram of an array as several slots with indexes and a loop that visits each position

🧪 Learn by doing

Example Guided example: add and remove elements Observe how the data changes with `push` and `pop`.

⌄

Example Guided example: accumulation with a loop Sum the values of an array using the classic accumulator pattern.

⌄

Example Interactive demo: a mini dynamic list Add and remove items so you can visualize the current array state in real time.

⌄

Example Interactive demo: mutating methods and reindexing Visualize how `push`, `pop`, `shift`, `unshift`, `sort` and `reverse` change the array and its indexes after each action.

⌄