Get a Subset of Javascript’s Object Properties (4 ways)

While working with javascript objects, often, there is a requirement to get a subset of the properties of a javascript object. This article will discuss different ways to get a subset of properties of one object into a new object using various example illustrations.

Table of Contents:

• Get a Subset of Javascript Object using Object Desctructuring
• Get a Subset of Javascript Object using reduce()
• Get a Subset of Javascript Object using map()
• Get a Subset of Javascript Object by Writing a Custom Function

Get a Subset of Javascript Object using Object Destructuring

Javascript’s destructuring assignment syntax allows one to unpack properties from objects and then recombine them into an object using either variables or function parameters. 

Example:-

Create a subset of properties personName and dateOfSubmission from the below object

{ personName: ‘Ruby’, dateOfSubmission: “Nov 24 2021”, age: 25}

Code:-

const myOriginalObject =  { personName: 'Ruby', dateOfSubmission: "Nov 24 2021", age: 25};
//Object Destructuring
const newSubsetObject = (({ personName, dateOfSubmission }) => ({ personName, dateOfSubmission }))(myOriginalObject);
//print the new subset of properties
console.log(newSubsetObject); // personName: 'Ruby', dateOfSubmission: 'Nov 24 2021'

Output:-

{ personName: 'Ruby', dateOfSubmission: 'Nov 24 2021' }

Explanation:-

Here, in the above code, we are first unpacking the object myOriginalObject through personName, dateOfSubmission. Finally, we are packing these properties back into one object newSubsetObject.

Get a Subset of Javascript Object using reduce()

Javascript’s reduce() method is executed on all array elements, and the reducer callback function is run on them to pass the return value from the preceding calculation to the next. Finally, a single result gets returned after running the reducer on all array elements.

Example:-

Create a subset of properties personName and age from the below object

{ personName: ‘Ruby’, dateOfSubmission: “Nov 24 2021”, age: 25}

Code:-

const myOriginalObject =  { personName: 'Ruby', dateOfSubmission: "Nov 24 2021", age: 25};
//reduce()
  let selectedProperties =['personName', 'age' ];
  let newSubsetObject = selectedProperties.reduce(function (newObj, key)
   {
    if (key in myOriginalObject) 
    newObj[key] = myOriginalObject[key];
    return newObj;
  }, {});
console.log(newSubsetObject);

Output:-

{ personName: 'Ruby', age: 25 }

Explanation:-

Here, in the above code, we apply the reduce() function on the array selectedProperties. The arguments of the function are  the newObj and keys. In this new object (newObj), the keys are pulled from the selectedProperties array, and its corresponding value is taken from myOriginalObject. Finally, the newObj gets returned and assigned to the variable newSubsetObject.

Get a Subset of Javascript Object using map()

Javascript’s map() method will create a new array populated with results of executing a provided function on the array elements of the calling array.

Example:-

Create a subset of properties personName and dateOfSubmission from the below object

{ personName: ‘Ruby’, dateOfSubmission: “Nov 24 2021”, age: 25}

Code:-

const myOriginalObject =  { personName: 'Ruby', dateOfSubmission: "Nov 24 2021", age: 25};
let myOriginalObjectArray = [myOriginalObject];
const newSubsetObject = myOriginalObjectArray.map(obj => ({
  personName: obj.personName,
  dateOfSubmission: obj.dateOfSubmission
}))[0]
console.log(newSubsetObject);

Output:-

{ personName: 'Ruby', dateOfSubmission: 'Nov 24 2021' }

Explanation:-

Here, in the above code, we are apply the map() method on the elements of the array of myOriginalObject. Within the map(), a new object is created with properties personName and dateOfSubmission. This new object takes its corresponding values from myOriginalObjectArray.

Get a Subset of Javascript Object Writing a Custom Function

Example:-

Create a subset of properties personName and age from the below object

{ personName: ‘Ruby’, dateOfSubmission: “Nov 24 2021”, age: 25}

Code:-

  pullObjectProperties = function(_originalObj,...args) 
   {
    var newObj = {};
    args.forEach(k => newObj[k] = _originalObj[k])
    return newObj
  }
  // usage of the function
  const myOriginalObject =  { personName: 'Ruby', dateOfSubmission: "Nov 24 2021", age: 25};
  const newSubsetObject = pullObjectProperties(myOriginalObject, 'personName','age')
  console.log(newSubsetObject)

Output:-

{ personName: 'Ruby', age: 25 }

Explanation:-

• Here, in the above code, we wrote our custom function pullObjectProperties to create a subset of object’s properties.
• Within the function pullObjectProperties, we are creating a new object with properties only that are passed in ...args (second parameter) of
• pullObjectProperties function and their corresponding values are taken from _originalObj, which is the first parameter.

I hope this article helped you to get the subset of javascript’s object properties. Good Luck !!!