Visualising a Hash Table

Click a username, watch it get hashed, and see which array slot it lands in.

Where are hash tables used?

Imagine a messaging app that needs to quickly find a user's profile from their username. The app can store data in a hash table where:

  • the key is the username (like "dog")
  • the value is the data you care about (display name, avatar, preferences)
  • the hash function (letters to numbers -> sum -> mod 10) turns the username into an array index

Step 1 Input username

Pick a username from our messaging example.

Click a username to hash it. Try dog, tea and cab to see a collision.

These same sample users drive the demo. Tap any username to trace its path.

→
↓

Step 2 Hashing function

There are many hashing functions which could be used. A hashing function turns any input into a fixed sized output. In this example, we convert each letter to a number, add them up, then take the last digit (mod 10) as output.
→
↓

Step 3 Hash table (array of size 10)

We take the result of the hash function as the array index (0-9).