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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay