Something odd going on with JavaScript object maps

Question

Something odd going on with JavaScript object maps

I am facing an issue with two objects that I am trying to store in an associative array. When I assign values to them, all the values are stored incorrectly, except for the last one.

Can someone please help me figure out what I am doing wrong?

var usrMrid = {name: "mrid"};
var usrXYZZ = {name: "xyzz"};

var comm = {};

comm[usrMrid] = "ONE";
comm[usrXYZZ] = "TWO";

console.log("usrMrid: " + comm[usrMrid]); // this gives TWO, when it should give ONE
console.log("usrXYZZ: " + comm[usrXYZZ]); // this works fine

javascript arrays associative-array

Answer 1

Answer №1

When you utilize the `[ ]` syntax with an object and pass an object as a property name, the property name will be the string representation of the given expression. In this case, it will be `[object Object]`. Therefore, using different objects will create the same property with the name `[object Object]` and override the previous ones.

This behavior is evident in the provided example. The properties of the object are printed, revealing only one property named `[object Object]`.

var usrMrid = {name: "mrid"};
var usrXYZZ = {name: "xyzz"};

var comm = {};

comm[usrMrid] = "ONE";
comm[usrXYZZ] = "TWO";

console.log(comm);

To avoid this issue, you can utilize a `Map` in such cases.

var usrMrid = {name: "mrid"};
var usrXYZZ = {name: "xyzz"};

var comm = new Map([
  [usrMrid, "ONE"],
  [usrXYZZ, "TWO"]
]);

console.log(comm.get(usrMrid));

Answer 2

When you utilize the `[ ]` syntax with an object and pass an object as a property name, the property name will be the string representation of the given expression. In this case, it will be `[object Object]`. Therefore, using different objects will create the same property with the name `[object Object]` and override the previous ones.

This behavior is evident in the provided example. The properties of the object are printed, revealing only one property named `[object Object]`.

var usrMrid = {name: "mrid"};
var usrXYZZ = {name: "xyzz"};

var comm = {};

comm[usrMrid] = "ONE";
comm[usrXYZZ] = "TWO";

console.log(comm);

To avoid this issue, you can utilize a `Map` in such cases.

var usrMrid = {name: "mrid"};
var usrXYZZ = {name: "xyzz"};

var comm = new Map([
  [usrMrid, "ONE"],
  [usrXYZZ, "TWO"]
]);

console.log(comm.get(usrMrid));

Answer 3

Answer №2

Keys in objects must be Strings! Consider using a Map instead:

var userMrid = {name: "mrid"};
var userXYZZ = {name: "xyzz"};

const communication = new Map([
  [userMrid,"ONE"],
  [userXYZZ, "TWO"]
]);

console.log(communication.get(userMrid));

Alternatively, Symbols can also be a great solution for this scenario:

 const id = Symbol("id");

var userMrid = {
  name: "mrid",
  [id]:"ONE"
};
var userXYZZ = {
   name: "xyzz",
    [id]:"TWO"
};

 console.log(userMrid, userMrid[id]);

Answer 4

Keys in objects must be Strings! Consider using a Map instead:

var userMrid = {name: "mrid"};
var userXYZZ = {name: "xyzz"};

const communication = new Map([
  [userMrid,"ONE"],
  [userXYZZ, "TWO"]
]);

console.log(communication.get(userMrid));

Alternatively, Symbols can also be a great solution for this scenario:

 const id = Symbol("id");

var userMrid = {
  name: "mrid",
  [id]:"ONE"
};
var userXYZZ = {
   name: "xyzz",
    [id]:"TWO"
};

 console.log(userMrid, userMrid[id]);

Answer 5

Answer №3

There seems to be an issue here. When using the associative array style to write an object, it only accepts strings. This means that in your current setup, the objects will overwrite each other and always have the same answer.

To avoid this, you should structure your code differently. Try something like this to prevent overwriting:

var userMrid = {name: "mrid"};
var userXYZZ = {name: "xyzz"};

var communication = {};

communication[userMrid.name] = "ONE";
communication[userXYZZ.name] = "TWO";

console.log(communication); // This will display the object correctly.
console.log(communication[userMrid.name]); // This will show "ONE"
console.log(communication["mrid"]); // This will also show "ONE"
console.log(communication["xyzz"]); // This will display "TWO"
console.log(communication[userXYZZ.name]); // This will show "TWO"

Answer 6

There seems to be an issue here. When using the associative array style to write an object, it only accepts strings. This means that in your current setup, the objects will overwrite each other and always have the same answer.

To avoid this, you should structure your code differently. Try something like this to prevent overwriting:

var userMrid = {name: "mrid"};
var userXYZZ = {name: "xyzz"};

var communication = {};

communication[userMrid.name] = "ONE";
communication[userXYZZ.name] = "TWO";

console.log(communication); // This will display the object correctly.
console.log(communication[userMrid.name]); // This will show "ONE"
console.log(communication["mrid"]); // This will also show "ONE"
console.log(communication["xyzz"]); // This will display "TWO"
console.log(communication[userXYZZ.name]); // This will show "TWO"

Something odd going on with JavaScript object maps

Answer №1

Answer №2

Answer №3

Similar questions

Tips for avoiding divs from overlapping when the window size is modified

Is it the browser's responsibility to convert ES6 to ES5 internally?

Images within inline blocks appear to be extending beyond their containing div as though they are

Optimal strategies for designing navigation bars on contemporary websites

Is it possible to generate grid options dynamically for various tables within AngularJS using ui-grid?

Shut down the active tab

Error encountered while using XLSX.write in angular.js: n.t.match function is not recognized

A guide on accessing a particular element within an array using MikroC

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

What is the method for combining two SC.RecordArray instances in Sproutcore?

The absence of a form data boundary in the content-type of the POST request header

Adding routes dynamically in nodeJS using Express is a powerful way to manage your server

What is the best way to iterate over an indexed attribute in PHP?

Creating basic pairings in PHP

props remain undefined even after being assigned in the redux store

Extension: What is the best way to leverage data obtained from an ajax request in order to dynamically modify an already existing element within

Is it viable to execute a reload on the same location and subsequently activate a click function?

What is the best way to update specific values in a react multiselect component?

Ways to avoid submitting based on the outcome of AJAX requests

Creating a render function that includes the img.src parameter requires careful thought and consideration