How to use map method in JavaScript

Knowing how to use map method in JavaScript is a great step in learning about many ways to manipulating array items in JavaScript. And just like other array methods, map is a very powerful array method and it is super easy to use. Some key features about map method are listed below

• It requires a call back function
• Map  returns a new array
• It does not change the size of the original array

With map array method, you can modify what you want to return from the map operation

Having known this, let us take a very simple example to illustrate the above listed points.

Assuming we having an array of cars like

const cars = ['Toyota', 'Golf', 'BMW', 'Volvo', 'Ford', 'Mercedes'];

Remember map method requires a callback function and there are two ways we can write the call back function

1. Writing the callback function directly in the map parentheses
2. Using a function reference

One thing to keep in mind is that, regardless of how you write it, the result will be the same, so I will use both ways in this example

So to perform a map operation on the cars array, we go like this;

Using direct callback function

const mapCars = cars.map(function (car) {
  return 'direct callback function';
});

We assign it to a variable mapCars so that we can display the result on the console, and when you log it on the console using console.log(mapCars), this should appear on your console

(6) ['direct callback function', 'direct callback function', 'direct callback function', 'direct callback function', 'direct callback function', 'direct callback function']

Notice we have six strings of “direct callback function” returned from the map operation, this is because the array contains six items and remember one of the features of map is that, it does not change the size of the original array.

Using direct callback function

A good practice is to first create the callback function, you can as well create it after referencing it, it will still look around the project and find the function.

function callBackreference(car) {
  return 'reference function';
}

And then pass in the function name in the map parentheses

Note: do not pass the name and invoke the function like callBackreference(), that is not the correct way, the correct way is just passing the name like callBackreference without any parentheses

const newCars = cars.map(callBackreference);
once you log newCars in your console, this is what you will have

(6) ['reference function', 'reference function', 'reference function', 'reference function', 'reference function', 'reference function']

This is just a simple example but it clearly illustrate the points stated above that we can return whatever we want from the map operation and not just the items of the array.

So let us make this example a bit more interesting

Task: what we want to do is that, whenever we perform the map operation, it should return each car and a fixed price. We want to display the result on our browser using InnerHtml.

Html 
<div class="cars"></div>
Css
body{
  background-color: black;
}
.cars{
  width: 250px;
  height: 310px;
  color: blue;
  font-weight: 700;
  padding: 15px;
  background-color: white;
  text-transform: uppercase;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

JavaScript

const carDiv = document.querySelector('.cars');
const price = '$200';
const carsANDprice = cars.map(function (car) {
// the car parameter represents each car in the cars array
  return `<h3>${car}  ${price}</h3>`;
});
carDiv.innerHTML = carsANDprice

if you run the code above successfully, you will notice the cars are displayed in your browser but in between them, there are commas “,”, so to fix that, instead of using carDiv.innerHTML = carsANDprice

use

carDiv.innerHTML = carsANDprice.join(”)

The join is also an array method that is used to join multiple arrays or multiple strings of array item into a single object, and the reason we pass in quote is just to get rid of the commas. So at the end of the program, this is what you should see on your web browser

There are more things you can do with map but hopefully you were able to understand how to use map array method in JavaScript. Here are other JavaScript methods which can be use to add / delete items from array.