Questions tagged [es6-map]

The ECMAScript 6 Map object holds key-value pairs that can be iterated through by looping. To use this tag, the post must be using ECMAScript 6 and must concern the use of how to use Map properly.

Syntax

To create a map:

const myMap = new Map();  //Map(0) 

This will create a new empty map object. The Map() constructor takes one optional parameter. For example, it can take an array of key/value pairs:

const myArr = [[1, 'one'], [2, 'two']];
const myMap = new Map(myArr);  //Map(2) {1 => "one", 2 => "two"}

This creates a map object with key 1 with a value of 'one' and key 2 with a value of 'two'. This is also possible with an iterable object:

const myIt = {
*[Symbol.iterator]() {
    yield [1, 'one'];
    yield [2, 'two'];
}};
const myMap = new Map(myIt); //Map(2) {1 => "one", 2 => "two"}

Again, this creates a map with the same structure as the last example.

Note that any value, from primitives to objects, can be used as either a key or a value. This includes NaN (Not a Number):

const myArr = [[NaN, 'one']];
const myMap = new Map(myArr);  //Map(1) {NaN => "one"}

This creates a map with a key of NaN with the value of "one". Even though NaNs are indistinguishable from each other, you cannot use them for multiple keys:

const myArr = [[NaN, 'one'], [NaN, 'two']];
const myMap = new Map(myArr);  //Map(1) {NaN => "two"}

This will only create one key of NaN where the last value associated with NaN will be in the map.

There are also getters and setters for the Map Object:

const myMap = new Map();  //Map(0)
myMap.set(1, "one");    //Map(1) {1 => "one"}
myMap.set(2, "two");    //Map(2) {1 => "one", 2 => "two"}
myMap.get(1);           //one
myMap.get(2);           //two

You can also create a map with mixed keys:

const myMap = new Map();
myMap.set(1, "one");
myMap.set("two", 2);
myMap.set(function () { return 3; }, "three")

This will create a map with a key of integer 1 with string value "one", a key of string "two" with an integer value of 2, and a key of an anonymous function with a string value of "three". However, while this works with setting, getting the last key will be impossible unless you define it outside the map first:

const myFunc = function () { };
const myMap = new Map();
myMap.set(1, "one");
myMap.set("two", 2);
myMap.set(myFunc, "three")
myMap.get(myFunc);    // three

To iterate through the map, you can use destructuring with the for...of loop:

for (var [key, value] of myMap) {
    console.log(key + ' = ' + value);
}

Or the forEach loop can be used as well:

myMap.forEach(function(value, key) {
    console.log(key + ' = ' + value);
});

Both examples will output the keys along with their values.

Reference

developer.mozilla.org

91 questions
1
vote
2 answers

JSON.parse() output changes if assigned to a variable

I am developing a website where tickets for events can be bought. After selecting a ticket it is in the shopping cart. I have a sessionService.ts which basically is a Map that reads/writes from/to the local storage. Storing the map as a…
Lira
  • 141
  • 2
  • 7
1
vote
2 answers

Learning to loop over a Map issue

I've been following along an online tutorial on ES6/Typescript and use of Map structures. Location: https://codecraft.tv/courses/angular/es6-typescript/mapset/ Issue is that nothing displays from the loops at all. I have compared what I have written…
edjm
  • 4,830
  • 7
  • 36
  • 65
1
vote
2 answers

ReactJS | Show or Hide Array of Objects based on flag

The Problem: What I am trying to do is hide/show react elements that are constructed dynamically based on a property of the Object Constructed. To be more precise let's take the following Array of Objects: const Apps = [ {name: App1, permission:…
user10104341
1
vote
1 answer

Returning an array of objects from other object

Hello am trying to extract some information from an object to create a graph but it returns undefined my object looks like { "concepts": [ { "id_cpt": "1", "fr_cpt": "Proche", }, { …
Zouari Moez
  • 63
  • 1
  • 9
1
vote
2 answers

reactjs array map method

i am trying to add a view more or view less section in the array map method , but when i use onclick method on a button inside the map method , all the buttons are acting instead of a specific one . class Projects extends…
nishant
  • 117
  • 3
  • 13
1
vote
2 answers

Composing keys to ES6 Map made of both primitives and objects

ES6 Maps makes it possible to use keys with any value, including functions, objects, and any primitive. I would like to create a combined key with a string and a reference to a DOM-node. var map = new Map(); var myKey = document.body + 'my…
user1506145
  • 5,176
  • 11
  • 46
  • 75
1
vote
5 answers

JavaScript Passing in a function to map();

Can someone please explain how the below code working? ... articles.map(createArticle).join("\n"); function createArticle(article){ return `

${article.news}

` } I understand how map();…
Ollie2619
  • 1,255
  • 4
  • 17
  • 28
1
vote
2 answers

Using map/filter behavior on Map instance

I have this Express route: app.use('/stop_jobs', function (req, res, next) { const jobId = req.query && req.query.job_id; const stopped : Array = []; for (let j of runningJobs.keys()) { if(j.id === jobId){ …
user7898461
1
vote
1 answer

Why does moving the array map of props outside the render function not work in React?

The example below works just fine, I'm mapping the props array in the render function. class Calendar extends Component { render(){ return(
{ this.props.events.map((event, idx) => { …
Matthew Blewitt
  • 459
  • 1
  • 3
  • 15
1
vote
0 answers

Angular update UI automatically when ES6 Map's value is changes

I have my full code in below stackblitz link, https://stackblitz.com/edit/angular-simple-cache-service-with-rxjs-8cywbi?file=app%2Fapp.component.ts Here I am trying to update the UI when someone updates the storagelocation(in this case a Map - which…
Sreekumar P
  • 5,900
  • 11
  • 57
  • 82
1
vote
1 answer

define Map with T[K]

I'm currently in the process of transitioning from JS to TS and can't quite get my head around keyof. I found https://github.com/kimamula/TypeScript-definition-of-EventEmitter-with-keyof and now I'm trying to implement this. All went fine until I…
Noel Heesen
  • 223
  • 1
  • 4
  • 14
1
vote
1 answer

how to use 'getOwnPropertyNames' to iterate through contents of a map

I have the map posted below in the code section. I added some values to the map as shown.But when i tried to display the contents of the map using 'getOwnPropertyNames' as shown in th code, the log statement in the loop does not display any…
Amrmsmb
  • 1
  • 27
  • 104
  • 226
0
votes
0 answers

Is there a way to enforce a Map object has all literals of "a union type of literals" as keys, in TypeScript?

I want to create a type which is a Map has all possible literals of a string literal union type. For example: type TNumberNames = | 'one' | 'two' | 'three' const numberMap: MyMapType = new Map().set('one', 1).set('two', 2).set('three', 3); //…
0
votes
2 answers

How to handle immutable array on map function in javascript?

Following code is a working logic that receives entries which is an object from an API response. What I am currently doing is to assign entry.listedContent to entryOne.id & entryOne.name properties I heard that this way, I will be modifying the…
jfr01
  • 107
  • 1
  • 11
0
votes
3 answers

How to filter items from Array of Array in Javascript

How can you filter movie title on the basis of Genre item in array? const result = [ { title: "Mad Max: Fury Road", genre: ["Action", "Adventure", "Sci-Fi"], }, { title: "The Hunger Games: Mockingjay Part 1", genre:…
Jacob
  • 101
  • 2
  • 5
  • 11