Converting array of objects using map

Converting an array of objects using map() is a fundamental technique in JavaScript. For example, if you’ve retrieved a dataset from an API but only need to display or store certain fields, you can transform the data like this:

const users = [
  { firstName: "Alice", lastName: "Johnson", email: "alice@example.com", isActive: true },
  { firstName: "Bob", lastName: "Smith", email: "bob@example.com", isActive: false },
  { firstName: "Charlie", lastName: "Brown", email: "charlie@example.com", isActive: true }
];

const transformedUsers = users.map(user => ({
  fullName: `${user.firstName} ${user.lastName}`,
  email: user.email,
  status: user.isActive ? "active" : "inactive"
}));

console.log(transformedUsers);

Why use map() instead of a forEach() loop?

map() is used to transform data and returns a new array based on the return value of each item. forEach() just loops through items and doesn’t return anything. If you’re building a new array, map() is the cleaner and more functional approach.

Does map() mutate the original array?

A: No. map() is non-mutating — it returns a brand-new array and leaves the original one untouched. That’s great for avoiding side effects and keeping your code predictable.

Can I use map() with objects inside objects?

Yes! You can access nested properties within map() just like normal:

users.map(user => user.profile.firstName)

What if I want to add new keys to the transformed object?

A: You can include as many new or computed properties as you’d like:

map(user => ({
  fullName: `${user.firstName} ${user.lastName}`,
  initials: `${user.firstName[0]}${user.lastName[0]}`,
  ...
}))