JavaScript Map — Create From Object

The ECMAScript 2015 specification introduced a Map class. A Map instance provides convenient methods around key-value-pairs. Objects in JavaScript are key-value-pairs as well. Yet, you can’t pass an existing object to the map constructor.

This tutorial shows you how to create a JavaScript map from an existing object.

Node.js Series Overview

  1. String Replace All Appearances
  2. Remove All Whitespace From a String in JavaScript
  3. Generate a Random ID or String in Node.js or JavaScript
  4. Remove Extra Spaces From a String in JavaScript or Node.js
  5. Remove Numbers From a String in JavaScript or Node.js
  6. Get the Part Before a Character in a String in JavaScript or Node.js
  7. Get the Part After a Character in a String in JavaScript or Node.js
  8. How to Check if a Value is a String in JavaScript or Node.js
  9. Check If a String Includes All Strings in JavaScript/Node.js/TypeScript
  10. Check if a Value is a String in JavaScript and Node.js
  11. Limit and Truncate a String to a Given Length in JavaScript and Node.js
  12. Split a String into a List of Characters in JavaScript and Node.js
  13. How to Generage a UUID in Node.js
  14. Reverse a String in JavaScript or Node.js
  15. Split a String into a List of Lines in JavaScript or Node.js
  16. Split a String into a List of Words in JavaScript or Node.js
  17. Detect if a String is in camelCase Format in Javascript or Node.js
  18. Check If a String Is in Lowercase in JavaScript or Node.js
  19. Check If a String is in Uppercase in JavaScript or Node.js
  20. Get the Part After First Occurrence in a String in JavaScript or Node.js
  21. Get the Part Before First Occurrence in a String in JavaScript or Node.js
  22. Get the Part Before Last Occurrence in a String in JavaScript or Node.js
  23. Get the Part After Last Occurrence in a String in JavaScript or Node.js
  24. How to Count Words in a File
  25. How to Shuffle the Characters of a String in JavaScript or Node.js
  26. Append Characters or Words to a String in JavaScript or Node.js (Coming soon)
  27. Check if a String is Empty in JavaScript or Node.js (Coming soon)
  28. Ensure a String Ends with a Given Character in JavaScript or Node.js (Coming soon)
  29. Left-Trim Characters Off a String in JavaScript or Node.js (Coming soon)
  30. Right-Trim Characters Off a String in JavaScript or Node.js (Coming soon)
  31. Lowercase the First Character of a String in JavaScript or Node.js (Coming soon)
  32. Uppercase the First Character of a String in JavaScript or Node.js (Coming soon)
  33. Prepend Characters or Words to a String in JavaScript or Node.js (Coming soon)
  1. Get Number of Seconds Since Epoch in JavaScript
  2. Get Tomorrow’s Date in JavaScript
  3. Increase a Date in JavaScript by One Week
  4. Add Seconds to a Date in Node.js and JavaScript
  5. Add Month(s) to a Date in JavaScript or Node.js
  6. Add Week(s) to a Date in JavaScript or Node.js
  7. Get the Current Year in JavaScript or Node.js
  8. How to Get a UNIX Timestamp in JavaScript or Node.js
  9. How to Convert a UNIX Timestamp to a Date in JavaScript or Node.js
  10. Add Days to a Date in JavaScript or Node.js
  11. Get Yesterday's Date in JavaScript or Node.js
  12. Add Minutes to a Date in JavaScript or Node.js (Coming soon)
  13. Add Hours to a Date in JavaScript or Node.js (Coming soon)
  14. Check If a Date Is Today in JavaScript or Node.js (Coming soon)
  15. Check If a Date is Tomorrow in JavaScript or Node.js (Coming soon)
  16. Check If a Date is Yesterday in JavaScript or Node.js (Coming soon)
  17. How to Format a Date YYYY-MM-DD in JavaScript or Node.js (Coming soon)

Create A JavaScript Map From an Object

The map constructor in JavaScript expects an array of key-value-tuples, like [ ['name', 'Marcus'], ['future', 'Studio'] ]. This format seems a bit off because you may expected to pass the plain object to the map’s constructor.

The good thing: you can create the expected structure using JavaScript’s Object.entries method:

const users = {  
  'marcus': { id: 1, name: 'Marcus' },
  'norman': { id: 2, name: 'Norman' },
  'christian': { id: 3, name: 'Christian' }
}

const map = new Map(  
    Object.entries(users)
)

map.size  
// 3

map.has('marcus')  
// true

This-Binding Won’t Work in Functions

JavaScript objects can have functions as their values. When creating a map from an object containing functions, you’ll loose the this binding:

const user = {  
  firstname: 'Future',
  lastname: 'Studio',
  fullname() {
    return `${this.firstname} ${this.lastname}`
  }
}

user.fullname()  
// 'Future Studio'

/**
 * Creating a map from an object containing functions may
 * create binding issues related to the `this` keyword.
 */
const futureStudio = new Map(  
    Object.entries(user)
)

map.size  
// 3

map.has('fullname')  
// true

const fullname = map.get('fullname')  
fullname()  
// 'undefined undefined'

Use the @supercharge/map Package

I’m the maintainer of the @supercharge/map package providing a better Map class for JavaScript.

The @supercharge/map package exports an extended and improved Map class. Use this supercharged Map class to create map instances. The constructor accepts the array of key-value-pairs and also plain JavaScript objects:

const Map = require('@supercharge/map')

const users = {  
  'marcus': { id: 1, name: 'Marcus' },
  'norman': { id: 2, name: 'Norman' },
  'christian': { id: 3, name: 'Christian' }
}

const map = new Map(users)

map.has('marcus')  
// true

Sweet!


Mentioned Resources

Explore the Library

Find interesting tutorials and solutions for your problems.