Use .map Instead of a for loop to Iterate over an Array

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

Whenever you want to loop over an array and create a new array based on each element in the first array, it's possible to use the map function on the array, instead of using a for loop. There are a few advantages to map over for, including shorter code that is more composable - meaning you can easily extract and reuse the function(s) that you're using. You can also chain multiple map calls together.

Instructor: [00:00] If we have an array of numbers and we want to turn that array into an array of strings, for each string has the number first, and the text days ago, except is the number is a one, where the text should be day ago.

[00:18] Then, one way we can do that is to make a new array and use the for loop to iterate over the entire array. In each iteration, we'll extract the number and build the string that we want, and push that on to the new array that we made.

[00:40] If we log the output, the network's just fine. Whenever we're looping over an array like this and pushing something on to the array in each iteration, we can simplify the process by using the map function on the original array.

[00:58] If we start without array and call down map that is a function, and the first argument to the function is the element from the array which is the number that we want in this case.

[01:09] From this function, we need to return whenever we want to go into a new array which is a new string which has days ago with the number, and now the entire map function returns the new array, so we can set this to a new array.

[01:26] If we log it and run it, we get exactly the same output, but the code is shorter and we don't need these temporary variables. Another reason to use map, is because it's easy to extract the inner function. Once we give that function a name, we can pass it into the map function by itself, because map just takes a function.

[01:51] It doesn't matter, if it's an inline function or reusable function from someone else. When we log and run that, it prints out the same thing again. Also, because the map function returns an array, it makes it very easy to chain the map functions together.

[02:07] If we had another function which prepends the text last accident to the input text, we can start by calling map with the days ago function like before and in just chain on another map, which is the new last accident function.

[02:23] When we log and run that, we get a new array of strings with both functions applied, and the code is significantly cleaner than the same operation would have been with the for loop.

egghead
egghead
~ 23 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today