JavaScript Tutorial: Objects & Maps
JavaScript objects, property access, spread, Object methods, and the Map/Set data structures.
Key-value data
Objects are JavaScript's most versatile data structure. Almost everything you work with — API responses, configuration, user data, events — is an object.
And unlike Python's dict, JavaScript objects have a prototype chain which gives them superpowers (and occasional surprises). Plus JavaScript has a dedicated `Map` data structure for when plain objects aren't quite right.
What you'll learn in this JavaScript objects & maps tutorial
This interactive JavaScript tutorial has 9 hands-on exercises. Estimated time: 20 minutes.
- Objects — look things up by name — Arrays store values by position. Objects store them by **name** (key).
- Adding, updating, deleting — Same syntax for adding and updating — JavaScript doesn't care which:
- Computed property names — When the property key comes from a variable, use square brackets in the object literal:
- Object.keys, values, entries — Three essential methods for working with all an object's data:
- Spread — copy and merge objects — Object spread `{...obj}` creates a shallow copy. Merge objects by spreading both:
- Optional chaining on objects — From Chapter 5: `?.` prevents crashes when accessing properties on null/undefined.
- Map — when object keys aren't strings — Plain objects only support string (and symbol) keys. `Map` supports ANY key type — objects, arrays, functions, numbers.
- Set — unique values only — `Set` stores unique values — duplicates are silently ignored:
- Build a word frequency counter — Final challenge — no starter code.
JavaScript Objects & Maps concepts covered
- Key-value data