Knowing the right Map🗺: .map() vs map()

As someone that’s learning the ins and outs of JavaScript and React I found myself becoming inspired, confused, and frustrated with .map() …sorry, I meant map()..hold on, I think .map() was right, then again...

Ok, so in this post I'm going to give you a short rundown on both so you'll know how to choose the right map.

Let’s get started!

.Map()

Array.prototype.map()

This one is a method that creates a new array with populated results from calling a function and iterating through each element within the array. So after it’s all said and done there are two arrays, the original and the array that was created or manipulated with the method.

I was first introduced to this through a React tutorial where EGATOR used it to populate a collection of portfolio projects.

After seeing this and how useful it was, I wanted to incorporate it into my portfolio, but first I needed to understand it more.

Here's a quick and simple example below:

const nums = [12,5,10,7];

I have a simple array with 4 values and I want to multiple every number in the array by 3.

First we create a variable and set it equal to the array with map like this.

const numsByThree = nums.map()

The Array map Method takes a function with two parameters, the current value (required) and the index (optional).

In this example the current value will be 'x'. In order to have the numbers multiplied by 3 we need to get each value in the array, then with an arrow function we take x and multiply it by 3. With everything put together it would look something like this.

const numsByThree = nums.map(x => x * 3)

The first x retrieves the value in each index then once it has the value it’s brought back to complete the action, multiply by 3.

Remember when I had said that with .map(), you’re essentially creating two arrays, well below you can see that we have two outputs with each array. If I were to change the value of the first array then the second would adjust to it.

const nums = [12,5,10,7];
///[12,5,10,7]
const numsByThree = nums.map(x () => x * 3)
///[36,15,30,21]

This type of map is only used in conjunction with an Array to help iterate through the data stored within it. So it can be really useful when you want to manipulate a lot of data from an array.

Map()

Map Object

A map object holds key-value pairs and remembers the original insertion order of the key. (MDN)

With the Map you have 10 methods:

• clear()
• delete(key)
• entries()
• get(key)
• has(key)
• keys()
• set(key,value)
• values()

When a for...of loop is used with it, it returns an array of the key and value, like this [key,value].

The key in the Map can be anything, a string, a number, symbol, it doesn't matter but not like an Object, I'll go over that in a future post.

Below is a quick snippet of how it works and how to store data.

You start by initializing a new map object by using new Map()

const contacts = new Map()

When adding data, you use the set() method, the first parameter is the key and the second is the value:

contacts.set('Roger', '213-555-1234')

To get the value we use get(). If we

console.log(contacts.get('Roger'));

we will get the phone number.

When it comes to the value parameter you can treat it like an object and include more information, like this:

contacts.set('Roger', {phone:'213-555-1234', type:'cell-phone', address:'412 N Street'})

The only downside to this I've found is that I cannot specifically pinpoint a value. So if I wanted to only output the address I can't. I can only output all the data that's stored under the key when I use .get().

console.log(contacts.get('Roger')); will yield

{
phone:"2123-555-1234",
type:"cell-phone",
address:"412 N Street"
}

So to sum it all up,

• .map() is a method of Array that allows you to retrieve and iterate through data within an array.

• map() is an object and it’s used to store data in a key, value pair.

If you are trying to manipulate data within an array then the Array Map Method is what you can use but on the other hand if you're trying to store data, this is where you would use the Map Object.

I hope this small post cleared up a lil confusion, but there are lots more information regarding the usage of .Map() and Map().