DEV Community: Monica Gerard

JavaScript: Using the Map Object

Monica Gerard — Tue, 01 Mar 2022 05:04:08 +0000

The Map object in JavaScript bears a strong resemblance to the standard Object that uses key/value pairs. However, it comes with its own set of methods that makes key/value pairs a breeze to work with, and in some cases provides distinct advantages over standard objects.

Here's a quick summary of the differences between the Map object and an Object object:

Map Methods

new Map()

Create a map object by passing an array of key/value pairs to the constructor:



let pets = new Map([
  ["dog", "Fido"],
  ["cat", "Milo"],
  ["bird", "Polly"]
])
console.log(pets)



Map(3) { 'dog' => 'Fido', 'cat' => 'Milo', 'bird' => 'Polly' }

.set()

You can add new key/value pairs to a Map object with .set():



pets.set("turtle", "Yertle")
console.log(pets)



Map(4) {
  'dog' => 'Fido',    
  'cat' => 'Milo',    
  'bird' => 'Polly',  
  'turtle' => 'Yertle'
}

.get()

Use the .get() method to use the key to get a value:



let myTurtle = pets.get("turtle")
console.log(myTurtle)



Yertle

.size

The size property will give you the number of key/value pairs in your Map object:



console.log(pets.size)

.has()

The .has() method will indicate whether or not a key exists in the Map object



console.log(pets)
console.log(pets.has("cat"))
console.log(pets.has("armadillo"))



Map(4) {
  'dog' => 'Fido',
  'cat' => 'Milo',
  'bird' => 'Polly',
  'turtle' => 'Yertle'
}
true
false

.forEach()

.forEach() will invoke a callback function for each key/value pair:



let petList = ""
pets.forEach( (value, key) => {
    petList += key + ": " + value + "\n"
})
console.log(petList)



dog: Fido
cat: Milo
bird: Polly
turtle: Yertle

.entries()

.entries() returns an iterator object that includes the key/value pairs:



let petList = ""
for (const pet of pets.entries()) {
  petList += pet + "\n"
}
console.log(pets.entries())
console.log(petList)



[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'bird', 'Polly' ],  
  [ 'turtle', 'Yertle' ]
}
dog,Fido
cat,Milo
bird,Polly
turtle,Yertle

.keys()

.keys() returns an iterator object that contains the Map object's keys:



console.log(pets.keys())

let petsKeys = ""
for (const pet of pets.keys()) {
  petsKeys += pet + "\n"
}
console.log(petsKeys)



[Map Iterator] { 'dog', 'cat', 'bird', 'turtle' }
dog
cat   
bird  
turtle

.values()

.values() returns an iterator object that contains the Map object's values:



console.log(pets.values())

let petsValues = ""
for (const pet of pets.values()) {
  petsValues += pet + "\n"
}
console.log(petsValues)



[Map Iterator] { 'Fido', 'Milo', 'Polly', 'Yertle' }
Fido
Milo
Polly
Yertle

.delete()

.delete() removes an element from a Map object:



console.log(pets.entries())
pets.delete("bird")
console.log(pets.entries())



