Reminding Myself that Maps Store Objects by Reference Too

-

No matter how many times I revisit it, I have pretty consistent track record of being tripped up by how JavaScript assigns values to variables.

Primitives: Assigned by Value

Primitive values (numbers, strings, etc.) are assigned by value, meaning that assigning one variable to another variable assigned to a primitive value will result in two, distinct values being stored in memory. The entire value is copied.

const number1 = 100; 
const number2 = number1; 

// Variable / Memory Value: 
// number1 -> 100
// number2 -> 100

Objects: Assigned by Reference

Everything else (objects, including functions, arrays, etc.) are assigned by reference. Assigning a newly created object to a variable is actually creating a reference to that object’s location in memory. Any further variable assignments will also point to that exact same location.

const object1 = { someProperty: 'some value' };
const object2 = object1;

// Variable / Memory Value: 
// object1 -> { someProperty: 'some value' }
// object2 -> object1

And that’s why things like this work. If you mess with the properties of an object — no matter which variable is referencing it — that central value in memory will be changed, impacting every variable pointing to it.

let object1 = { someProperty: 'some value' };
let object2 = object1;
let object3 = object2;
let object4 = object3;
let object5 = object4;

object5.someProperty = 'some OTHER value!';

console.log(object1);
// { someProperty: 'some OTHER value!' }

A Map() Follows the Same Rules

This is a pretty fundamental concept in JavaScript, but that didn’t stop me from forgetting about it while dealing with a Map(). Just like a regular, old variable, a value inside a Map() is stored differently depending on the value’s type — primitive or otherwise. From MDN:

If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map object.

In my case, I was working with somthing like this (highly contrived):

const aMap = new Map();
const anObj = {
  name: 'Alex'
}

aMap.set('a', anObj);
aMap.set('b', anObj);
aMap.set('c', anObj);

aMap.get('c').name = 'Bob';

console.table(Array.from(aMap.entries()));

While I was intending to modify the name only by on the a key, the results prints as follows:

| (index) |  0  |        1        |
-----------------------------------
|    0    | 'a' | { name: 'Bob' } |
|    1    | 'b' | { name: 'Bob' } |
|    2    | 'c' | { name: 'Bob' } |

Bob is everywhere. In hindsight, this is no surprise. Primitives by value, objects by reference. If I want these values to be updated independently, the answer is to duplicate the object, reserving it a new, distinct place in memory:

const aMap = new Map();
const anObj = {
  name: 'Alex'
}

- aMap.set('a', anObj);
+ aMap.set('a', {...anObj});
- aMap.set('b', anObj);
+ aMap.set('b', {...anObj});
- aMap.set('c', anObj);
+ aMap.set('c', {...anObj});

aMap.get('c').name = 'Bob';

console.table(Array.from(aMap.entries()));

And with that, you’re released to update properties freely:

| (index) |  0  |        1         |
------------------------------------
|    0    | 'a' | { name: 'Alex' }  |
|    1    | 'b' | { name: 'Alex' } |
|    2    | 'c' | { name: 'Bob' } |

Just one “Bob,” as desired.

Only a Matter of Time

Stay tuned for another post basically covering the same concept within another context after it inevitably trips me up again.


Was this post helpful? Thanks for the feedback!

Get an email whenever I publish a new post or project.

I won't send you spam. Unsubscribe whenever.
my face

Alex MacArthur is a software developer working for Dave Ramsey in Nashville, TN. Soli Deo gloria.

Leave a Comment

0 comments