Is it possible to destructure onto an existing obj

Question

For example if I have two objects:

var foo = {
  x: "bar",
  y: "baz"
}

and

var oof = {}

and I wanted to transfer the x and y values from foo to oof. Is there a way to do that using the es6 destructuring syntax?

perhaps something like:

oof{x,y} = foo

Answer 1

This works in chrome 53.0.2785.89

let foo = {
  x: "bar",
  y: "baz"
};

let oof = {x, y} = foo;

console.log(`oof: ${JSON.stringify(oof)});

//prints
oof: {
  "x": "bar",
  "y": "baz"
}

Answer 2

This is kind of cheating, but you can do something like this...

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject = (({ hello, your }) => {
  return { hello, your };
})(originalObject);

console.log(partialObject); // ​​​​​{ hello: 'nurse', your: 'mom' }​​​​​

In practice, I think you'd rarely want to use that though. The following is MUCH more clear... but not nearly as fun.

const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};

Another completely different route, which includes mucking with the prototype (careful now...):

if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) => {
      destObj[prop] = this[prop];

      return destObj;
    }, {});
  }
}

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject2 = originalObject.pluck('hello', 'your');

console.log(partialObject2); // { hello: 'nurse', your: 'mom' }

Answer 3

It's totally possible. Just not in one statement.

var foo = {
    x: "bar",
    y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}

(Do note the parenthesis around the statement.) But keep in mind legibility is more important than code-golfing :).

Source: http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets

Answer 4

This is the most readable and shortest solution I could come up with:

let props = { 
  isValidDate: 'yes',
  badProp: 'no!',
};

let { isValidDate } = props;
let newProps = { isValidDate };

console.log(newProps);

It will output { isValidDate: 'yes' }

It would be nice to some day be able to say something like let newProps = ({ isValidDate } = props) but unfortunately it is not something ES6 supports.

Answer 5

It's not a beautiful way, nor I recommend it, but it's possible this way, just for knowledge.

const myObject = {
  name: 'foo',
  surname: 'bar',
  year: 2018
};

const newObject = ['name', 'surname'].reduce(
  (prev, curr) => (prev[curr] = myObject[curr], prev),
  {},
);

console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}

Answer 6

Other than Object.assign there is the object spread syntax which is a Stage 2 proposal for ECMAScript.

var foo = {
  x: "bar",
  y: "baz"
}

var oof = { z: "z" }

oof =  {...oof, ...foo }

console.log(oof)

/* result 
{
  "x": "bar",
  "y": "baz",
  "z": "z"
}
*/

But to use this feature you need to use stage-2 or transform-object-rest-spread plugin for babel. Here is a demo on babel with stage-2