[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'bird', 'Polly' ],  
  [ 'turtle', 'Yertle' ]
}
[Map Entries] {
  [ 'dog', 'Fido' ],    
  [ 'cat', 'Milo' ],    
  [ 'turtle', 'Yertle' ]

.clear()

And finally, .clear() removes all the elements from the Map object:



console.log(pets)
pets.clear()
console.log(pets)



Map(4) {
  'dog' => 'Fido',    
  'cat' => 'Milo',    
  'bird' => 'Polly',  
  'turtle' => 'Yertle'
}
Map(0) {}

With all these useful methods, the Map object provides an efficient and intuitive interface for working with key/value pairs. Consider implementing one in place of the standard object in your next application!

Happy Coding!

JavaScript: Number conversions using parseInt() and toString()

Monica Gerard — Mon, 21 Feb 2022 20:33:16 +0000

Anyone who codes in JavaScript regularly has made use of parseInt() to convert an integer that's expressed as a string into an actual number type that one can use in calculations.

The MDN defines the use of parseInt() as follows:

parseInt(string)
parseInt(string, radix)

string is the value to parse. In the case that it's not a string type, it is internally converted to a string before the parsing occurs.

radix is a value between 2 and 36 which is the base of the string parameter value. It does NOT default to base 10 if this parameter is omitted. For example, a string with the prefix "0x" will default to base 16, hexadecimal. To learn in greater detail how various inputs are treated, please refer to the MDN article on parseInt() for more details.

parseInt()

parseInt() can be used to convert numbers to and from various bases if one understands how the radix parameter functions.

For example:

parseInt("23", 4)
parseInt("0x23")
parseInt("23", 2)

will output:

11
35
NaN

In each case we are answering the question: "What is the base 10 value of 23 in base 4? in base 16? in base 2?"

"23" in base 4 is 2 * 4 + 3, or 11 in base 10.
"0x23" implies base 16. 2 * 16 + 3, or 35 in base 10
"23" in base 2 is NaN, since base 2 digits can only include 0 and 1.

Imagine how useful this could be if someone needs you to quickly interpret binary "1110010"!

parseInt("1110010", 2)

will give us the correct base 10 number:

toString(radix)

Using toString(radix) with a number object overrides the the Object object method toString(). When used with number objects, toString(radix) returns a string representation of the number object in the specified base.

toString(radix) answers the question: "How do I write the value 23 in base 4? in base 16? in base 2?"

let num = 23

num.toString(4)
num.toString(16)
num.toString(2)

And the output:

113
17
10111

In effect, parseInt() and toString() act as inverses of each other:

let num = 23

parseInt(num.toString(4), 4)
parseInt(num.toString(16), 16)
parseInt(num.toString(2), 2)

And the result:

23
23
23

toString(2) is particularly useful if you need to generate the binary representation of a number for any reason. Or how about converting a hexadecimal number (base 16) into its binary equivalent?

parseInt("1F4", 16).toString(2)

"111110100"

(in case you were wondering, this is 500 in base 10!)

I hope this brief exploration of these two related methods leaves you with a greater understanding of how they go beyond converting integers to strings and vice versa. They can be used to translate numbers to and from other bases, as well!

Happy Coding!

JavaScript: Using the spread operator with nested objects

Monica Gerard — Mon, 14 Feb 2022 16:48:33 +0000

Wouldn't it be nice if copying objects were as simple as reassigning them to new objects?

const object = {
  One_A: true,
  One_B: true,
  One_C: {
    Two_A: true,
    Two_B: {
      Three_A: true,
    },
  },
}

const newObject = object
newObject.One_C.Two_B.Three_A = false

console.log("newObject: ", newObject)
console.log("object: ", object)

Assigning object to newObject will give us these results in the console:

OUTPUT:

newObject:  {
  One_A: true,
  One_B: true,
  One_C: { Two_A: true, Two_B: { Three_A: false } }
}
object:  {
  One_A: true,
  One_B: true,
  One_C: { Two_A: true, Two_B: { Three_A: false } }
}

Changing a value at any level in newObject changed the value in object. Why? Objects in Javascript are passed by reference, not value. The top-level object and each nested object of newObject share the exact same locations in memory to those of object. Passing by reference means you are assigning the address location to newObject. Make a change in newObject, and you change object.

Fortunately, the spread operator ... can be used to make a true copy of object, one that can't be altered by changes to the copy.

Well, it's actually not QUITE that simple, I'm afraid. Let's see why.

const object = {
  One_A: true,
  One_B: true,
  One_C: {
    Two_A: true,
    Two_B: {
      Three_A: true,
    },
  },
}

const newObject = { ...object }
newObject.One_A = false
newObject.One_B = false
newObject.One_C.Two_A = false
newObject.One_C.Two_B.Three_A = false

console.log("newObject: ", newObject)
console.log("object: ", object)

And the result:

newObject:  {
  One_A: false,
  One_B: false,
  One_C: { Two_A: false, Two_B: { Three_A: false } }
}
object:  {
  One_A: true,
  One_B: true,
  One_C: { Two_A: false, Two_B: { Three_A: false } }
}

Ok, we did pretty well with not changing the top-level elements, but unfortunately, the nested objects at level 2 and 3 WERE changed.

The reason is this:

The spread operator only creates a new address location for the top-level elements. Any nested objects of newObject are still at the same address locations as the nested objects of object.

This means that we need to apply the spread operator at every level we want make a true value copy. So what would that look like?

const object = {
  One_A: true,
  One_B: true,
  One_C: {
    Two_A: true,
    Two_B: {
      Three_A: true,
    },
  },
}

const newObject = { ...object, One_C: { ...object.One_C } }
newObject.One_A = false
newObject.One_B = false
newObject.One_C.Two_A = false
newObject.One_C.Two_B.Three_A = false

console.log("newObject: ", newObject)
console.log("object: ", object)

The output:

newObject:  {
  One_A: false,
  One_B: false,
  One_C: { Two_A: false, Two_B: { Three_A: false } }
}
object:  {
  One_A: true,
  One_B: true,
  One_C: { Two_A: true, Two_B: { Three_A: false } }
}

This is better - we managed to protect level 2 of object, but we still have to protect the level 3 nested object. And this is what that looks like:

const object = {
  One_A: true,
  One_B: true,
  One_C: {
    Two_A: true,
    Two_B: {
      Three_A: true,
    },
  },
}

const newObject = {
  ...object,
  One_C: { ...object.One_C, Two_B: { ...object.One_C.Two_B } },
}
newObject.One_A = false
newObject.One_B = false
newObject.One_C.Two_A = false
newObject.One_C.Two_B.Three_A = false

console.log("newObject: ", newObject)
console.log("object: ", object)

And FINALLY:

newObject:  {
  One_A: false,
  One_B: false,
  One_C: { Two_A: false, Two_B: { Three_A: false } }
}
object:  {
  One_A: true,
  One_B: true,
  One_C: { Two_A: true, Two_B: { Three_A: true } }  
}

As you can see, it starts to get quite messy the more levels of nested objects you have. Fortunately, there are several JavaScript libraries such as Immer that make deep-cloning nested objects fairly intuitive. But if you find yourself having to rely on only using the spread operator, going step-by-step through the layers is the best way to avoid mistakes. Ask yourself:

First, which objects do I want to protect?

object, One_C:, Two_B:

Next, set up the nesting structure with curly braces:

{ object, One_C: { , Two_B: {} } }

Finally add the spread operators, making sure you access each object:

const newObject = {
  ...object,
  One_C: { ...object.One_C, Two_B: { ...object.One_C.Two_B } }
}

Remember that the top level is protected by the spread operator. ...object protects level 1, ...object.One_C protects level 2, and ...object.One_C.Two_B protects level 3.

Understanding how to deeply-clone nested objects is essential for so many JavaScript tasks, particularly when we have to avoid mutating state objects in frameworks such as React/Redux. I hope you find this brief illustration of how to use the spread operator to get to all levels of your object helpful.

Happy coding!