How to Extract Given Property Values from Objects as Array in JavaScript?

In JavaScript, working with arrays of objects is very common, especially when you are dealing with APIs or databases. Sometimes, you may find a need to extract values of a specific property from an array of objects and display them as a separate array. In this blog, we will explore different methods to extract the given property values from objects as an array, including map(), reduce(), for…of loop, and forEach().

Table of Contents:

• Understanding the Input and Output
• Different Methods to Extract Values
  • Method 1: Using map() Method
  • Method 2: Using reduce() Method
  • Method 3: Using for…of Loop
  • Method 4: Using forEach() Method
• Performance Comparison
• Handling Errors
  • Handling Missing Properties
  • Handling Empty Arrays
• Conclusion

Understanding the Input and Output

The problem is to get the given property values from objects as an array in JavaScript. But, before knowing more about the methods, let’s first understand the problem with the help of an example.

Input:

Output:

["IntellipaatLearner1", "IntellipaatLearner2", "IntellipaatLearner3"]

Explanation: You have an array of objects, each of which represents an Intellipaat Learner with three properties: id, name, and age. The problem is that, need to extract only the name property from each object and print the result in the form of an array of names.

Develop the Coding Skills Employers are Looking For

Get Job-Ready with Our Web Development Courses!

Explore Program

Different Methods to Extract Values

Let us explore each method for extracting a specific property as an array from an array of objects:

Method 1: Using map() Method

The map() method is the simplest way to get values from an array of objects in the form of an array. It creates a new array by applying a function to each element of the original array.

Example:

Output:

Explanation: In this example, the map() method is used to extract the property values from an array of objects. It will return a new array with the desired name values.

Method 2: Using reduce() Method

The reduce() method is also used to get the value from an array of objects. It helps you to collect values into a single result (array in this case).

Example:

Output:

Explanation: In this example, you’re using the reduce() method for extracting values from the array of objects. Here, you start with an empty array [], iterate over each element of the array of objects (obj), and print the final accumulated array containing only names.

Method 3: Using for…of Loop

A for…of loop can be used to iterate over the array of objects and push the required values into a new array.

Example:

Output:

Explanation: It is the traditional method for getting values from an array of objects and is more readable for beginners. 

Method 4: Using forEach() Method

The forEach() method is another way to iterate over the array. But not recommended for extracting values. It doesn’t return a new array.

Example:

Output:

Explanation: In this example, forEach() is used to extract the values from an array of objects. It is easy to use but less recommended.

Performance Comparison

Performance can be crucial when dealing with large datasets. Here is the comparison between each of the methods used to extract values in the form of an array from the array of objects:

Handling Errors

While extracting values from an array of objects and displaying them in the form of an array, you might get errors because of the following edge cases. Let’s discuss them one by one:

Handling Missing Properties

What can you do if some of the objects do not have the required property?

Example:

Output:

Explanation: In this example, the object with id:2 has a missing name value. Thus, the .map() method iterates over the array and prints Unknown if it does not get any value as name.

Handling Empty Arrays

If an array of objects is empty, then these methods return an empty array as output.

Example:

const emptyArray = [];
const result = emptyArray.map(item => item.name);
console.log(result);

Output:

Explanation: In this example, an empty array is there, and iterating over an empty array gives you an empty array back as output.

Conclusion

Extracting values from an array of objects in JavaScript is a common task. JavaScript provides various ways to do this, such as the map() method, which is simple and efficient. Other methods like reduce(), for…of, and forEach() can be used in cases where you have to add extra checks.

How to extract given property values from objects as an array – FAQs