Retrieve property value selectively from array of objects in JavaScript

When working with arrays of objects in JavaScript, you often need to extract specific property values based on certain conditions. This tutorial shows how to retrieve property values selectively from an array of objects.

Suppose we have an array of objects like this:

const arr = [
   { id : "23", name : "Item 1", isActive : true},
   { id : "25", name : "Item 2", isActive : false},
   { id : "26", name : "Item 3", isActive : false},
   { id : "30", name : "Item 4", isActive : true},
   { id : "45", name : "Item 5", isActive : true}
];

We need to write a JavaScript function that takes this array and returns an array of "id" property values for all objects where "isActive" is true.

Method 1: Using Traditional for Loop

The traditional approach uses a for loop with destructuring to extract the required values:

const arr = [
   { id : "23", name : "Item 1", isActive : true},
   { id : "25", name : "Item 2", isActive : false},
   { id : "26", name : "Item 3", isActive : false},
   { id : "30", name : "Item 4", isActive : true},
   { id : "45", name : "Item 5", isActive : true}
];

const findActive = (arr = []) => {
   const res = [];
   for(let i = 0; i < arr.length; i++){
      const obj = arr[i];
      const {
         id,
         isActive
      } = obj;
      if(isActive){
         res.push(id);
      }
   };
   return res;
};

console.log(findActive(arr));

[ '23', '30', '45' ]

Method 2: Using filter() and map() (Modern Approach)

A more modern and concise approach uses array methods to achieve the same result:

const arr = [
   { id : "23", name : "Item 1", isActive : true},
   { id : "25", name : "Item 2", isActive : false},
   { id : "26", name : "Item 3", isActive : false},
   { id : "30", name : "Item 4", isActive : true},
   { id : "45", name : "Item 5", isActive : true}
];

const getActiveIds = (arr) => {
   return arr
      .filter(obj => obj.isActive)
      .map(obj => obj.id);
};

console.log(getActiveIds(arr));

[ '23', '30', '45' ]

Method 3: Using reduce() for Single Pass

The reduce() method can accomplish the filtering and mapping in a single iteration:

const arr = [
   { id : "23", name : "Item 1", isActive : true},
   { id : "25", name : "Item 2", isActive : false},
   { id : "26", name : "Item 3", isActive : false},
   { id : "30", name : "Item 4", isActive : true},
   { id : "45", name : "Item 5", isActive : true}
];

const getActiveIdsReduce = (arr) => {
   return arr.reduce((result, obj) => {
      if (obj.isActive) {
         result.push(obj.id);
      }
      return result;
   }, []);
};

console.log(getActiveIdsReduce(arr));

[ '23', '30', '45' ]

Comparison

Conclusion

All three methods achieve the same result of extracting property values conditionally. The filter + map combination is most readable for simple cases, while reduce offers better performance for complex transformations in a single pass.