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

avatar
Borislav Hadzhiev

Last updated: Mar 4, 2024
4 min

banner

# 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.
index.js
const arrOfObj = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, ]; const arr = arrOfObj.map(object => object.name); console.log(arr); // ๐Ÿ‘‰๏ธ ['Alice', 'Bob']

convert array of objects to array of values

The code for this article is available on GitHub

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.

The Array.map() method doesn't mutate the original array, it returns a new array.

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

index.js
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.

index.js
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.

index.js
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.

index.js
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']

dealing with missing properties

The code for this article is available on GitHub

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

index.js
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.
index.js
const arrOfObj = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, ]; const arr = []; arrOfObj.forEach(object => { arr.push(object.name); }); console.log(arr); // ๐Ÿ‘‰๏ธ ['Alice', 'Bob']

convert array of objects to array of values using foreach

The code for this article is available on GitHub

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

The forEach() method returns undefined, so we have to declare a variable that will store the state from iterating over 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
index.js
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']

convert array of objects to array of values using for of

The code for this article is available on GitHub

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.

index.js
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']

convert array of objects to array of values using for

The code for this article is available on GitHub

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:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev