Array Basics and Core Methods

Arrays are the most commonly used data structure in JavaScript — ordered lists of values that can be accessed by index, iterated over, and transformed with a rich set of built-in methods. Every JavaScript developer works with arrays constantly: reading API responses, managing UI lists, processing form data, and building data pipelines. In this lesson you will master array creation, index access, mutation methods, and the full set of methods for adding, removing, and transforming elements.

Array Creation Methods #

Mutation Methods (change the original array) #

Non-Mutation Methods (return new array or value) #

Basic Example #

// ── Creating arrays ───────────────────────────────────────────────────────
const fruits    = ['apple', 'banana', 'cherry'];
const numbers   = Array.from({ length: 5 }, (_, i) => (i + 1) * 10);  // [10,20,30,40,50]
const chars     = Array.from('hello');           // ['h','e','l','l','o']
const unique    = [...new Set([1, 2, 2, 3, 3])]; // [1,2,3] — deduplication

console.log(numbers);  // [10, 20, 30, 40, 50]
console.log(unique);   // [1, 2, 3]

// ── Index access ──────────────────────────────────────────────────────────
console.log(fruits[0]);          // 'apple'
console.log(fruits.at(-1));      // 'cherry' — last element (ES2022)
console.log(fruits[99]);         // undefined — no error

// ── push / pop — end of array ─────────────────────────────────────────────
const stack = [];
stack.push('a', 'b', 'c');   // add to end
console.log(stack);           // ['a','b','c']
const last = stack.pop();     // remove from end
console.log(last, stack);     // 'c'  ['a','b']

// ── unshift / shift — beginning of array ─────────────────────────────────
const queue = ['b', 'c'];
queue.unshift('a');          // add to front
console.log(queue);          // ['a','b','c']
const first = queue.shift(); // remove from front
console.log(first, queue);   // 'a'  ['b','c']

// ── splice — surgical insertion and removal ───────────────────────────────
const letters = ['a', 'b', 'c', 'd', 'e'];

// Remove 2 elements starting at index 1
const removed = letters.splice(1, 2);
console.log(removed, letters);  // ['b','c']  ['a','d','e']

// Insert at position 1 without removing
letters.splice(1, 0, 'X', 'Y');
console.log(letters);  // ['a','X','Y','d','e']

// ── slice — non-mutating copy ─────────────────────────────────────────────
const original = [1, 2, 3, 4, 5];
const copy      = original.slice();          // full shallow copy
const middle    = original.slice(1, 4);     // [2,3,4]
const last3     = original.slice(-3);       // [3,4,5]

console.log(original);  // [1,2,3,4,5] — unchanged
console.log(middle);    // [2,3,4]

// ── concat and spread — merging arrays ───────────────────────────────────
const a = [1, 2, 3];
const b = [4, 5, 6];

const merged1 = a.concat(b);       // [1,2,3,4,5,6]
const merged2 = [...a, ...b];      // [1,2,3,4,5,6] — preferred
const merged3 = [...a, 99, ...b];  // [1,2,3,99,4,5,6] — insert in middle

// ── flat — flatten nested arrays ─────────────────────────────────────────
const nested = [[1, 2], [3, [4, 5]]];
console.log(nested.flat());      // [1,2,3,[4,5]] — one level
console.log(nested.flat(2));     // [1,2,3,4,5]   — two levels
console.log(nested.flat(Infinity)); // fully flat — any depth

// ── includes vs indexOf ───────────────────────────────────────────────────
const tags = ['javascript', 'css', 'html'];
console.log(tags.includes('css'));      // true  — boolean check
console.log(tags.indexOf('css'));       // 1     — index or -1
console.log(tags.indexOf('python'));    // -1    — not found

How It Works #

Step 1 — Arrays Are Dynamic — No Fixed Size #

Unlike arrays in many languages, JavaScript arrays resize automatically. push extends the array; pop shrinks it. You can even set arr.length = 0 to empty an array in place, or arr.length = 10 to pad it with undefined slots. The length property always reflects the current number of elements.

Step 2 — splice Is the Swiss Army Knife #

splice(start, deleteCount, ...insertItems) combines deletion and insertion in one operation. Setting deleteCount to 0 inserts without removing. Omitting insertItems removes without replacing. The method modifies the original array in place and returns only the removed elements.

