Hash Table Visualization — Step by Step

From key to bucket in one step

A hash table is an array of buckets plus a hash function that converts any key into a bucket index. Instead of searching for where a key lives, you *compute* it. The visualizer uses the simplest useful hash — key % tableSize — over 7 buckets: inserting 38 computes 38 % 7 = 3, so 38 goes straight into bucket 3. Looking it up later repeats the same arithmetic and lands on the same bucket immediately, no scanning. That compute-instead-of-search step is the entire trick, and it is why hash tables average O(1) for insert, search, and delete.

Collisions are inevitable

A hash function squeezes a huge key space into a handful of buckets, so sooner or later two keys must share one — a collision. With 7 buckets, the keys 10 and 24 both hash to bucket 3 (10 % 7 = 3, 24 % 7 = 3) even though they are completely different keys. Collisions are not bugs; by the pigeonhole principle they are mathematically unavoidable once you have more possible keys than buckets. What separates a good hash table from a bad one is how gracefully it handles them — and how well its hash function spreads keys so collisions stay rare.

Separate chaining, walked through

This visualizer resolves collisions with separate chaining: each bucket holds a chain — conceptually a small linked list — of every key that hashed there. Insert 10 into empty bucket 3 and the chain is [10]. Insert 24: same bucket, collision flagged, and 24 is appended, making the chain [10, 24]. Searching for 24 now takes two steps: hash to bucket 3, then walk the chain comparing 10 (no), then 24 (found). Deleting works the same way — walk the chain, unlink the match. Each operation costs one hash plus a walk of one, usually very short, chain.

Load factor and resizing

The load factor is n / buckets — average chain length. With 7 buckets and 14 keys it is 2.0, meaning searches walk about two entries; keep inserting without growing and chains lengthen until "O(1)" quietly degrades toward O(n). Real implementations pick a threshold (Java's HashMap uses 0.75), and when the load factor crosses it, they resize: allocate a larger bucket array — typically about double — and re-hash every key into it, since key % 14 lands differently than key % 7. A single resize costs O(n), but it happens so rarely that inserts remain amortized O(1).

Why lookups are O(1) — and when they are not

The average-case guarantee rests on one assumption: the hash function spreads keys roughly evenly. Then the expected chain length equals the load factor — a small constant — so a lookup is one hash plus a couple of comparisons regardless of whether the table holds a hundred entries or a hundred million. The worst case breaks that assumption: if every key lands in the same bucket, the table degenerates into one long chain and every operation costs O(n). This can happen through a poor hash function or adversarial keys — which is why production hash tables use well-mixed, often randomized (seeded) hash functions.

JavaScript

class HashTable {
  constructor(size = 7) {
    this.size = size;
    this.buckets = Array.from({ length: size }, () => []);
  }

  hash(key) {
    return key % this.size;
  }

  insert(key) {
    this.buckets[this.hash(key)].push(key);
  }

  search(key) {
    return this.buckets[this.hash(key)].includes(key);
  }

  delete(key) {
    const bucket = this.buckets[this.hash(key)];
    const i = bucket.indexOf(key);
    if (i === -1) return false;
    bucket.splice(i, 1);
    return true;
  }
}

Python

class HashTable:
    def __init__(self, size=7):
        self.size = size
        self.buckets = [[] for _ in range(size)]

    def _hash(self, key):
        return key % self.size

    def insert(self, key):
        self.buckets[self._hash(key)].append(key)

    def search(self, key):
        return key in self.buckets[self._hash(key)]

    def delete(self, key):
        bucket = self.buckets[self._hash(key)]
        if key in bucket:
            bucket.remove(key)
            return True
        return False

Java

import java.util.ArrayList;
import java.util.List;

public class HashTable {
    private final List<List<Integer>> buckets = new ArrayList<>();
    private final int size;

    public HashTable(int size) {
        this.size = size;
        for (int i = 0; i < size; i++) {
            buckets.add(new ArrayList<>());
        }
    }

    private int hash(int key) {
        return key % size;
    }

    public void insert(int key) {
        buckets.get(hash(key)).add(key);
    }

    public boolean search(int key) {
        return buckets.get(hash(key)).contains(key);
    }

    public boolean delete(int key) {
        return buckets.get(hash(key)).remove(Integer.valueOf(key));
    }
}