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.

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"}]

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.