Hash Maps in Python and JavaScript: Visual & Code Examples

What is a Hash Map?

A Hash Map is a data structure that stores key-value pairs.

• In Python, hash maps are implemented as dictionaries (dict).
• In JavaScript, hash maps are implemented as objects ({}) or Map.

Hash maps allow fast insertion, deletion, and lookup based on keys.

Python Example: Visual Hash Map

python
Run
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Python Hash Map Demo with Visual Count
text = "hello world hello python python python"
word_count = {}
 
for word in text.split():
    word_count[word] = word_count.get(word, 0) + 1
 
# Display the hash map visually
print("Word counts (visual):")
for key, value in word_count.items():
    print(f"{key}: {'◆'*value} ({value})")
 
# Display the hash map as a normal dict
print("\nWord counts (dict view):")
print(word_count)
Terminal
Terminal Output
Click the Run button to execute the code...

Explanation:

• Each word is a key.
• Number of occurrences is visualized with ◆ symbols.
• Both visual and dictionary representations are shown.

JavaScript Example: Visual Hash Map

javascript
Run
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// JavaScript Hash Map Demo with Visual Count
const text = "hello world hello javascript javascript javascript";
const wordCount = {};
 
// Count occurrences
text.split(" ").forEach(word => {
  wordCount[word] = (wordCount[word] || 0) + 1;
});
 
// Visual display
console.log("Word counts (visual):");
for (const [key, value] of Object.entries(wordCount)) {
  console.log(`${key}: ${"◆".repeat(value)} (${value})`);
}
 
// Object view
console.log("\nWord counts (object view):");
console.log(wordCount);
 
 
Terminal
Terminal Output
Click the Run button to execute the code...

Quick Access Benchmark

Python

python
Run
1
2
3
4
5
6
7
8
9
10
import time
 
data = {i: i*2 for i in range(10000)}
 
start = time.time()
for i in range(10000):
    _ = data[i]
end = time.time()
 
print(f"Accessed 10000 items in {(end - start)*1000:.2f}ms")
Terminal
Terminal Output
Click the Run button to execute the code...

JavaScript

javascript
Run
1
2
3
4
5
6
7
8
console.time("Access 10000 items");
const data = {};
for (let i = 0; i < 10000; i++) data[i] = i*2;
 
for (let i = 0; i < 10000; i++) {
  const value = data[i];
}
console.timeEnd("Access 10000 items");
Terminal
Terminal Output
Click the Run button to execute the code...

Advantages of Hash Maps

• ✔ Fast lookups — average O(1)
• ✔ Dynamic size — grows automatically
• ✔ Flexible keys — strings, numbers, or tuples (Python)

Common Use Cases

• Counting elements (words, occurrences)
• Caching results for functions
• Implementing sets
• Storing configuration or JSON-like data

Conclusion

Hash maps are powerful and versatile in Python and JavaScript. Using visual representations like ◆ helps understand counts, while the dictionary/object view shows exact key-value pairs.

Pro Tip:

• In Python, use dict or defaultdict for automatic default values.
• In JavaScript, use Map for non-string keys or advanced key handling.

Happy coding and visualizing hash maps!