Hello world, in this post, I will guide you to better understand the map() method in javascript. Let's get started.

What Is The Array.Map() Method ?

The map method creates a new array, this new array contains the result of a function, that is executed on every element in the provided array.

What this means is that, you define a task or function that you want to execute on each element of an array, this task will be executed and the result stored in a new array.

When To Use The Array.Map() Method

Supposing you have an array of elements Eg.

const myNumArr = [2, 8, 12, 1]

or an array of objects, for instance

const userName=[{firstName: "Ama", lastName: "Antwi", firstName:"Kwasi",  lastName:"Dankwah", firstName:"Yaw", lastName:"Dabo"}]

Let's say you want to apply some task (modify or manipulate) each element in the array so you get a new array which contains the modified elements, then, the array.map() method is your best choice. The Array.map() method is commonly used to apply some changes to elements, whether multiplying by a specific number or doing any other operations that you might require for your application

How To Use Array.map() method

The syntax for the array.map() method is

//using arrow function
map((element, index) => { ... } )

To manipulate each element in the array, you will need to provide the map method with a function termed as the callback function.

This callback function will be the task you want to execute on each element or item in the array. Each time the callback function is executed on each element, the returned value is added to the new Array. The callback function will have the following parameters

• Element: This is the current element or item being processed in the array

• Index (Optional): The index (position) of the current element being processed in the array

The Task To Be Executed On Each Element

The task to be executed on each element in the array will now be dependent on you, but it can be simple as

• Multiplying each element in the array by the number 2
• Appending a text to each element in the array
• Grabbing all the first names in an array of object

Let now take a look at how to execute the task above using the array.map() method

Multiplying Each Element In The Array

const myNumArr = [2, 8, 12, 1]
//pass a function to the map method, the function multiplies each element in the array by 2
const newNumArr = myNumArr.map(element => element * 2)

console.log(newNumArr)
//expected output will be 
[4, 16, 24, 2]

Appending A Text To Each Element In The Array

In this instance, let's assume you want to append a text "My name is" to each name in the array defined below

const myNames =['Kofi', 'Sam', 'Ama']

This is how to achieve it using the map method

//define the array to modify
const myNames = ['Kofi', 'Sam', 'Ama']
//pass a function to the map method, the function will append a text to each name in the array
const newNames = myNames.map(name => {return 'My name is ' + name});
console.log(newNames)
//expected output
['My name is Kofi', 'My name is Sam', 'My name is Ama']

Grabbing The First Name From An Array Of Object

Lastly, let's see how we can use the map method, to grab only the first name from an array of object, each object comprising of the users first and last name

//define the array to modify 
const userName = [{firstName: "Kofi",  lastName: "Owusu"}, {firstName : "Ama" , lastName: "Serwaa"}]
//pass a function to the map method, the function will grab the first names only 
const firstName = userName.map(name => { return  name.firstName});
console.log(firstName)
//expected output 
['Kofi', 'Ama']

Wrapping Up

To sum up, we took a look at one of the most useful array methods, the .map() method. The map method is useful when you want to iterate through each item in an array so you can modify or manipulate the items. It returns a new array of the result of the callback function provided to it.

Hope you learnt something useful to build your JS muscle ? Would love to read your feedback.

See you in the my next post on the array.filter() method