How to get a subset of a javascript object s properties

Question

Say I have an object   elmo        color   red     annoying  true    height   unknown     meta    one   1   two   2        I want to make a new object with a subset of its properties       pseudo code  subset   elmo slice  color    height         gt    color   red   height   unknown      How may I achieve this

User · Accepted Answer

Using Object Destructuring and Property Shorthand

_x000D_

const object = { a: 5, b: 6, c: 7  };_x000D_
const picked = (({ a, c }) => ({ a, c }))(object);_x000D_
_x000D_
console.log(picked); // { a: 5, c: 7 }

_x000D_

From Philipp Kewisch:

This is really just an anonymous function being called instantly. All of this can be found on the Destructuring Assignment page on MDN. Here is an expanded form

_x000D_

let unwrap = ({a, c}) => ({a, c});_x000D_
_x000D_
let unwrap2 = function({a, c}) { return { a, c }; };_x000D_
_x000D_
let picked = unwrap({ a: 5, b: 6, c: 7 });_x000D_
_x000D_
let picked2 = unwrap2({a: 5, b: 6, c: 7})_x000D_
_x000D_
console.log(picked)_x000D_
console.log(picked2)

_x000D_

User · Answer

ES6 destructuring  Destructuring syntax allows to destructure and recombine an object  with either function parameters or variables   The limitation is that a list of keys is predefined  they cannot be listed as strings  as the question mentions  Destructuring becomes more complicated if a key is non-alphanumeric  e g  foo bar   The downside is that this requires to duplicate a list of keys  this results in verbose code in case a list is long  Since destructuring duplicates object literal syntax in this case  a list can be copied and pasted as is   The upside is that it s performant solution that is natural to ES6   IIFE  let subset       foo  bar      gt     foo  bar     obj      dupe    foo  bar      Temporary variables  let   foo  bar     obj  let subset     foo  bar       dupe   foo  bar     A list of strings  Arbitrary list of picked keys consists of strings  as the question requires  This allows to not predefine them and use variables that contain key names  like pick obj   foo   someKey     moreKeys    A one-liner becomes shorter with each JS edition   ES5  var subset   Object keys obj   filter function  key       return   foo    bar   indexOf key   gt   0      reduce function  obj2  key      obj2 key    obj key     return obj2            ES6  let subset   Object keys obj   filter key   gt    foo    bar   indexOf key   gt   0   reduce  obj2  key    gt  Object assign obj2     key   obj key             Or with comma operator   let subset   Object keys obj   filter key   gt    foo    bar   indexOf key   gt   0   reduce  obj2  key    gt   obj2 key    obj key   obj2          ES2019  ECMAScript 2017 has Object entries and Array prototype includes  ECMAScript 2019 has Object fromEntries  they can be polyfilled when needed and make the task easier   let subset   Object fromEntries    Object entries obj     filter   key     gt    foo    bar   includes key       A one-liner can be rewritten as helper function similar to Lodash pick or omit where the list of keys is passed through arguments   let pick    obj     keys    gt  Object fromEntries    Object entries obj     filter   key     gt  keys includes key       let subset   pick   foo  1  qux  2     foo    bar         foo  1     A note about missing keys  The major difference between destructuring and conventional Lodash-like pick function is that destructuring includes non-existent picked keys with undefined value in a subset       foo  bar      gt     foo  bar       foo  1         foo  1  bar  undefined     This behaviour may or not be desirable  It cannot be changed for destructuring syntax   While pick can be changed to include missing keys by iterating a list of picked keys instead   let inclusivePick    obj     keys    gt  Object fromEntries    keys map key   gt   key  obj key        let subset   inclusivePick   foo  1  qux  2     foo    bar         foo  1  bar  undefined

User · Answer

I suggest taking a look at Lodash  it has a lot of great utility functions   For example pick   would be exactly what you seek    var subset     pick elmo    color    height       fiddle

User · Answer

I am adding this answer because none of the answer used Comma operator  It s very easy with destructuring assignment and   operator  x000D   x000D  const object     a  5  b  6  c  7     const picked     a c    object   a c    console log picked   x000D   x000D   x000D

User · Answer

I ve got the same problem and solved it easily by using the following libs  object pick https   www npmjs com package object pick pick  a   a   b   b   c   c      a    b        gt   a   a   b   b    object omit https   www npmjs com package object omit omit  a   a   b   b   c   c      a    c        gt    b   b

User · Answer

How about   function sliceObj obj      var o            keys      slice call arguments  1     for  var i 0  i lt keys length  i          if  keys i  in obj  o keys i     obj keys i          return o     var subset   sliceObj elmo   color    height

User · Answer

Destructuring into dynamically named variables is impossible in JavaScript as discussed in this question   To set keys dynamically  you can use reduce function without mutating object as follows    x000D   x000D  const getSubset    obj     keys    gt  keys reduce  a  c    gt        a   c   obj c           x000D   x000D  const elmo      x000D    color   red   x000D    annoying  true  x000D    height   unknown   x000D    meta    one   1   two   2   x000D    x000D   x000D  const subset   getSubset elmo   color    annoying   x000D  console log subset  x000D   x000D   x000D       Should note that you re creating a new object on every iteration though instead of updating a single clone      mpen   below is a version using reduce with single clone  updating initial value passed in to reduce     x000D   x000D  const getSubset    obj     keys    gt  keys reduce  acc  curr    gt    x000D    acc curr    obj curr  x000D    return acc x000D         x000D   x000D  const elmo      x000D    color   red   x000D    annoying  true  x000D    height   unknown   x000D    meta    one   1   two   2   x000D    x000D   x000D  const subset   getSubset elmo   annoying    height    meta   x000D  console log subset  x000D   x000D   x000D

User · Answer

function splice         var ret   new Object         for i   1  i  lt  arguments length  i            ret arguments i     arguments 0  arguments i         return ret     var answer   splice elmo   color    height

User · Answer

There is nothing like that built-in to the core library  but you can use object destructuring to do it     const  color  height    sourceObject  const newObject    color  height     You could also write a utility function do it     const cloneAndPluck   function sourceObject  keys        const newObject           keys forEach  obj  key    gt    newObject key    sourceObject key           return newObject      const subset   cloneAndPluck elmo    color    height       Libraries such as Lodash also have   pick

User · Answer

Using the  quot with quot  statement with shorthand object literal syntax Nobody has demonstrated this method yet  probably because it s terrible and you shouldn t do it  but I feel like it has to be listed   x000D   x000D  var o    a 1 b 2 c 3 d 4 e 4 f 5  with o     var output     a b f    console log output  x000D   x000D   x000D   Pro  You don t have to type the property names twice  Cons  The  quot with quot  statement is not recommended for many reasons  Conclusion  It works great  but don t use it

User · Answer

Just another way     var elmo        color   red     annoying  true    height   unknown     meta    one   1   two   2      var subset    elmo  map x   gt       color  x color    height  x height     0    You can use this function with an array of Objects

User · Answer

Destructuring assignment with dynamic properties  This solution not only applies to your specific example but is more generally applicable    x000D   x000D  const subset2    x  y    gt     x  a   y  b     gt     x  a   y  b    x000D   x000D  const subset3    x  y  z    gt     x  a   y  b   z  c     gt     x  a   y  b   z  c    x000D   x000D     const subset4   etc  x000D   x000D   x000D  const o    a 1  b 2  c 3  d 4  e 5   x000D   x000D   x000D  const pickBD   subset2  b    d    x000D  const pickACE   subset3  a    c    e    x000D   x000D   x000D  console log  x000D    pickBD o       b 2  d 4  x000D    pickACE o      a 1  c 3  e 5  x000D     x000D   x000D   x000D    You can easily define subset4 etc  to take more properties into account

User · Answer

Dynamic solution    color    height   reduce  a b    gt   a b  elmo b  a          x000D   x000D  let subset   obj keys   gt  keys reduce  a b   gt   a b  obj b  a       x000D   x000D   x000D     TEST x000D   x000D  let elmo      x000D    color   red   x000D    annoying  true  x000D    height   unknown   x000D    meta    one   1   two   2   x000D     x000D   x000D  console log  subset elmo    color    height       x000D   x000D   x000D

User · Answer

I want to mention that very good curation here  pick-es2019 js Object fromEntries    Object entries obj     filter   key     gt    whitelisted    keys   includes key       pick-es2017 js Object entries obj   filter   key     gt    whitelisted    keys   includes key    reduce  obj   key  val     gt  Object assign obj     key   val           pick-es2015 js Object keys obj   filter  key    gt    whitelisted    keys   indexOf key   gt   0   reduce  newObj  key    gt  Object assign newObj     key   obj key           omit-es2019 js Object fromEntries    Object entries obj     filter   key     gt     blacklisted    keys   includes key       omit-es2017 js Object entries obj   filter   key     gt     blacklisted    keys   includes key    reduce  obj   key  val     gt  Object assign obj     key   val           omit-es2015 js Object keys obj   filter  key    gt    blacklisted    keys   indexOf key   lt  0   reduce  newObj  key    gt  Object assign newObj     key   obj key

User · Answer

Use pick method of lodash library if you are already using   var obj      a   1   b    2    c   3       pick object    a    c           gt     a   1   c   3     https   lodash com docs 4 17 10 pick

User · Answer

Adding my 2 cents to Ivan Nosov answer   In my case I needed many keys to be  sliced  out of the object so it s becoming ugly very fast and not a very dynamic solution   const object     a  5  b  6  c  7  d  8  aa  5  bb  6  cc  7  dd  8  aaa  5  bbb  6  ccc  7  ddd  8  ab  5  bc  6  cd  7  de  8     const picked       a  aa  aaa  ab  c  cc  ccc  cd      gt     a  aa  aaa  ab  c  cc  ccc  cd     object    console log picked     So here is a dynamic solution using eval   const slice    k  o    gt  eval     k    gt    k   o       const object        a  5  b  6  c  7  d  8  aa  5  bb  6  cc  7  dd  8  aaa  5  bbb  6  ccc  7  ddd  8  ab  5  bc  6  cd  7  de  8     const sliceKeys       a  aa  aaa  ab  c  cc  ccc  cd       console log  slice sliceKeys  object

User · Answer

If you are using ES6 there is a very concise way to do this using destructuring  Destructuring allows you to easily add on to objects using a spread  but it also allows you to make subset objects in the same way   const object       a   a     b   b     c   c     d   d         Remove  c  and  d  fields from original object  const  c  d     partialObject    object  const subset    c  d    console log partialObject       gt    a   a   b   b   console log subset       gt    c   c   d   d

User · Answer

convert arguments to array use Array forEach   to pick the property  Object prototype pick   function    args       var obj          args forEach k   gt  obj k    this k      return obj   var a    0  a  1  b  2  c   var b   a pick  1   2      output will be  1   b   2   c

User · Answer

An Array of Objects const aListOfObjects          prop1  50      prop2   quot Nothing quot       prop3   quot hello quot       prop4   quot What s up quot                prop1  88      prop2   quot Whatever quot       prop3   quot world quot       prop4   quot You get it quot           Making a subset of an object or objects can be achieved by destructuring the object this way  const sections   aListOfObjects map   prop1  prop2     gt    prop1  prop2

User · Answer

One more solution   var subset        color  elmo color     height  elmo height      This looks far more readable to me than pretty much any answer so far  but maybe that s just me

User · Answer

