JavaScript Maps

A picture of location on a map to signify JavaScript Maps

Create Maps In JavaScript

In JavaScript, a Map holds key-value pairs here keys can be of any data type.

A map maintains the insertion order of keys and provides a size property.

Maps can be iterated directly and have built-in methods for managing key-value pairs. Maps unlike JavaScript Objects, do not have default keys.

Common Syntax Of Maps In JavaScript

Glossary:

Iterable

Object values can be looped in a “for of” loop.

Default

Define default values in none provided.

Declaration

Used to define variables, functions, and constants.

Method

Function defined within a object.

Constructor

Special method within a class used to initialize and create objects of that class.

Common Methods For Maps

Ojamboshop.com Learning JavaScript Maps
Name Description Example
Map() Create a new Map. new Map();
set() Add elements to a Map. set(“age”, 24);
get() Get value of a key in a Map. get(“age”);
Name Description Example

JavaScript Maps Snippet

// OjamboShop.com Learning JavaScript Maps Tutorial

// Create Map Via Passing Array
let prices = new Map([
	["Milk", 10],
	["Butter", 5],
	["Bread", 2],
]);
console.log(typeof prices);
console.log(JSON.stringify(Object.fromEntries(prices)));

// Create Map Elements Via Set
let costs = new Map();
costs.set("Juice", 3);
costs.set("Cereal", 4);
costs.set("Soap", 6);
console.log(typeof costs);
console.log(JSON.stringify(Object.fromEntries(costs)));

// Retrieve Values
console.log("Milk price: " + prices.get("Milk"));
console.log("Butter price: " + prices.get("Butter"));
console.log("Bread price: " + prices.get("Bread"));
console.log("Juice cost " + costs.get("Juice"));
console.log("Cereal cost " + costs.get("Cereal"));
console.log("Soap cost " + costs.get("Soap"));

JavaScript Maps Code
OjamboShop.com Web IDE JavaScript Maps Code

JavaScript Maps Result
OjamboShop.com Web IDE Displaying JavaScript Maps Result


Usage

You can use any IDE or text editor and the web browser to compile and execute JavaScript code. For this tutorial, the OjamboShop.com Learning JavaScript Course Web IDE can used to input and compile JavaScript code for the Maps.

Open Source

JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. This allows commercial use, modification, distribution, and allows making derivatives proprietary.

Live Stream

Every Friday, you can join a live stream and ask questions. Check Ojambo.com for details and instructions.

Learn Programming Courses:

Get the Learning JavaScript Course for your web browser on any device.

OjamboShop.com Learning JavaScript Course
OjamboShop.com Learning JavaScript Interactive Online Course

Learn Programming Books:

Learning Javascript Book is available as Learning JavaScript Paperback or Learning JavaScript Ebook.

OjamboShop.com Learning JavaScript Book Announcement
OjamboShop.com Learning JavaScript Ebook And Paperback Announcement

Conclusion:

JavaScript makes it easy to use create Maps. Maps are iterable and used to store key-value pairs of any data type where the keys maintain their insertion order.

If you enjoy this article, consider supporting me by purchasing one of my OjamboShop.com Online Programming Courses or publications at Edward Ojambo Programming Books

References:

About Edward

Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.

As the author of impactful books including Learning JavaScript, Learning Python, Learning PHP and Mastering Blender Python API, Edward writes with a focus on personal growth, entrepreneurship, and practical success strategies. His work is designed to guide, motivate, and empower.

In addition to writing, Edward offers professional "full-stack development," "database design," "1-on-1 tutoring," "consulting sessions,", tailored to help you take the next step. Whether you are launching a business, developing a brand, or leveling up your mindset, Edward will be there to support you.

Edward also offers online courses designed to deepen your learning and accelerate your progress. Explore the programming on languages like JavaScript, Python and PHP to find the perfect fit for your journey.

📖 Explore His Books – Visit the Book Shop to grab your copies today.
💼 Need Support? – Learn more about Services and the ways to benefit from his expertise.
🎓 Ready to Learn? – Check out his Online Courses to turn your ideas into results.

One thought on “JavaScript Maps

  1. msp5 says:
    Thank you for content.

Comments are closed.