We are going to walk through the JavaScript map function, and I’ll explain how it works in a simple way. Later in the article, we will do a deep dive into some more advanced concepts regarding the map function and its uses. Map Function Syntax From Mozilla’s definition: newArray = oldArray.map( { }, thisArg) let ( ) function callback currentValue, index, array // return element for new_array The Array object’s method takes a function definition as its first parameter (required). 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. map A simple example would look like: oldArray = [ , , , ]; { val * } newArray = oldArray.map(ourFunc); const 1 4 9 16 ( ) function ourFunc val, index, arr return 2 const // 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 Syntactic Sugar In the above example, in order to double each value in the original array, we only used the argument. It is extremely common to only use the val argument in the map function. When this is the case, we can simplify our syntax, and even throw in some es6 arrow functions: val oldArray = [ , , , ]; ourFunc = arr * newArray = oldArray.map(ourFunc); const 1 4 9 16 const => arr 2 const // newArray = [2, 8, 18, 32] By only specifying only one argument in our function definition, the interpreter will only give our function the parameter, which is okay if its the only thing we care about. val 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) oldArray = [ , , , ]; newArray = oldArray.map( arr * ); const 1 4 9 16 const => 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: oldArray = [ , , , ]; newArray = oldArray.map( { val * index
}); const 1 4 9 16 const ( ) => val, index return // newArray = [0, 4, 18, 48] 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: oldArray = [ , , , ]; newArray = oldArray.map( { nextItem = index + < arr.length ? arr[index + ] : val - nextItem;
}); const 16 9 4 1 const ( ) => val, index, arr let 1 1 0 return // 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. newArray = oldArray.map(callbackFunction, thisArg) let 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: oldArray = [ , , , ]; { val * .windowSize
} newArray = oldArray.map(ourFunc, { : }); const 1 4 9 16 ( ) function ourFunc val, index, arr return this const windowSize 10 // newArray = [10, 40, 90, 169] Now we can reuse that callback, but change its parameters by modifying ‘this’. Thanks For Reading Lane on Twitter: @wagslane Lane on Dev.to: wagslane Download Qvault: https://qvault.io Star our Github: https://github.com/q-vault/qvault

Mozilla

Twitter

JavaScript Vs. Java:  Differences, Similarities and History of Creation

BitBanged SPI in Go [Explained]

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

Make resilience your competitive advantage

JavaScript Map Function Explained: A Deep Dive

JavaScript Map Function Explained: A Deep Dive

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

A Complete Overview of Cryptography

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps