JS/TS
  • JavaScript Development
  • JS Principles
    • JS Principles
      • Primitive data types
      • typeof operator
      • Scope
      • Hoisting
      • IIFE
      • Closure
      • Anonymous functions in JS
      • Conditional (ternary) operator
        • Coercion vs Conversion
      • Event-driven programming
      • Factory Function
      • JSON.stringify()
      • Strict mode
      • super() keyword
      • What are memory leaks?
      • Micro-tasks within an event loop (Summary)
      • Macro-tasks within an event loop (Summary)
      • null vs undefined
    • Memory Management
    • Advanced function concepts
      • Impure vs Pure Functions
      • Factory functions
  • JavaScript Objects & Arrays
    • Introducing JavaScript objects
      • Build-in objects
        • isNaN()
      • RegExp
        • RegExp.prototype.test()
      • String
        • String.prototype.split()
        • String.prototype.slice()
      • Objects
        • Object.assign()
        • Object.create()
        • Object.defineProperties()
        • Object.defineProperty()
        • Object.entries()
        • Object.freeze()
        • Object.getOwnPropertyNames()
        • Object.getPrototypeOf()
        • Object.isFrozen()
        • Object.isSealed()
        • Map
      • Standard built-in methods to work with Arrays
        • Array.of()
        • Array.prototype.concat()
        • Array.prototype.every()
        • Array.prototype.filter()
        • Array.prototype.find()
        • Array.prototype.findIndex()
        • Array.prototype.forEach()
        • Array.prototype.join()
        • Array.prototype.map()
        • Array.prototype.pop()
        • Array.prototype.shift()
        • Array.prototype.reverse()
        • Array.prototype.some()
        • Array.prototype.sort()
        • Array.prototype.splice()
        • Array.prototype.unshift()
        • Array.prototype.includes()
        • Array.prototype.flatMap()
      • Prototypal inheritance
        • Inheritance with the prototype chain
        • Inheriting "methods"
  • JavaScript Mid
    • JavaScript & ES
      • Arrow Function
      • Anonymous Function
      • Callbacks
      • Promises
      • var, let, and const
      • Fetch API (function)
      • Fetch API
      • Synchronous vs Asynchronous
      • Encapsulation
      • Destructuring assignment
      • call() - apply() - bind()
      • 'This' keyword
      • Functional Programming
  • Browser
    • Event-driven programming
  • TypeScript
    • The TypeScript Handbook
      • Basic Types
      • Interfaces
      • Functions
      • Literal Types
      • Unions and Intersection Types
      • Classes
      • Enums
      • Generics
      • Implements vs extends
  • Hackerrank Practices
    • Practices and examples
  • JS Math
    • Mathematical
      • JavaScript | Math.E() function
      • Math.abs( ) Method
      • Math.ceil( ) function
      • Math floor()
      • Math.imul( ) Function
      • Math log( ) Method
      • Math max()/min() Method
      • Math pow( ) Method
      • Math.sign( ) Function
      • Math sqrt( ) Method
Powered by GitBook
On this page

Was this helpful?

  1. JavaScript Objects & Arrays
  2. Introducing JavaScript objects
  3. Objects

Map

PreviousObject.isSealed()NextStandard built-in methods to work with Arrays

Last updated 4 years ago

Was this helpful?

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and ) may be used as either a key or a value.

Map

Object

Accidental Keys

A Map does not contain any keys by default. It only contains what is explicitly put into it.

An Object has a prototype, so it contains default keys that could collide with your own keys if you're not careful.

Key Types

A Map's keys can be any value (including functions, objects, or any primitive).

Key Order

The keys in Map are ordered in a simple, straightforward way: A Map object iterates entries, keys, and values in the order of entry insertion.

Although the keys of an ordinary Object are ordered now, this was not always the case, and the order is complex. As a result, it's best not to rely on property order.

Size

The number of items in an Object must be determined manually.

Iteration

Note:

Performance

Performs better in scenarios involving frequent additions and removals of key-value pairs.

Not optimized for frequent additions and removals of key-value pairs.

Examples:

let myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

for (let [key, value] of myMap) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

for (let key of myMap.keys()) {
  console.log(key)
}
// 0
// 1

for (let value of myMap.values()) {
  console.log(value)
}
// zero
// one

for (let [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one
// Note: TypeScript has been used here to do this examples
const myVariable: Map<string, myModel> = new Map(name, myModelValues);

// Another example of the Map class
let myVariable: myModel[] = [{name: 'Hello', lastName: 'Bye'}];

interface myModel {
    name: string;
    lastName: string;
}

const myVariable2: Map<string, myModel> = new Map(myVariable.map(model => [model.name, model]));
const result = myVariable2.get('Hello');
console.log(result?.name);
console.log(myVariable); 

// Results
// [LOG]: "Hello" 
// [LOG]: [{
//  "name": "Hello",
//  "lastName": "Bye"
// }] 
let myVariable: myModel[] = [
    {name: 'Hello', lastName: 'Bye'},
    {name: 'Hey', lastName: 'Good bye'},
    {name: 'Hi', lastName: 'c-ya'}];

interface myModel {
    name: string;
    lastName: string;
}

const myVariable2: Map<string, myModel> = new Map(myVariable.map(model => [model.name, model]));
const result = myVariable2.get('Hello');

for(const [element, model] of myVariable2) {
    console.log(element); // Hello, hey, hi
    console.log(model); // The object that contains hello...
}

/**
 *  [LOG]: "Hello" 
    [LOG]: {
    "name": "Hello",
    "lastName": "Bye"
    } 
    [LOG]: "Hey" 
    [LOG]: {
    "name": "Hey",
    "lastName": "Good bye"
    } 
    [LOG]: "Hi" 
    [LOG]: {
    "name": "Hi",
    "lastName": "c-ya"
    }
 */

Note: As of ES5, this can be bypassed by using , but this is seldom done.

The keys of an Object must be either a or a .

The order was first defined for own properties only in ECMAScript 2015; ECMAScript 2020 defines order for inherited properties as well. See the and abstract specification operations. But note that no single mechanism iterates all of an object's properties; the various mechanisms each include different subsets of properties. ( includes only enumerable string-keyed properties; includes only own, enumerable, string-keyed properties; includes own, string-keyed properties even if non-enumerable; does the same for just Symbol-keyed properties, etc.)

The number of items in a Map is easily retrieved from its property.

A Map is an , so it can be directly iterated.

Object does not implement an , and so objects are not directly iterable using the JavaScript statement (by default).

An object can implement the iteration protocol, or you can get an iterable for an object using or .

The statement allows you to iterate over the enumerable properties of an object.

primitive values
Object.create(null)
String
Symbol
OrdinaryOwnPropertyKeys
EnumerateObjectProperties
for-in
Object.keys
Object.getOwnPropertyNames
Object.getOwnPropertySymbols
size
iterable
iteration protocol
for...of
Object.keys
Object.entries
for...in