Convert an Array of Objects to an Array of Values in JS

# Convert an Array of Objects to an Array of Values in JS

To convert an array of objects to an array of values:

1. Use the Array.map() method to iterate over the array.
2. On each iteration, return the value.
3. The map() method will return a new array containing the values.

Copied!
const arrOfObj = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const arr = arrOfObj.map(object => object.name);
console.log(arr); // 👉️ ['Alice', 'Bob']

The function we passed to the Array.map() method gets called with each element (object) in the array.

On each iteration, we access a specific property in the object to get an array of values.

The map() method returns a new array containing the values returned from the callback function.

We used an implicit return in the examples, but you can also use a function with a body and explicit return.

Copied!
const arr = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Carl'},
];

const ids = arr.map(obj => {
  return obj.id;
});
console.log(ids); // 👉️ [1, 2, 3]

You can also use destructuring assignment to only get the necessary values.

Copied!
const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carl' },
];

//                  👇️ destructuring
const ids = arr.map(({ id }) => {
  return id;
});
console.log(ids); // 👉️ [1, 2, 3]

We destructured the id property in the example.

An easy way to think about destructuring is that we are taking properties from the object and assigning their values to variables.

Copied!
const { id, name } = { id: 1, name: 'Alice' };

console.log(id); // 👉️ 1
console.log(name); // 👉️ "Alice"

# Dealing with missing properties

If the property you are accessing is not defined on some of the objects in the array, you will get undefined values in the new array.

Copied!
const arr = [
  { id: 1, name: 'Alice' },
  { id: 2 },
  { id: 3, name: 'Carl' }
];

const names = arr.map((obj) => obj.name);
console.log(names); // 👉️ ['Alice', undefined, 'Carl']

You can use the filter() method to remove the undefined values from the array.

Copied!
const arr = [{ id: 1, name: 'Alice' }, { id: 2 }, { id: 3, name: 'Carl' }];

const names = arr
  .map((obj) => obj.name)
  .filter((value) => {
    return value !== undefined;
  });
console.log(names); // 👉️ ['Alice', 'Carl']

The function we passed to the Array.filter method gets called with each element in the array.

The filter() method returns a new array that only contains the elements that meet the condition.

This way you can be sure the array won't contain any undefined values.

An alternative approach is to use the Array.forEach() method to iterate over the array.

# Convert an Array of Objects to an Array of Values using forEach()

This is a three-step process:

1. Declare a new variable and set it to an empty array.
2. Use the Array.forEach() method to iterate over the array.
3. On each iteration, push the current value into the new array.

Copied!
const arrOfObj = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const arr = [];

arrOfObj.forEach(object => {
  arr.push(object.name);
});

console.log(arr); // 👉️ ['Alice', 'Bob']

The function we passed to the Array.forEach method gets called with each element (object) in the array.

The last step is to push the values into the new array.

Which approach you pick is a matter of personal preference. The Array.map() method is more direct and concise.

When using forEach(), we have to declare an intermediate variable to store the state from looping over the array.

# Convert an Array of Objects to an Array of Values using for...of

This is a three-step process:

1. Declare a new variable and initialize it to an empty array.
2. Use a for...of loop to iterate over the array.
3. On each iteration, push the current value into the new array

Copied!
const arrOfObj = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const arr = [];

for (const object of arrOfObj) {
  arr.push(object.name);
}

console.log(arr); // 👉️ ['Alice', 'Bob']

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we access the specific property and push its value into the new array.

# Convert an Array of Objects to an Array of Values using for

You can also use a basic for loop to convert an array of objects to an array.

Copied!
const arrayOfObjects = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
];

const arr = [];

for (let index = 0; index < arrayOfObjects.length; index++) {
  arr.push(arrayOfObjects[index].name);
}

console.log(arr); // 👉️ ['Alice', 'Bob']

The syntax of a basic for loop is quite verbose and involves working with the index of the current iteration.

Which approach you pick is a matter of personal preference. I'd use the Array.map() method because I find it quite direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to convert an Array to a Map in JavaScript
• Convert Array of Strings to Array of Numbers in JavaScript
• Convert all Array Elements to Uppercase or Lowercase in JSkj