Arrays

JavaScript's ordered list — creating, accessing, modifying, looping, and the methods every developer uses daily.

What it is, in plain English: An array is an ordered list of values. It can hold anything — numbers, strings, objects, even other arrays — and you access each item by its position number (starting from 0). Arrays are the most-used data structure in JavaScript. You'll use them in almost every program you write.

Where this bites you

sort() doesn't return a sorted copy; it rearranges the array you call it on and returns that same array. const ranked = scores.sort(...) therefore leaves both names pointing at one reordered array, and the original order is gone. Anything that relied on it, such as "the order players signed up", silently changes too.

const signupOrder = [42, 7, 19];          // scores, in the order players signed up

const ranked = signupOrder.sort((a, b) => b - a);

console.log("ranked:", ranked);              // [ 42, 19, 7 ]
console.log("signup order:", signupOrder);   // [ 42, 19, 7 ]  <- original order lost

Working with lists of things

Almost every program needs to work with collections of things — a list of products, a set of scores, a queue of messages. In JavaScript, that's an array: an ordered list where each item has a numbered position.

Creating an array

// Square brackets, items separated by commas
const colours = ["red", "green", "blue"];
const scores  = [95, 87, 72, 100, 68];
const mixed   = ["Alice", 30, true, null];   // arrays can hold any types
const empty   = [];                           // empty array

Accessing items — index starts at 0

const colours = ["red", "green", "blue"];
//               index:  0       1       2

console.log(colours[0]);       // "red"    — first item
console.log(colours[1]);       // "green"  — second item
console.log(colours[2]);       // "blue"   — third item
console.log(colours[3]);       // undefined — past the end

console.log(colours.length);  // 3 — how many items
console.log(colours.at(-1));  // "blue"  — last item (modern)
console.log(colours.at(-2));  // "green" — second-to-last

Adding and removing items

const cart = ["apple", "bread"];

// Add to the END:
cart.push("milk");
console.log(cart);   // ["apple", "bread", "milk"]

// Remove from the END (returns the removed item):
const removed = cart.pop();
console.log(removed); // "milk"
console.log(cart);    // ["apple", "bread"]

// Add to the BEGINNING:
cart.unshift("eggs");
console.log(cart);    // ["eggs", "apple", "bread"]

// Remove from the BEGINNING:
cart.shift();
console.log(cart);    // ["apple", "bread"]

Looping over an array

const names = ["Alice", "Bob", "Charlie"];

// for...of — cleanest, use this most of the time
for (const name of names) {
  console.log(`Hello, ${name}!`);
}

// forEach — useful when you need the index too
names.forEach((name, index) => {
  console.log(`${index + 1}. ${name}`);
});
// 1. Alice
// 2. Bob
// 3. Charlie

The three most useful array methods

These three methods transform arrays without changing the original:

const prices = [10, 25, 5, 40, 15];

// map — transform every item, produce a new array
const doubled = prices.map(price => price * 2);
console.log(doubled);   // [20, 50, 10, 80, 30]

// filter — keep only items that pass a test
const expensive = prices.filter(price => price > 15);
console.log(expensive); // [25, 40]

// reduce — combine all items into one value
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total);     // 95

Finding things

const nums = [3, 7, 2, 9, 4];

nums.includes(7);              // true  — does it contain 7?
nums.indexOf(9);               // 3     — what index is 9 at? (-1 if not found)
nums.find(n => n > 5);         // 7     — first item matching condition
nums.findIndex(n => n > 5);    // 1     — index of first match
nums.some(n => n > 8);         // true  — does ANY item pass?
nums.every(n => n > 0);        // true  — do ALL items pass?

The copy trap — arrays are reference types

const a = [1, 2, 3];
const b = a;           // b points to the SAME array as a!

b.push(4);
console.log(a);        // [1, 2, 3, 4] — a changed too!

// Fix: copy with spread
const c = [...a];      // c is a NEW array with the same values
c.push(5);
console.log(a);        // [1, 2, 3, 4] — a is unaffected

Spread and destructuring

// Spread (...) — expand an array into individual items
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

// Destructuring — unpack values into variables
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]

// Swap two variables cleanly:
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);   // 2 1

Try It Yourself

// Create an array
const fruits = ["apple", "banana", "cherry"];

// Access by index (starts at 0)
console.log(fruits[0]);        // "apple"
console.log(fruits[2]);        // "cherry"
console.log(fruits.length);    // 3
console.log(fruits.at(-1));    // "cherry" — last item

// Add and remove
fruits.push("date");           // add to end
console.log(fruits);           // ["apple", "banana", "cherry", "date"]

fruits.pop();                  // remove from end
console.log(fruits);           // ["apple", "banana", "cherry"]

// Loop over every item
for (const fruit of fruits) {
  console.log(`I like ${fruit}`);
}

// map — transform every item into something new
const lengths = fruits.map(fruit => fruit.length);
console.log(lengths);          // [5, 6, 6]

// filter — keep only items that match a condition
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits);       // ["banana", "cherry"]

// Spread — copy or combine arrays
const moreFruits = [...fruits, "elderberry", "fig"];
console.log(moreFruits);

Sorting, slicing, flattening, and chaining

Sorting

// Default sort converts to strings — surprises with numbers:
[10, 1, 21, 2].sort()           // [1, 10, 2, 21] — wrong for numbers!
[10, 1, 21, 2].sort((a, b) => a - b)  // [1, 2, 10, 21] — numeric ascending
[10, 1, 21, 2].sort((a, b) => b - a)  // [21, 10, 2, 1]  — numeric descending

