While beginning my journey into learning JS after coming from Ruby, I struggled with learning how to properly use JS’ many iterators, especially .map.

The iterator .map is an Array.prototype method that is super useful when you need to perform certain actions on every single element in an array but also preserve the original array. The return value for .map is a new array so it is very easy to get new representations of data by using it.

The syntax of .map is very easy to follow once you are a bit familiar with JS and can be broken down into a few parts.

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
//Courtesy of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The most important parts are as follows:

  • Callback — The callback is a function that .map will preform on every element in the array that is passed into it. This new value created by this callback function will then be stored into a new array.
  • currentValue — The current value is the current element being passed in. It is a placeholder that acknowledges the fact that .map will be iterating through the entire collection of data within the array.

The rest of the parts of that expression are all options that you may or may not add in when using .map. Let’s look at some example code now.

var numbers = [65, 44, 12, 4];
var newarray = numbers.map(mulTwo)

function mulTwo(num) {
return num * 2;
}

In this example, we take each number in the array and multiply it by two using the function mulTwo.

Map is an extremely useful iterator that should be used when trying to make new, non-destructive interpretations of data. Use it well!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store