Creating and manipulating Arrays in JavaScript is a task that a JavaScript developer does on a daily basis. In this tutorial, you’ll see how to use JavaScript Map method for Array manipulation to reduce your code and make it more readable.

Let’s have a look at the following example:

let employees = [
    { "first_name": "Hari", "last_name": "Krishnan" },
    { "first_name": "Samuel", "last_name": "Jackson" },
    { "first_name": "Suriel", "last_name": "Johnson" },
    { "first_name": "Roy", "last_name": "Agasthyan" }
];
let full_names = []

let name;

for (let i = 0; i < employees.length; i++) {
    name = employees[i]["first_name"] + ' ' + employees[i]["last_name"]
    full_names.push(name)
}

console.log(full_names)

//  [ 'Hari Krishnan',
//  'Samuel Jackson',
//  'Suriel Johnson',
//  'Roy Agasthyan' ]

As seen in the above code, you have a list of employees in the employees variable. The purpose of the above code is to iterate through the list of employees and concat the first name and the second and create another list with the full name of the employees. Now let’s see how to accomplish the above task using the JavaScript Map method.

Understanding JavaScript Map Method

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

The Map method when applied to an array, applies the provided function to each element of the array and returns a new array. Now let’s see how you can rewrite the above code using the JavaScript Map method and how it reduces the code and improves readablity. Here is how the JavaScript Array can be manipulated to return a new array with the full name of the employees using Map method:

let full = employees.map(function(emp) {
    return emp["first_name"] + ' ' + emp["last_name"]
});

console.log(full)

//  [ 'Hari Krishnan',
//  'Samuel Jackson',
//  'Suriel Johnson',
//  'Roy Agasthyan' ]

As seen in the above code, you have applied the JavaScript map method to the employee's array. Each item inside the array is being applied the callback function where the employee first name and last name are being concatenated to return the full name. The map method returns a new array with the full name of the employees. Now if you compare the above two set of codes, you can see the following plus points:

• You can get rid of the for loop
• You don’t need the full_names array to keep the concatenated names.

And if you define the callback function as a separate function it would add up to the readability point of view. Here is how you can do it:

let full = employees.map(get_full_name);

function get_full_name(emp){
    return emp["first_name"] + ' ' + emp["last_name"]
}