// Sort objects by a property:
const users = [{name:"Charlie"},{name:"Alice"},{name:"Bob"}];
users.sort((a, b) => a.name.localeCompare(b.name));
// [{name:"Alice"},{name:"Bob"},{name:"Charlie"}]

Like splice below (and reverse), sort mutates in place, unlike map/filter. ES2023 added non-mutating versions, toSorted(), toReversed() and toSpliced(), available in Node.js 20+ and current browsers. In older environments, sort a copy instead: [...signupOrder].sort(...).

const signupOrder = [42, 7, 19];

const ranked = signupOrder.toSorted((a, b) => b - a);   // ES2023: returns a sorted copy

console.log("ranked:", ranked);              // [ 42, 19, 7 ]
console.log("signup order:", signupOrder);   // [ 42, 7, 19 ]

Slicing and splicing

const arr = [0, 1, 2, 3, 4, 5];

// slice — extract a portion (non-destructive, returns new array)
arr.slice(1, 4)    // [1, 2, 3] — from index 1 up to (not including) 4
arr.slice(3)       // [3, 4, 5] — from index 3 to end
arr.slice(-2)      // [4, 5]    — last 2 items

// splice — remove/insert IN PLACE (mutates original)
const colours = ["red", "green", "blue", "yellow"];
const removed = colours.splice(1, 2);  // remove 2 items starting at index 1
console.log(removed);  // ["green", "blue"]
console.log(colours);  // ["red", "yellow"]

// splice to insert:
colours.splice(1, 0, "purple", "orange");  // insert at index 1, remove 0
console.log(colours);  // ["red", "purple", "orange", "yellow"]

Flattening nested arrays

const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat()     // [1, 2, 3, 4, [5, 6]] — one level deep
nested.flat(2)    // [1, 2, 3, 4, 5, 6]   — two levels
nested.flat(Infinity)  // fully flattened

// flatMap — map then flatten one level
const sentences = ["hello world", "foo bar"];
sentences.flatMap(s => s.split(" "))  // ["hello", "world", "foo", "bar"]

Chaining methods

const orders = [
  { item: "book",    price: 12, qty: 2 },
  { item: "pen",     price: 1,  qty: 10 },
  { item: "laptop",  price: 999, qty: 1 },
  { item: "notebook",price: 5,  qty: 4 },
];

const total = orders
  .filter(o => o.price > 5)          // only items over $5
  .map(o => o.price * o.qty)         // calculate line totals
  .reduce((sum, t) => sum + t, 0);   // sum them up

console.log(total);  // 1023 (12*2 + 999*1)

Array.from and Array.of

// Array.from — create array from array-like or iterable
Array.from("hello")          // ["h","e","l","l","o"]
Array.from({length: 5}, (_, i) => i * 2)  // [0, 2, 4, 6, 8]
Array.from(new Set([1,1,2,3,3]))  // [1, 2, 3] — deduplicate

// Array.of — create array from arguments (unlike new Array() ambiguity)
Array.of(3)       // [3]
new Array(3)      // [,,] — 3 empty slots, not [3]!

Typed arrays, array exotic objects, and the iteration protocol

Array exotic objects

Arrays in JavaScript are exotic objects (ECMA-262 §10.4.2): they override the [[DefineOwnProperty]] internal method to keep the length property in sync with integer-indexed properties. Setting arr[5] = "x" on an array of length 3 automatically updates length to 6 and creates sparse slots for indices 3 and 4. Reducing length truncates the array by deleting out-of-range properties. This is distinct from plain objects, which have no such [[DefineOwnProperty]] hook.

Typed arrays — fixed-type, fixed-length binary buffers

// TypedArrays share an ArrayBuffer (raw binary memory):
const buffer = new ArrayBuffer(16);  // 16 bytes of raw memory
const int32  = new Int32Array(buffer);   // view as 4 signed 32-bit ints
const float64 = new Float64Array(buffer); // view as 2 64-bit floats — same memory!

int32[0] = 42;
console.log(int32[0]);    // 42
console.log(buffer.byteLength);  // 16

// Available typed array types:
// Int8Array, Uint8Array, Uint8ClampedArray (used by Canvas)
// Int16Array, Uint16Array
// Int32Array, Uint32Array
// Float32Array, Float64Array
// BigInt64Array, BigUint64Array

Typed arrays are used in WebGL, Web Audio, WebSockets (binary frames), crypto operations, and performance-sensitive code. They don't have most standard Array methods (no push/pop/map) but do have set(), subarray(), and copyWithin().

Array iterator methods and lazy evaluation

ES2025 adds iterator helper methods (.map(), .filter(), etc.) to the Iterator prototype — enabling lazy chains that don't materialise intermediate arrays. Currently available via iterator composition proposals (Stage 4 as of 2024):

// Iterator.from + lazy chain (no intermediate arrays):
const result = Iterator.from([1,2,3,4,5,6,7,8,9,10])
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .take(3)
  .toArray();   // [4, 16, 36] — only materialised at .toArray()

structuredClone — deep copy arrays and objects

const original = [[1, 2], [3, 4]];
const shallow = [...original];
const deep = structuredClone(original);  // ES2022 — proper deep clone

original[0].push(99);
console.log(shallow[0]);  // [1, 2, 99] — shallow copy shares inner arrays
console.log(deep[0]);     // [1, 2]     — deep copy is fully independent

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.