Stop 04 · JavaScriptTopics · 10/36

Arrays

In short

Messages in a chat, products in a cart, rows in a table: they're all lists. Arrays hold ordered lists, and their built-in methods save you from writing loops by hand.

Ordered, index-based collections with a rich built-in method set (`map`, `filter`, `reduce`, etc.) that's essential for everyday data transformation in JS. Arrays are frequently combined with higher-order methods to transform, search, group, validate, and aggregate application data without manually managing indexes.

The jaadu mascot hooks one more coach onto the end of a colourful toy train.

Think of it like this

Coaches on a train

A train is coaches in a fixed order. You can attach one at the end or detach the last one. In arrays the counting starts at 0, so the engine-side first coach is coach 0. Weird for a train, normal for programmers.

Watch it happen

filter, map and reduce on marks

first

last

1/6marks has 4 items at indexes 0 to 3. marks.at(-1) is the last one, 60.

The big ideas

What you need to know

Index starts at 0

The first item is arr[0] and the last is arr[arr.length - 1], or simply arr.at(-1).

Some methods change the array

push, pop, shift, unshift, splice and sort change the original array in place.

Some return a new one

map, filter, slice, toSorted and toReversed leave the original alone. React code relies on this a lot.

Finding things

includes checks if a value exists, find returns the first match, some and every answer yes or no.

See it in code

Walk through the code

1const marks = [72, 88, 95, 60];2 3console.log(marks[0]);       // 724console.log(marks.at(-1));   // 60 (last item)5 6const passed = marks.filter((m) => m >= 70);       // [72, 88, 95]7const withGrace = marks.map((m) => m + 5);         // [77, 93, 100, 65]8const total = marks.reduce((sum, m) => sum + m, 0); // 3159 10console.log(marks.includes(95));                   // true11console.log(marks.toSorted((a, b) => a - b));      // [60, 72, 88, 95]12console.log(marks);                                // [72, 88, 95, 60], unchanged

1/4Index 0 is the first mark. at(-1) counts from the end.

reduce walks the array carrying a running value, here sum, which starts at 0. toSorted gives a sorted copy without touching marks.

Save yourself the pain

Common mistakes

Oops

Calling [10, 9, 1].sort() and expecting [1, 9, 10].

Do this instead

Default sort compares as text and gives [1, 10, 9]. Pass a compare function: sort((a, b) => a - b).

Oops

Using map just to loop when you don't need the new array.

Do this instead

Use forEach or for...of for side effects. Use map only when you want the returned array.

Your mission

Class result sheet

~20 min

Quick check

What does [10, 1, 5].sort() return?

Go deeper

1Rewrite a `for` loop that transforms data using `.map()` instead. Validate your understanding by applying it in a small practical example.
2Practice destructuring arrays and using the spread operator to copy/merge them. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn `.find()`, `.some()` and `.every()` for common search patterns.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download