.map in javascript

Exploring the .Map() Method in JavaScript Array

by

Are you ready to explore the power of the .map() method in JavaScript arrays.

In this article, you’ll learn how to use this non-mutating method to create new arrays by calling a specific function on each element in the parent array.

With examples and explanations, this article will guide you through the process of using the .map() method to transform your data.

What is .map() method in JavaScript?

The .map() method in JavaScript is used to create a new array by calling a specific function on each element present in the parent array.

One of the key features of the .map() method is that it is a non-mutating method.

It simply means you can use it to create new arrays with transformed data without affecting the original data.

The function passed to the .map() method is called for each element of the array, and its return value is used to construct the new array.

The .map() method is a powerful tool for managing data in JavaScript.

Syntax

array.map(callbackFn(currentValue, index, array), thisArg ) ✅

Parameter

callbackFn (Required)

A function to execute for each element in the array. Its return value is added as a single element in the new array.

The function is called with the 3 following arguments:

currentValue (Required)

The value of the current element being processed in the array.

index

The index of the current element being processed in the array.

array

The array map() was called upon.

thisArg (Optional)

A value to use as this when executing callbackFn.

Return value

The return value of the .map() method in JavaScript is a new array with each element being the result of the callback function.

It means that the .map() method takes an array, applies a transformation to each element using the provided callback function, and returns a new array with the transformed elements.

Examples usage of .map() method in JavaScript

Here’s an example that returns a new array with the square root of all element values:

const samplenumbers = [16, 36, 49, 64];
const samplenewArr = samplenumbers.map(Math.sqrt) ✅
console.log(samplenewArr);

Output:

[ 4, 6, 7, 8 ]

You can also use .map() to apply more complex transformations to the elements of an array.

For example, here’s how you can multiply all the values in an array by 5:

const samplenumbers = [5, 4, 3, 2];
const samplenewArr = samplenumbers.map(sampleFunction) ✅
function sampleFunction(num) {
return num * 5;
}
console.log(samplenewArr);

Output:

[ 25, 20, 15, 10 ]

On the other hand, here’s the example code that demonstrates how to use the .map() method to transform the persons array:

const persons = [
{firstname : "Andrea", lastname: "Brill"},
{firstname : "Bea", lastname: "Fort"},
{firstname : "Criz", lastname: "Chu"}
];

const fullNames = persons.map(function(person) ✅ {
return person.firstname + ' ' + person.lastname;
});

console.log(fullNames);

In this example, we use the .map() method to create a new array fullNames with the full names of all persons in the persons array.

The callback function passed to the .map() method takes a person object as an argument and returns the concatenation of the firstname and lastname properties.

Output:

[ 'Andrea Brill', 'Bea Fort', 'Criz Chu' ]

Conclusion

The .map() method in JavaScript is a powerful tool for managing data. It allows you to create new arrays by calling a specific function on each element present in the parent array.

The function passed to the .map() method is called for each element of the array, and its return value is used to construct the new array.

With its non-mutating nature, you can use it to create new arrays with transformed data without affecting the original data.

We are hoping that this article provides you with enough information that help you understand the .map in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment