Photo by Annie Spratt on Unsplash
It's very common that in development we needed only a few key-value pairs from an object and still, we use the whole object or we create a new one with copy-pasting key-values from one to another. What's your solution to it?
Before going further, I would like to welcome you to a new episode of series call Javascript Useful Snippets. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat. So, if you haven't read my previous episodes articles please check it out here or else stay tuned till the end to learn something new 😋 .
What if you can just have those key-value pair which you needed without doing the above-mentioned things! Well, I've defined one function for it called pick(). This function takes two arguments where the first one will object (which we are filtering) and second will be a collection of key names which we want to extract from a given object. As a result, it'll return only those pairs with key names you passed.
How do this pick() works?
const pick = (obj, arr) =>
arr.reduce((acc, record) => (record in obj && (acc[record] = obj[record]), acc), {});
As mentioned above it'll take two arguments as parameters and call reduce method ( reduce method can be used to eliminate unwanted records or create a new type of data with some operations, you can read about it more from here ) on the collection we passed as second params, inside reduce method - I've first validated if given key includes into an object then store it into acc object as key and assigned value after selecting it from a given object. So, in return, you will have an object of key-value pairs of keys you provided form your provided object. Let's pass some values and try it ourselves...
How to use pick() ?
pick({ a: '1', b: '2', c: '3' }, ['a', 'c']); // { 'a': 1, 'c': 3 }
pick({ a: 1, b: '2', c: 3 }, ['x', 'c']); // { 'c': 3 }
In the first call, I've passed an object with a collection of a key that includes inside objects and received relative pairs to those keys in a result object. While in next call I've passed "x" ( knowingly to check function capability) so, in return I've received only those pair which includes the inside object. That means, with this function you can easily extract your desired pair from an object in no time and if any key doesn't exist then it'll skip without any exceptions.
At many places in a single app, we won't need the whole objects still we pass to child-to-child without filtering it (especially in technology like react.js) which can affect our app performance. I think this can help you in with that, so I shared it with you here. I hope you liked my explanation (if yes, hit like ❤️ button ) and if you found it informative then do follow from here because I'll learn and share every day.😋