PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
Dicts vs Objects and Map
MirrorLesson 4 of 11
Lesson 4

Dicts vs Objects and Map

Key-value structures in JavaScript

Introduction

In this lesson, you'll learn about dicts vs objects and map in JavaScript. Coming from Python, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
PY
From Python:

In Python, you're familiar with key-value structures in javascript.

JS
In JavaScript:

JavaScript has its own approach to key-value structures in javascript, which we'll explore step by step.

The JavaScript Way

Let's see how JavaScript handles this concept. Here's a typical example:

JS
JavaScript Example
const person = { name: "Alice", age: 30 };

// Access
console.log(person.name);       // dot notation
console.log(person.city ?? "Unknown"); // nullish coalescing

// Mutate
person.city = "Istanbul";
delete person.age;

// Iteration
for (const [key, val] of Object.entries(person)) {
  console.log(key, val);
}

// Merge
const merged = { ...person, role: "admin" };

// Map – better for dynamic keys
const map = new Map();
map.set("key", 123);
map.get("key"); // 123
map.has("key"); // true

Comparing to Python

Here's how you might have written similar code in Python:

PY
Python (What you know)
person = {"name": "Alice", "age": 30}

# Access
print(person["name"])
print(person.get("city", "Unknown"))

# Mutate
person["city"] = "Istanbul"
del person["age"]

# Iteration
for key, val in person.items():
    print(key, val)

# Merge (Python 3.9+)
merged = {**person, "role": "admin"}

# Dict from keys
squares = {n: n**2 for n in range(5)}
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

JS objects allow dot notation (obj.key); Python dicts don't

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Object.entries() ≈ dict.items()

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

JS Map for dynamic/non-string keys — closer to Python dict

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

{...obj} spread ≈ {**dict} unpacking

Step-by-Step Breakdown

1. Property Access

JavaScript objects support both dot (obj.key) and bracket (obj['key']) notation.

PY
Python
person["name"]
person.get("city", "Unknown")
JS
JavaScript
person.name
person["name"]
person.city ?? "Unknown"  // nullish coalescing

2. Iteration

Object.entries() returns [key, value] pairs, just like dict.items().

PY
Python
for key, val in d.items(): ...
JS
JavaScript
for (const [key, val] of Object.entries(obj)) { ... }

3. When to Use Map

Use Map when you have dynamic/non-string keys or need guaranteed insertion order.

PY
Python
d = {}  # Python dicts maintain insertion order (3.7+)
JS
JavaScript
// Object: string keys only (mostly)
const map = new Map();  // any key type, ordered
Rule of Thumb
Use plain objects for static shapes. Use Map for dynamic key-value stores.

Common Mistakes

When coming from Python, developers often make these mistakes:

  • JS objects allow dot notation (obj.key); Python dicts don't
  • Object.entries() ≈ dict.items()
  • JS Map for dynamic/non-string keys — closer to Python dict
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • Dot notation available in JS (no Python equivalent)
  • Object.entries() ≈ dict.items()
  • Use Map for dynamic keys / when key type matters
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousNext