Lesson 67 min read

Arrays

Your data's favorite way to stand in line — ordered, indexed, and ready to go

What's an Array?

An array is like a row of lockers — internally it works like a dynamic array. Each locker has a number (starting from 0), and each one holds a value. You can open any locker by its number, add new lockers at the end, remove one from the front, or rearrange them however you like.

Arrays are one of the most-used data structures in JavaScript. They're ordered (position matters) and can hold any mix of types — numbers, strings, objects, even other arrays.

Creating & Accessing Arrays

// Creating arrays
let fruits = ["apple", "banana", "cherry"];
let mixed = [42, "hello", true, null, [1, 2, 3]];
let empty = [];


// Accessing by index (starts at 0!)
console.log(fruits[0]);   // "apple"
console.log(fruits[2]);   // "cherry"
console.log(fruits[99]);  // undefined (no error, just undefined)


// .at() supports negative indexes
console.log(fruits.at(-1)); // "cherry" (last item)
console.log(fruits.at(-2)); // "banana" (second to last)


// .length — how many items
console.log(fruits.length);  // 3


// Changing a value
fruits[1] = "blueberry";
console.log(fruits); // ["apple", "blueberry", "cherry"]
Output
apple
cherry
undefined
cherry
banana
3
["apple", "blueberry", "cherry"]

Adding & Removing Items

Arrays have built-in methods to add and remove items from either end. Think of it like a line at a theme park:

  • .push(item) — add to the end of the line
  • .pop() — remove from the end
  • .unshift(item) — cut to the front of the line
  • .shift() — remove from the front
  • .splice(index, count, ...newItems) — the Swiss Army knife: insert, remove, or replace items anywhere

push and pop are fast (they just touch the end — like a stack). unshift and shift are slower because every other item has to scoot over.

Push, Pop, Shift, Unshift & Splice

let queue = ["Alice", "Bob"];


// push — add to end
queue.push("Charlie");
console.log(queue); // ["Alice", "Bob", "Charlie"]


// pop — remove from end
let last = queue.pop();
console.log(last);  // "Charlie"
console.log(queue); // ["Alice", "Bob"]


// unshift — add to front
queue.unshift("Zara");
console.log(queue); // ["Zara", "Alice", "Bob"]


// shift — remove from front
let first = queue.shift();
console.log(first); // "Zara"
console.log(queue); // ["Alice", "Bob"]


// splice — insert at index 1, remove 0 items, add "Eve"
queue.splice(1, 0, "Eve");
console.log(queue); // ["Alice", "Eve", "Bob"]


// splice — remove 1 item at index 1
queue.splice(1, 1);
console.log(queue); // ["Alice", "Bob"]
Output
["Alice", "Bob", "Charlie"]
Charlie
["Alice", "Bob"]
["Zara", "Alice", "Bob"]
Zara
["Alice", "Bob"]
["Alice", "Eve", "Bob"]
["Alice", "Bob"]

Spread Operator & Destructuring

The spread operator (...) is like dumping a box of LEGO bricks onto the table — it takes all the items out of an array and spreads them individually. It's incredibly useful for copying arrays, merging them, or passing items as arguments.

Destructuring lets you unpack values from an array into named variables in a single line. Instead of writing arr[0], arr[1], you can pull values out by position.

Spread & Destructuring

// Spread — copy an array (not a reference!)
let original = [1, 2, 3];
let copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] (unchanged!)
console.log(copy);     // [1, 2, 3, 4]


// Spread — merge arrays
let front = ["a", "b"];
let back = ["c", "d"];
let all = [...front, "MIDDLE", ...back];
console.log(all); // ["a", "b", "MIDDLE", "c", "d"]


// Destructuring — unpack by position
let [first, second, third] = ["gold", "silver", "bronze"];
console.log(first);  // "gold"
console.log(second); // "silver"


// Skip items with commas
let [, , winner] = [10, 20, 30];
console.log(winner); // 30


// Rest pattern — grab the remaining items
let [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]
Output
[1, 2, 3]
[1, 2, 3, 4]
["a", "b", "MIDDLE", "c", "d"]
gold
silver
30
1
[2, 3, 4, 5]
Note: Never copy an array with = (like let b = a). That creates a reference — both variables point to the SAME array, so changing one changes the other! Always use [...a] or a.slice() to make a true copy. Think of = as sharing a Google Doc, while [...a] is downloading your own copy.

Quick check

What does [1, 2, 3].at(-1) return?

Continue reading

Dynamic ArraysData Structure
Resizing strategy, amortized O(1) push
→
Static ArraysData Structure
A row of numbered boxes — fast to grab, fixed in size
→
Lists & TuplesPython
Ordered collections you can grow, shrink, and slice
→
ArraysJava
Fixed-size boxes — declare, fill, and loop
→
← LoopsObjects →