AlgorithmsData structuresRuns in your browserReviewed October 1, 2026

Hash Table Visualizer

Turn a key into a bucket number to store and find values in constant time. Interactive step-by-step animation with JavaScript code, complexity and front-end use cases.

Localprivate by defaultFastno sign-up path

Data structuresTime: O(1) averageSpace: O(n)

Keys to storeBucketsKey to look up afterwards

Bucket 0

empty

Bucket 1

empty

Bucket 2

empty

Bucket 3

empty

Bucket 4

empty

Step 1 / 19

A hash table turns a key into a number (a hash) and uses it to jump straight to a bucket. Here the hash is the sum of the letter codes, modulo 5 buckets.

JavaScript

1function hash(key, size) {
2  let sum = 0;
3  for (const ch of key) sum += ch.charCodeAt(0);
4  return sum % size;
5}
6function set(table, key, value) {
7  const bucket = table[hash(key, table.length)];
8  bucket.push([key, value]);
9}
10function get(table, key) {
11  const bucket = table[hash(key, table.length)];
12  for (const [k, v] of bucket) if (k === key) return v;
13}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

Hash Table Visualization and Animation

Turn a key into a bucket number to store and find values in constant time. Compute a hash number from the key. Use hash % bucket count to pick a bucket. Store the item there; if the bucket already has items (a collision) chain it after them. Time complexity: O(1) average. Space complexity: O(n). JavaScript objects, Map and Set. Understanding hashing explains why key lookups are fast and why collisions matter.

How to use Hash Table Visualizer

Compute a hash number from the key.
Use hash % bucket count to pick a bucket.
Store the item there; if the bucket already has items (a collision) chain it after them.
Press Play, or step through with the arrow buttons and change the input to see how it reacts.

Questions

What is Hash Table?

Turn a key into a bucket number to store and find values in constant time.

What is the time complexity of Hash Table?

Time: O(1) average. Space: O(n).

Where do front-end developers use Hash Table?

JavaScript objects, Map and Set. Understanding hashing explains why key lookups are fast and why collisions matter.

Does this upload my data?

No. This converter runs in your browser for ordinary use, so the input is not sent to a backend by this tool.

Related tools

Keep working without searching again.

Sorting

Hash Table Visualizer

Hash Table Visualization and Animation

How to use Hash Table Visualizer

Questions

What is Hash Table?

What is the time complexity of Hash Table?

Where do front-end developers use Hash Table?

Does this upload my data?

Related tools

Bubble Sort Visualizer

Insertion Sort Visualizer

Selection Sort Visualizer

Merge Sort Visualizer