Prepare for a backend job by mastering computer science fundamentals

JavaScript Map Function Explained - A Deep Dive

By Lane Wagner on Jan 12, 2020

The built-in JavaScript map function returns a new array, where each element in the new array is the result of the corresponding element in the old array after being passed through a callback function. Later in the article, we’ll do a deep dive into some more advanced concepts regarding the map function and its uses.

Map Function Syntax

Example Usage

let newArray = callback(currentValue, index, array) {
    // return element for new_array
}, thisArg)

The Array object’s built-in map method takes a function definition as its first parameter. The function whose definition we pass in will have 3 arguments available to it and will be called for each element in the original array. Each return value that the function creates will be the elements for the new array.

For instance, a simple example would look like:

const oldArray = [1, 4, 9, 16];

function double(val, index, arr){
  return val * 2

const newArray =;

// newArray = [2, 8, 18, 32]

There is also an optional second parameter to the map function that we will go over later, a way to override this.

A simple path to your career in backend development

The pace of's JavaScript, Python and Go courses has been perfect for me. The diverse community in Discord is a blast, and other members are quick to help out with detailed answers and explanations.

- Daniel Gerep from Cassia, Brasil

Syntactic Sugar

In the above example, in order to double each value in the original array, we only used the val argument. It’s extremely common to only care about the val argument in the map function. When that’s all we need we can simplify the syntax, and even throw in some es6 arrow functions:

const oldArray = [1, 4, 9, 16];

const double = arr => arr * 2;

const newArray =;

// newArray = [2, 8, 18, 32]

By only specifying one argument in our function definition, the interpreter will only give our function the val parameter, which is okay if it’s the only thing we care about.

We can also use an anonymous function, which means defining the function in the map’s input instead of giving it a name. This keeps our code clean and readable (assuming we don’t need to reuse the callback function elsewhere)

const oldArray = [1, 4, 9, 16];

const newArray = => arr * 2);

// newArray = [2, 8, 18, 32]

Index Parameter

If you remember from earlier, the callback function definition has a second parameter, the index:

function callback(currentValue, index, array)

By using the index parameter we can do some more interesting calculations based on the position in the array:

const oldArray = [1, 4, 9, 16];

const newArray =, index) => {
  return val * index

// newArray = [0, 4, 18, 48]

Get backend development jobs by learning CS

I was a field service engineer and I wanted to become a backend developer, but work and family limited my options. Since completing the backend-focused computer science track on, I now have a job offer in hand and I'm starting my career as a software developer!

- Özgür Yildirim from Germany

Array Parameter

The third and final parameter made available to our callback is a copy of the original array. This can be useful if we care about more than just the value or index that we are currently operating on. We can look forward or backward in the array and use other elements as part of our mapping:

const oldArray = [16, 9, 4, 1];

const newArray =, index, arr) => {
  let nextItem = index + 1 < arr.length ? arr[index + 1] : 0
  return val - nextItem;

// newArray = [7, 5, 3, 1]

Overriding ‘This’

The map function has an often-overlooked optional second parameter. We can provide an object that will become ‘this’ within the scope of our callback.

let newArray =, thisArg)

For example, maybe we have a callback that is used in other places in our code, and we want to reuse it, but we just need to change the environment it operates in:

const oldArray = [1, 4, 9, 16];

function ourFunc(val, index, arr){
  return val * this.windowSize

const newArray =, {windowSize: 10});

// newArray = [10, 40, 90, 169]

Now we can reuse that callback, but change its parameters by modifying ‘this’.

Become a backend engineer by building real projects

Related Reading