Note  though the original question asked was for javascript  it can be   done jQuery by below solution   you can extend jquery if you want here is the sample code for one slice   jQuery extend     sliceMe  function obj  str          var returnJsonObj   null        each  obj  function name  value           alert  name    name    value    value           if name  str               returnJsonObj   JSON stringify     name     value                                return returnJsonObj           var elmo        color   red     annoying  true    height   unknown     meta    one   1   two   2        var temp     sliceMe elmo  color    alert JSON stringify temp      here is the fiddle for same  http   jsfiddle net w633z

User · Answer

While it s a bit more verbose  you can accomplish what everyone else was recommending underscore lodash for 2 years ago  by using Array prototype reduce   var subset     color    height   reduce function o  k    o k    elmo k   return o            This approach solves it from the other side  rather than take an object and pass property names to it to extract  take an array of property names and reduce them into a new object   While it s more verbose in the simplest case  a callback here is pretty handy  since you can easily meet some common requirements  e g  change the  color  property to  colour  on the new object  flatten arrays  etc  -- any of the things you need to do when receiving an object from one service library and building a new object needed somewhere else  While underscore lodash are excellent  well-implemented libs  this is my preferred approach for less vendor-reliance  and a simpler  more consistent approach when my subset-building logic gets more complex   edit  es7 version of the same   const subset     color    height   reduce  a  e    gt   a e    elmo e   a          edit  A nice example for currying  too  Have a  pick  function return another function   const pick       props    gt  o   gt  props reduce  a  e    gt        a   e   o e             The above is pretty close to the other method  except it lets you build a  picker  on the fly  e g   pick  color    height   elmo     What s especially neat about this approach  is you can easily pass in the chosen  picks  into anything that takes a function  e g  Array map    elmo  grover  bigBird  map pick  color    height                 color   red   height   short            color   blue   height   medium            color   yellow   height   tall

User · Answer

TypeScript solution  function pick lt T extends object  U extends keyof T gt     obj  T    paths  Array lt U gt     Pick lt T  U gt      const ret   Object create null     for  const k of paths        ret k    obj k         return ret     The typing information even allows for auto-completion   Credit to DefinitelyTyped for U extends keyof T trick  TypeScript Playground

User · Answer

To add another esoteric way  this works aswell  var obj    a  1  b 2  c 3  var newobj    a c  obj  amp  amp   a c      a  1  c 3   but you have to write the prop names twice

User · Answer

This works for me in Chrome console  Any problem with this   var   color  height     elmo var subelmo     color  height   console log subelmo      color   red   height   unknown

User · Answer

Try  const elmo  color  red  annoying  0 height  unknown  meta  one  1  two  2      const  color  height    elmo  newObject     color  height     console log newObject       color   red   height   unknown

User · Answer

Good-old Array prototype reduce   const selectable    a  null  b  null   const v    a  true  b   yes   c  4    const r   Object keys selectable  reduce  a  b    gt      return  a b    v b    a           console log r     this answer uses the magical comma-operator  also  https   developer mozilla org en-US docs Web JavaScript Reference Operators Comma Operator  if you want to get really fancy  this is more compact   const r   Object keys selectable  reduce  a  b    gt   a b    v b   a          Putting it all together into a reusable function   const getSelectable   function  selectable  original      return Object keys selectable  reduce  a  b    gt   a b    original b   a           const r   getSelectable selectable  v   console log r

User · Answer

You can use Lodash also   var subset     pick elmo   color    height      Complementing  let s say you have an array of  elmo s    elmos             color   red         annoying  true        height   unknown         meta    one   1   two   2                  color   blue         annoying  true        height   known         meta    one   1   two   2                  color   yellow         annoying  false        height   unknown         meta    one   1   two   2              If you want the same behavior  using lodash  you would just   var subsets     map elmos  function elm    return   pick elm   color    height

[javascript] How to get a subset of a javascript object's properties

Examples related to javascript