DEV Community

kumar_lav
kumar_lav

Posted on

1

Finding Your Way With .Map()

The map method allows us to transform each element of an array, without affecting the original array. It’s considered a higher-order function and a functional programming technique because it takes a function as an argument and we are performing computation without mutating the state of our application.

Map is a property that is inherited from the array prototype. Prototypes provide built-in-methods that objects come with (arrays are special types of objects in the eyes of JavaScript). While map may be a little more foreign, this prototype is no different than, for example, the Array.length prototype. These are simply methods that are baked into JavaScript. Array prototypes can be added and mutated by: Array.prototype. = ...

So what does .map() do?

Let’s say you have an array of temperatures in Celsius that you want to convert to Fahrenheit.

There are several ways to solve this problem. One way may be to write a for loop to create an array of Fahrenheit temperatures from the given Celsius temperatures.

With the for loop we might write:

const celciusTemps = [22, 36, 71, 54];
const getFahrenheitTemps = (function(temp) {
const fahrenheitTemps = [];
for (let i = 0; i < celciusTemps.length; i += 1) {
temp = celciusTemps[i] * (9/5) + 32
fahrenheitTemps.push(temp);
}
console.log(fahrenheitTemps); [71.6, 96.8, 159.8, 129.2
})();

**So how does a map work?

**
Map takes a function and applies that function to each element in the array. We could write a map a bit more verbose with ES5 to see this a bit more clearly.

const fahrenheitTemps = celciusTemps

   .map(function(elementOfArray) {
      return elementOfArray * (9/5) + 32;
   });
console.log(fahrenheitTemps); // [71.6, 96.8, 159.8, 129.2]
Enter fullscreen mode Exit fullscreen mode

Example

const people = [
   {name: Steve, age: 32},
   {name: Mary, age: 28},
   {name: Bill, age: 41},
];
const getNames = (function(person) {
   const names = [];
   for (let i = 0; i < people.length; i += 1) {
      name = people[i].name;
      names.push(name);
   }
   console.log(names); // [Steve, Mary, Bill];
})();
With map:

const names = people.map(e => e.name);
console.log(names) // [Steve, Mary, Bill];
Enter fullscreen mode Exit fullscreen mode

if you want to learn more deeply, reference this URL
https://www.freecodecamp.org/news/finding-your-way-with-map-aecb8ca038f6

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (2)

Collapse
 
turkijan083 profile image
Turkijan_DEV

Hi, I'm junior developer. Do you have any task for me?

Collapse
 
hashirdev profile image
Hashir Afzal

amazing and insightful.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay