Phase 5Beginner6 of 16 in JavaScript

Arrays

Create, read, change, search, transform, sort, copy and flatten arrays: every array method you'll use daily, with the traps that cause real bugs.

An array is an ordered list of values kept under one name: a shopping list, the scores in a game, the rows of a table. Almost every real program works with lists, so arrays are the data structure you'll touch most often in JavaScript. This phase starts from [1, 2, 3] and goes all the way to the details interviewers ask about.

You'll learn how to create and read arrays (indexes, length, at, Array.from), how to change them (push, pop, splice and friends) and why it matters whether a method mutates the array or returns a new one. Then come the methods that make JavaScript arrays so pleasant: searching (find, includes, some), transforming (map, filter, reduce), sorting (and the famous [10, 1, 5].sort() trap), and how to choose between forEach, for...of and map.

Finally you'll unpack arrays with destructuring and spread, work with nested (2D) arrays and flat, and learn the difference between a shallow and a deep copy, the source of many "why did my other array change?" bugs. This phase uses functions and arrow functions from Phase 3 everywhere. Objects get their own phase next (Phase 6), and Hectal's /dsa course builds on these arrays for algorithms.

0/10 · 0%

10 topics ~3 h 30 code blocks & diagrams

Start with the first topic

5.1

Creating and Reading Arrays

An array is an ordered list of values; you create one with square brackets, read items by their position number (the index, starting at 0), get the count from length, and build arrays from other things with Array.from and Array.of.

24 min 3 code practice

5.2

Adding, Removing and Changing

push/pop work at the end of an array, unshift/shift at the start, and splice anywhere in the middle; all of them change (mutate) the original array, while methods like slice, concat, with and toSpliced leave it alone and return a new one.

19 min 3 code practice

5.3

Searching Arrays

indexOf and includes look for an exact value, find and findIndex look for the first item that passes a test you write (findLast searches from the end), and some and every answer yes-or-no questions about the whole array.

18 min 3 code practice

5.4

map and filter

map makes a new array by changing every item with a function you give it, and filter makes a new array keeping only the items your function says yes to; neither changes the original, and they chain together into clear data pipelines.

24 min 3 code practice

5.5

reduce

reduce walks through an array carrying one running value (the accumulator) and combines each item into it, turning a whole list into a single result such as a total, a count, a maximum or a grouped object; always give it a starting value.

24 min 3 code practice

5.6

Sorting

sort reorders an array in place and, without a comparator, sorts everything as text (so [10, 1, 5] becomes [1, 10, 5]); pass (a, b) => a - b for numbers, use toSorted and toReversed to get a sorted copy, and rely on sort being stable since ES2019.

19 min 3 code practice

5.7

forEach and Iteration Choices

You can walk through an array with a classic for loop, for...of, forEach or map; forEach runs a function for each item and returns nothing, can't be stopped early, and is the wrong choice when you need break, a result array, or await.

18 min 3 code practice

5.8

Destructuring and Spread with Arrays

Array destructuring unpacks items into variables by position (const [a, b] = arr), with skipping, defaults and a ...rest to collect the remainder; spread (...arr) does the opposite, unpacking an array into a new array or a function call, which is how you copy and merge arrays.

24 min 3 code practice

5.9

Nested Arrays

An array can hold other arrays, which gives you grids and tables (2D arrays) read with two indexes like grid[row][col]; flat removes levels of nesting and flatMap maps and flattens one level in a single step.

18 min 3 code practice

5.10

Copying: Shallow vs Deep

Assigning an array to another variable copies only the reference, so both names point at the same array; spread, slice and Array.from make a shallow copy (a new outer array sharing the same inner objects), and structuredClone makes a deep copy where nothing is shared.

19 min 3 code practice