Step 3 — slice Creates a Shallow Copy #

slice() with no arguments creates a shallow copy of the entire array — a common technique before calling a mutating method. Shallow means nested objects are not deep-copied — both arrays will share references to the same inner objects. For deep cloning, use structuredClone(arr).

Step 4 — Spread Merges More Expressively Than concat #

[...a, ...b] is the modern way to merge arrays. Unlike concat, spread can insert values anywhere in the merge: [...a, 99, ...b]. Spread also works on any iterable — Sets, Maps, strings, NodeLists — while concat only works with arrays.

Step 5 — at() Enables Clean Negative Indexing #

arr.at(-1) returns the last element cleanly. Before at(), the idiom was arr[arr.length - 1] — verbose and repeated the array name. at(-2) is the second-to-last, at(-3) the third-to-last, and so on. It works on strings too: 'hello'.at(-1) returns 'o'.

Real-World Example: Shopping Cart #

// cart.js

class Cart {
    constructor() {
        this.items = [];
    }

    add(product, qty = 1) {
        const existing = this.items.find(i => i.id === product.id);
        if (existing) {
            existing.qty += qty;
        } else {
            this.items.push({ ...product, qty });
        }
        return this;   // enable chaining
    }

    remove(productId) {
        const idx = this.items.findIndex(i => i.id === productId);
        if (idx !== -1) this.items.splice(idx, 1);
        return this;
    }

    updateQty(productId, qty) {
        if (qty <= 0) return this.remove(productId);
        const item = this.items.find(i => i.id === productId);
        if (item) item.qty = qty;
        return this;
    }

    get total()     { return this.items.reduce((sum, i) => sum + i.price * i.qty, 0); }
    get itemCount() { return this.items.reduce((sum, i) => sum + i.qty, 0); }
    get isEmpty()   { return this.items.length === 0; }

    getNames()  { return this.items.map(i => `${i.name} x${i.qty}`); }
    clear()     { this.items = []; return this; }

    summary() {
        return {
            items:    this.getNames(),
            count:    this.itemCount,
            total:    `$${this.total.toFixed(2)}`,
            shipping: this.total >= 35 ? 'Free' : '$5.99',
        };
    }
}

const cart = new Cart();
cart
    .add({ id: 1, name: 'Widget',   price: 9.99  })
    .add({ id: 2, name: 'Gadget',   price: 29.99 })
    .add({ id: 1, name: 'Widget',   price: 9.99  }, 2);  // add 2 more Widgets

console.log(cart.summary());
// { items: ['Widget x3','Gadget x1'], count: 4, total: '$59.96', shipping: 'Free' }

cart.updateQty(1, 1);
cart.remove(2);
console.log(cart.summary());
// { items: ['Widget x1'], count: 1, total: '$9.99', shipping: '$5.99' }

Common Mistakes #

Mistake 1 — Confusing splice and slice #

❌ Wrong — splice mutates the array unexpectedly:

const arr = [1, 2, 3, 4, 5];
const sub = arr.splice(1, 3);   // removes [2,3,4] from arr!
console.log(arr);               // [1, 5] — mutated!

✅ Correct — use slice to copy a range without mutation:

const arr = [1, 2, 3, 4, 5];
const sub = arr.slice(1, 4);    // [2,3,4] — arr unchanged
console.log(arr);               // [1,2,3,4,5]

Mistake 2 — Sorting an array you still need unsorted #

❌ Wrong — sort() mutates the original:

const prices = [30, 10, 50, 20];
const sorted = prices.sort((a, b) => a - b);
console.log(prices);   // [10,20,30,50] — original mutated!

✅ Correct — copy before sorting:

const sorted = [...prices].sort((a, b) => a - b);
console.log(prices);   // [30,10,50,20] — original preserved

Mistake 3 — Using delete to remove an array element #

❌ Wrong — delete leaves an empty slot (undefined) and doesn’t change length:

const arr = [1, 2, 3];
delete arr[1];
console.log(arr);        // [1, empty, 3] — length still 3!

✅ Correct — use splice to actually remove the element:

arr.splice(1, 1);
console.log(arr);        // [1, 3] — length is now 2

▶ Try It Yourself

Quick Reference #