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;

Answer from CodingIntrigue on Stack Overflow
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › data types
Destructuring assignment
February 26, 2026 - Destructuring assignment allows for instantly mapping an object or array onto many variables. ... This means that property prop should go into the variable varName and, if no such property exists, then the default value should be used.
Discussions

javascript - Is it possible to destructure an object into existing variables? - Stack Overflow
Wrong. Object destructuring into variables does work (in expression context) ! 2019-12-19T21:03:16.823Z+00:00 ... Actually you are correct. If you wrap the assignment in parenthesis, you can destructure the object into existing variables. More on stackoverflow.com
🌐 stackoverflow.com
Is Object destructuring into properties of existing Objects coming to ES?
It's been a part of object destructuring from the start, but it's a bit weird. If you're declaring new variables, you write const {...} = ..., and the JS interpreter gets it. But if you're assigning object properties, you're not declaring variables. And if you start the line with {...}, the interpreter thinks it's a code block. So you need parentheses around it: const me = { } const family = {husband: "Ben", wife:"Emily",child:"me"}; ({husband: me.dad, wife: me.mum } = family); console.log(me.dad); // => Ben More on reddit.com
🌐 r/javascript
8
68
May 25, 2018
ecmascript 6 - Is it possible to destructure onto an existing object? (JavaScript ES6) - Stack Overflow
Basically, destructure into variables and then use the initializer shorthand to make a new object. There isn't any need for Object.assign. More on stackoverflow.com
🌐 stackoverflow.com
ES6: Use Destructuring Assignment to Assign Variables from Objects help
I am trying to solve the Destructuring Assignment challenge and I am stuck. Can someone explain the destructuring assignment concept and walk me through the challenge please? Challenge: Use destructuring to obtain the length of the input string str, and assign the length to len in line. More on forum.freecodecamp.org
🌐 forum.freecodecamp.org
8
0
September 20, 2018
People also ask

