How To Map Array Of Objects In Javascript

by

The map() function in JavaScript is a powerful and convenient way to transform an array of objects. It allows you to create a new array by applying a predefined function to each element in the original array. In this blog post, we will explore different ways to map an array of objects in JavaScript and some practical examples to help you get started.

Basic Syntax

First, let’s take a look at the basic syntax of the map() function:

const newArray = originalArray.map(callbackFunction(element, index, array));



The map() function takes a callback function as its argument, which is executed for each element in the original array. The callback function can take up to three parameters:


    

  • element: The current element being processed.
    • 

  • index (optional): The index of the current element being processed.
    • 

  • array (optional): The original array on which the map() function was called.
    • 



Mapping an Array of Objects


Now, let’s see how to map an array of objects using the map() function. We will use an array of user objects as an example:


const users = [
    { id: 1, name: "Alice", age: 30 },
    { id: 2, name: "Bob", age: 25 },
    { id: 3, name: "Charlie", age: 22 },
];



Example 1: Extracting Names from the User Objects


Let’s say we want to create a new array containing only the names of the users. We can use the map() function to achieve this:


const names = users.map(user => user.name);
console.log(names); // Output: ["Alice", "Bob", "Charlie"]



Example 2: Updating the Age of Each User


Suppose we want to increase the age of each user by one year. We can use the map() function to create a new array with the updated ages:


const updatedUsers = users.map(user => ({ ...user, age: user.age + 1 }));
console.log(updatedUsers);
// Output:
// [
//   { id: 1, name: "Alice", age: 31 },
//   { id: 2, name: "Bob", age: 26 },
//   { id: 3, name: "Charlie", age: 23 },
// ]



Conclusion


In this blog post, we learned how to map an array of objects in JavaScript using the powerful map() function. This function allows you to create a new array by applying a given callback function to each element in the original array. We also explored some practical examples, such as extracting a specific property from an array of objects and updating the values of an object’s property. With this knowledge, you can now start using the map() function to manipulate arrays of objects in your JavaScript projects.