You need to use assignment separate from declaration syntax:
({
screenings,
size
} = source);
Babel REPL Example
From the linked docs:
The ( .. ) around the assignment statement is required syntax when using object literal destructuring assignment without a declaration
And obviously you need to use this as you can't redeclare a let variable. If you were using var, you could just redeclare var { screenings, size } = source;
javascript - Is it possible to destructure an object into existing variables? - Stack Overflow
Is Object destructuring into properties of existing Objects coming to ES?
ecmascript 6 - Is it possible to destructure onto an existing object? (JavaScript ES6) - Stack Overflow
ES6: Use Destructuring Assignment to Assign Variables from Objects help
What is destructuring in JavaScript?
How do I set a default value when destructuring?
How do I rename a variable while destructuring?
You can do this with array destructuring, i.e.:
const complexPoint = [1,2];
let x, y;
[x,y] = complexPoint;
As for object destructuring, an equivalent syntax would not work as it would throw off the interpreter:
const complexPoint = {x:1,y:2};
let x, y;
{x,y} = complexPoint; // THIS WOULD NOT WORK
A workaround could be:
const complexPoint = {x:1,y:2};
let x, y;
[x,y] = [complexPoint.x, complexPoint.y];
// Or
[x,y] = Object.values(complexPoint);
UPDATE:
It appears you can destructure an object into existing variables by wrapping the assignment in parenthesis and turning it into an expression. So this should work:
const complexPoint = {x:1,y:2};
let x, y;
({x,y} = complexPoint); // THIS WILL WORK
here it can be done like this.
const complexPoint = {x: 1, y: 2, z: 3};
const simplePoint = ({x, y}) => ({x, y});
const point = simplePoint(complexPoint);
console.log(point);
In a single line looks like this:
const complexPoint = {x: 1, y: 2, z: 3};
// can be written as
const point2 = (({x, y}) => ({x, y}))(complexPoint);
console.log(point2);
Suppose I have these definitions:
const me = {},
familyArr = ['My Dad', 'My Mom'],
familyObj = {father: 'My Dad', mother: 'My Mom'}
Currently, I can assign the values in familyArrto properties of the me object using Array destructuring, like so:
[me.dad, me.mom] = familyArr
console.log(me) // => {dad: "My Dad", mom: "My Mom"}So I had hoped I would be able to do something similar with Object destructuring, like so, but this throws a syntax error:
{mother: me.mom, father: me.dad} = familyObj
// SyntaxError: Unexpected token :So my question is whether this destructuring of Objects into properties on other existing Objects is planned or being discussed. It seems to me like a natural extension of the existing features, given that Object destructuring into variables is already a thing, and we can already destructure Arrays into Object properties.
Any thoughts? I don't see anything that looks like this in the list of TC39 proposals, but is it maybe buried within something else? Or has it already been reject for some reason?
While ugly and a bit repetitive, you can do
({x: oof.x, y: oof.y} = foo);
which will read the two values of the foo object, and write them to their respective locations on the oof object.
Personally I'd still rather read
oof.x = foo.x;
oof.y = foo.y;
or
['x', 'y'].forEach(prop => oof[prop] = foo[prop]);
though.
IMO, this is the easiest way to accomplish what you're looking for:
let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };
// data === { prop1: someObject.prop1, ... }
Basically, destructure into variables and then use the initializer shorthand to make a new object. There isn't any need for Object.assign.
I think this is the most readable way, anyway. You can hereby select the exact props out of someObject that you want. If you have an existing object you just want to merge the props into, do something like this:
let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
// Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
// Merges into otherObject
Another, arguably cleaner, way to write it is:
let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };
// Merges your selected props into otherObject
Object.assign(otherObject, newObject);
I use this for POST requests a lot where I only need a few pieces of discrete data. But, I agree there should be a one liner for doing this.
P.S.:
I recently learned you can use ultra destructuring in the first step to pull nested values out of complex objects! For instance...
let { prop1,
prop2: { somethingDeeper },
prop3: {
nested1: {
nested2
}
} = someObject;
let data = { prop1, somethingDeeper, nested2 };
Plus, you could use the spread operator instead of Object.assign when making a new object:
const { prop1, prop2, prop3 } = someObject;
let finalObject = {...otherObject, prop1, prop2, prop3 };
Or...
const { prop1, prop2, prop3 } = someObject;
const intermediateObject = { prop1, prop2, prop3 };
const finalObject = {...otherObject, ...intermediateObject };