JavaScript Tutorial

JavaScript Maps

A Map is a dictionary of any keys to values. set, get, and has — not the same as a plain object.

A dictionary, not an object

A plain object is a bag of string (or symbol) keys. A Map is a list of pairs: any key, any value. Numbers, objects, and even other Maps can be keys. Insertion order is kept.

Reach for a Map when the keys are not property names — user ids, DOM nodes, or values you did not choose in advance.

set, get, and has

set(key, value) writes. get(key) reads — undefined if the key is missing. has(key) is the boolean test. These names are not object methods: objects use obj.key and "key" in obj.

Example

const scores = new Map();
scores.set("Ada", 18);
scores.set("Lin", 21);
scores.set("Ada", 19);

console.log(scores.get("Ada"));
console.log(scores.has("Grace"));
console.log(scores.size);

Setting Ada twice updates the value. Size stays 2.get("Grace") would be undefined; has is how you tell “missing” from “stored as undefined.”

Click Try it in JavaScript under an example. That opens/javascript/try — a live page and a console.

Keys can be any type

Object keys become strings: obj[1] and obj["1"] are the same slot. Map keys stay themselves. A number 1 is not the string "1".

Example

const table = new Map();
table.set(1, "number key");
table.set("1", "string key");

const user = { id: 7 };
table.set(user, "object key");

console.log(table.get(1));
console.log(table.get("1"));
console.log(table.get(user));

The object key only matches that same object. A new { id: 7 } is a different key, even if the fields look the same.

Loop entries

for...of on a Map yields [key, value] pairs, in insertion order. You can also loop map.keys() or map.values().

Example

const inventory = new Map([
  ["pens", 12],
  ["paper", 40],
  ["clips", 8],
]);

for (const [item, qty] of inventory) {
  console.log(item + ": " + qty);
}

The array-of-pairs form of new Map([...]) is the usual way to start with data already in hand.

Map versus object

ObjectMap
Key typesStrings and symbolsAny value
Writeobj.k = vmap.set(k, v)
Readobj.kmap.get(k)
CountYou count keys yourselfmap.size
JSONJSON.stringify worksNot JSON by default

Keep using objects for records with known field names: person.name,settings.theme. Use a Map when the keys are data — ids, words, nodes — and you need size and reliable iteration.

delete and clear

delete(key) removes one pair. clear() empties the Map. Neither mutates a copy — they change the same Map you already have.

Example

const seats = new Map();
seats.set("A1", "Ada");
seats.set("A2", "Lin");
seats.delete("A1");

console.log(seats.has("A1"));
console.log(seats.size);

seats.clear();
console.log(seats.size);

What to remember

  • set, get, and has — not dot notation.
  • Keys can be numbers, objects, or strings. They stay distinct.
  • size is always the number of pairs.
  • A Map is not a JSON object. Convert if you need to stringify.

Next: typeof — the operator that names the kind of a value, with two famous traps.

FAQ: JavaScript Maps

Common questions about this page.

What is the StudyGrid JavaScript tutorial?

The StudyGrid JavaScript tutorial is a full beginner track: variables, functions, arrays, if/else, the DOM, events, storage, and fetch. Each chapter has copy-and-run examples.

Should I run javascript map examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn javascript map in this JavaScript JavaScript lesson (JavaScript Maps).

Is the JavaScript editor the same as Try Python?

No. Try JavaScript is a live page plus a console at /javascript/try. Try Python stays at /try. JavaScript lessons never open the Python editor.

Do I need to install anything to learn JavaScript?

No. Open a chapter, click Try it in JavaScript, and the page and console update in the browser.

Where should I start the JavaScript tutorial?

Start at JavaScript Intro, then Where To, Output, and Syntax. After variables and functions, continue to the DOM and events. Use Next at the bottom of each chapter.

Is the JavaScript tutorial free?

Yes. The JavaScript studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live editor.