📦 Working with Arrays

What Are Arrays?

Imagine a shopping list. Instead of inventing a separate variable for every item — item1, item2, item3 — an array lets you store the whole list in one ordered container. Think of it as a train: a single named engine pulls a line of numbered cars, and each car holds one piece of data.

The key words are ordered and indexed. Every element has a position — its index — and those indices start at 0, not 1. That single fact is the source of more beginner bugs than any other, so keep it front of mind: the first element lives at index 0, and the last lives at index length - 1.

Creating Arrays

Just as there are different ways to make a sandwich, there are several ways to create an array. In practice you'll reach for the first one almost every time.

// Method 1: Array literal — the idiomatic, most common way
const fruits = ['apple', 'banana', 'orange'];

// Method 2: Array constructor — rarely needed, and easy to misuse
const numbers = new Array(1, 2, 3, 4, 5);   // [1, 2, 3, 4, 5]
const oops    = new Array(3);               // [ <3 empty slots> ] — NOT [3]!

// Method 3: Empty array you fill in later
const emptyBasket = [];

// Arrays can hold any mix of data types
const mixedBag = ['text', 42, true, null, { name: 'John' }];

Real-world example: a shopping cart

Arrays really shine when each element is itself a small object. A shopping cart is a classic case — an ordered list of line items.

// A shopping cart in an e-commerce site
const shoppingCart = [
    { product: 'Laptop',   price: 999.99, quantity: 1 },
    { product: 'Mouse',    price: 29.99,  quantity: 2 },
    { product: 'Keyboard', price: 89.99,  quantity: 1 }
];

console.log(shoppingCart.length);        // 3 line items
console.log(shoppingCart[0].product);    // "Laptop"

Indexing & Length

Arrays are like an apartment building: each item has its own "apartment number" (index), and the numbering starts on the ground floor at 0.

const colors = ['red', 'green', 'blue', 'yellow'];

// Accessing elements by index
console.log(colors[0]);      // 'red'   (first element)
console.log(colors[2]);      // 'blue'  (third element)

// length — how many elements the array holds
console.log(colors.length);  // 4

// Modifying an element — like repainting one apartment
colors[1] = 'lime';
console.log(colors);         // ['red', 'lime', 'blue', 'yellow']

// Reaching the last element reliably
console.log(colors[colors.length - 1]); // 'yellow'

// Modern shortcut (ES2022): .at() accepts negative indices
console.log(colors.at(-1));  // 'yellow'
console.log(colors.at(-2));  // 'blue'

Adding & Removing at the Ends

Four methods add or remove elements from the ends of an array. They come in two pairs — one for the end and one for the start.

push & pop — work at the end

const playlist = ['Song A', 'Song B'];

// push() — add one (or more) to the END; returns the new length
playlist.push('Song C');
console.log(playlist);   // ['Song A', 'Song B', 'Song C']

// pop() — remove the LAST element; returns the removed item
const lastSong = playlist.pop();
console.log(lastSong);   // 'Song C'
console.log(playlist);   // ['Song A', 'Song B']

unshift & shift — work at the start

const queue = ['Person 2', 'Person 3'];

// unshift() — add to the FRONT; returns the new length
queue.unshift('Person 1');
console.log(queue);          // ['Person 1', 'Person 2', 'Person 3']

// shift() — remove the FIRST element; returns the removed item
const firstPerson = queue.shift();
console.log(firstPerson);    // 'Person 1'
console.log(queue);          // ['Person 2', 'Person 3']

Combining these gives you two classic data structures: push + pop makes a stack (last in, first out), while push + shift makes a queue (first in, first out).

Finding Elements

Searching an array is like looking for a book in a library. JavaScript gives you three quick tools depending on whether you want a position or a simple yes/no.

const books = ['JavaScript', 'Python', 'Java', 'C++', 'Python'];

// indexOf() — position of the FIRST match, or -1 if absent
console.log(books.indexOf('Python'));     // 1
console.log(books.indexOf('Ruby'));       // -1  (not found)

// lastIndexOf() — position of the LAST match
console.log(books.lastIndexOf('Python')); // 4

// includes() — a clean true/false existence check
console.log(books.includes('Java'));      // true
console.log(books.includes('Go'));        // false

slice vs splice — Array Surgery

These two look almost identical but behave completely differently. The one-letter difference in their names hides a critical distinction: slice copies and leaves the original alone; splice cuts into the original and changes it.

const cake = ['layer1', 'layer2', 'layer3', 'layer4', 'layer5'];

// slice(start, end) — end is EXCLUSIVE; returns a new array
const middlePiece = cake.slice(1, 4);
console.log(middlePiece);  // ['layer2', 'layer3', 'layer4']
console.log(cake);         // original UNCHANGED

// A no-argument slice() is a quick way to shallow-copy an array
const copy = cake.slice();

const ingredients = ['flour', 'sugar', 'eggs', 'butter', 'salt'];

// splice(startIndex, deleteCount) — removes and RETURNS removed items
const removed = ingredients.splice(1, 2);
console.log(removed);      // ['sugar', 'eggs']
console.log(ingredients);  // ['flour', 'butter', 'salt'] — MODIFIED

// splice can also insert: splice(startIndex, deleteCount, ...itemsToAdd)
ingredients.splice(1, 0, 'milk', 'vanilla');
console.log(ingredients);  // ['flour', 'milk', 'vanilla', 'butter', 'salt']