What is destructuring in JavaScript?
A syntax for unpacking array elements or object properties into separate variables in one statement, e.g. const { a, b } = obj.
🌐
codeshack.io
codeshack.io › home › references › javascript › destructuring
JavaScript destructuring Operator: How It Works, with Examples
How do I set a default value when destructuring?
Add = default after the name: const { size = "md" } = options uses "md" when size is undefined.
🌐
codeshack.io
codeshack.io › home › references › javascript › destructuring
JavaScript destructuring Operator: How It Works, with Examples
How do I rename a variable while destructuring?
Use a colon: const { name: userName } = user creates userName from the name property.
🌐
codeshack.io
codeshack.io › home › references › javascript › destructuring
JavaScript destructuring Operator: How It Works, with Examples
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring
Destructuring - JavaScript - MDN Web Docs - Mozilla
For both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern, with slightly different syntaxes. In binding patterns, the pattern starts with a declaration keyword (var, let, or const). Then, each individual property must either be bound to a variable or further destructured.
🌐
Flavio Copes
flaviocopes.com › home › javascript › destructure a javascript object to existing variables
Destructure a JavaScript object to existing variables
October 25, 2020 - Learn how to destructure an object into existing variables in JavaScript by wrapping the assignment in parentheses, plus the semicolon trick you need.
🌐
Dmitri Pavlutin
dmitripavlutin.com › javascript-object-destructuring
How to Use Object Destructuring in JavaScript - Dmitri Pavlutin
January 28, 2023 - The object destructuring can assign values to variables declared using const, let, and var. Or even assign to an already existing variable.
Find elsewhere
🌐
CodeShack
codeshack.io › home › references › javascript › destructuring
JavaScript destructuring Operator: How It Works, with Examples
June 23, 2026 - Wrap object destructuring assignments to existing variables in parentheses: ({ a } = obj).
🌐
GitBook
basarat.gitbook.io › typescript › future-javascript › destructuring
Destructuring | TypeScript Deep Dive
December 31, 2019 - var rect = { x: 0, y: 10, width: ... rect.x = 10; ({x, y, width, height} = rect); // assign to existing variables using outer parentheses console.log(x, y, width, height); // 10,10,15,20 · Here in the absence of destructuring ...
🌐
Reddit
reddit.com › r/javascript › is object destructuring into properties of existing objects coming to es?
r/javascript on Reddit: Is Object destructuring into properties of existing Objects coming to ES?
May 25, 2018 -

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?

Top answer
1 of 16
177

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.

2 of 16
61

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 };
🌐
freeCodeCamp
forum.freecodecamp.org › javascript
ES6: Use Destructuring Assignment to Assign Variables from Objects help - JavaScript - The freeCodeCamp Forum
September 20, 2018 - I am trying to solve the Destructuring Assignment challenge and I am stuck. Can someone explain the destructuring assignment concept and walk me through the challenge please? Challenge: Use destructuring to obtain the length of the input string str, and assign the length to len in line.
🌐
Medium
medium.com › @ayoub-mabrouk › understanding-the-javascript-destructuring-assignment-798d7c959132
Understanding the JavaScript destructuring assignment | by Ayoub Mabrouk | Medium
August 8, 2022 - The object destructuring assignment ... most in ReactJs, VueJs, and Angular that enables us to easily extract multiple data from arrays, objects and assign that data to any variables, It also allows us to specify a default value ...
🌐
freeCodeCamp
freecodecamp.org › news › javascript-object-destructuring-spread-operator-rest-parameter
JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter – A Practical Guide
February 8, 2021 - We can simplify this process using the new object destructuring syntax introduced in ES6. JavaScript Object Destructuring is the syntax for extracting values from an object property and assigning them to a variable.
🌐
Medium
codenil.medium.com › destructuring-a-quick-reference-a7b2fa09c88a
Destructuring: A Quick Reference. Destructuring Assignment, a powerful JS… | by Nil SJ | Medium
August 15, 2023 - // the array and the object to be destructured. const myArray = [10, 20, 30]; const myObject = { d: 40, e: 50, f: 60 }; // destructring assignments const [a, b, c] = myArray; const {d, e, f} = myObject; // outputting destructured values console.log(a, b, c); // → 10 20 30 console.log(d, e, f); // → 40 50 60 · Of course, on the right-hand side of the assignment operator, we can directly use the array or the object itself instead of using the variable that represents them.
🌐
The Valley of Code
thevalleyofcode.com › how-to-destructure-an-object-to-an-already-defined-variable
How to destructure an object to an already defined variable
I had the need to assign the result of a function call to a variable already defined. The function returned an object:
🌐
Greenroots
blog.greenroots.info › javascript-object-destructuring-usages-you-must-know
JavaScript object destructuring usages you must know
May 6, 2025 - We create a message variable and assign a value computed using name and dept property values of the employee object. Powerful, eh? ... In JavaScript object destructuring, you can give your destructured variables an alias name.
🌐
Educative
educative.io › answers › what-is-object-destructuring-in-javascript
What is object destructuring in JavaScript?
The right side of the statement contains the Javascript object that we want to split into variables; the left side contains a “pattern” for the corresponding properties of the object. This “pattern” is usually a list of variable names. Here’s how to destructure values from an object: ... The following code destructures the object into variables with a different name than the object property: ... We can also assign default values to variables whose keys may not exist in the object we want to destructure.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring_assignment
Destructuring - JavaScript | MDN
For both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern, with slightly different syntaxes. In binding patterns, the pattern starts with a declaration keyword (var, let, or const). Then, each individual property must either be bound to a variable or further destructured.
🌐
SitePoint
sitepoint.com › blog › javascript › destructuring objects and arrays in javascript
Destructuring Objects and Arrays in JavaScript — SitePoint
November 7, 2024 - For example, if you have two variables a and b, you can swap their values using the following syntax: [a, b] = [b, a];. ES6 destructuring assignment can be used with function parameters to extract values from objects or arrays passed as arguments.