Search⌘ K
AI Features
Home
Courses
Step Up Your JS: A Comprehensive Guide to Intermediate JavaScript

Map

Explore how to implement and use the JavaScript Array.map method to efficiently transform arrays. Understand writing your own map function, passing callback functions to customize transformations, and handling array elements with the index and original array parameters. This lesson equips you with key skills to apply functional programming principles in JavaScript array operations.

We'll cover the following...

Array.map

Learn how Array.map works by writing it yourself.

This function allows us to manipulate data effectively and efficiently. It’s meant to copy an array and change it a little bit in the process. You’ll be using it for the rest of your JavaScript career.

Array.map is meant to transform one array into another by performing some operation on each of its values. The original array is left untouched and the function returns a reference to a new array.

Because the original data source, the original array, is left untouched, Array.map is a pure function. It’s the first of a few methods that will allow us to really use functional programming to perform useful tasks, without feeling like we’re adding complexity.

Introduction

Let’s say we have an array of numbers and we want to multiply each number by three. We also don’t want to change the original array. To do this without Array.map, we can use a standard for-loop.

for-loop

Javascript (babel-node)
const originalArr = [1, 2, 3, 4, 5];
const newArr = [];
for(let i = 0; i < originalArr.length; i++) {
    newArr[i] = originalArr[i] * 3;
}
console.log(newArr); // -> [3, 6, 9, 12, 15]

Simple enough. Let’s abstract this loop into its own function so that we can turn any array we like into a new array with ...