Javascript object destructure with property name in variable

Question

Is it possible to destructure an object in Javascript by using a property name stored in a variable?

This is how we destructure at the moment.

const myObject = {a: 1, b: 2, c: 3};
let {a, b, c} = myObject;
console.log(a, b, c);

I would like to be able to store property names in variables:

const myObject = {banana: 1, apple: 2, strawberry: 3};
const chosenFruit = "banana";
const { [[chosenFruit]], ...theRest } = myObject;
console.log(banana); // Should be 1

For full disclosure, the reason I want to be able to do this is I want to remove the property "banana" from the object. So in my use case I want to be left with the theRest object which doesn't include the banana property, but there have been times I wanted to iterate through an array of values (e.g. days of the week) and programatically destructure objects quickly.

Is this possible? If so, how?

Thanks!

Are you after something like `const { [chosenFruit]: banana, ...theRest } = myObject;` ? you would have to explicitly type `banana` in the destructuring though — Nick Parsons, Nov 18 '20 at 14:56
`delete` will change the original object. I want the original object in tact, and I want a new object with the `banana` property missing. — Thomas Clayson, Nov 18 '20 at 14:56
See: [How to destructure into dynamically named variables in ES6?](https://stackoverflow.com/q/35939289) — Nick Parsons, Nov 18 '20 at 14:57

score 9 · Accepted Answer · answered Nov 18 '20 at 14:55

You could take a computed property names and rename the property (assigning to new variable names).

const myObject = { banana: 1, apple: 2, strawberry: 3 };
const chosenFruit = "banana";
const { [chosenFruit]: fruit, ...theRest } = myObject;

console.log(fruit); // 1
console.log(theRest);

score 1 · Answer 2 · answered Nov 18 '20 at 15:00

1

const myObject = {banana: 1, apple: 2, strawberry: 3};
const chosenFruit = "banana";
const newThing = { ...myObject };

delete newThing[chosenFruit];

console.log(myObject, newThing);

This version uses deconstruction to clone, and then removes the unwanted property.

answered Nov 18 '20 at 15:00

Taplar

24,788
4
22
35

A good solution! Achieves the desired outcome with deleting the property, but doesn't translate to "normal" destructuring, unlike Nina's answer. :) – Thomas Clayson Nov 18 '20 at 15:02
"normal" deconstruction? – Taplar Nov 18 '20 at 15:03
Where you just want to pull values out of objects, rather than deleting them. – Thomas Clayson Nov 18 '20 at 15:03
Ah, I gotcha. True. – Taplar Nov 18 '20 at 15:04
This doesnt have any destructuring – Amaarockz Nov 18 '20 at 15:04
@AmaarshallYaswankar what would you call the `{ ...myObject }` then? – Taplar Nov 18 '20 at 15:06
I would argue that the usage of the spread operator is a form of deconstructing. – Taplar Nov 18 '20 at 15:08
Its ok my friend, iam not here to argue – Amaarockz Nov 18 '20 at 15:11
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224739/discussion-between-amaarshall-yaswankar-and-taplar). – Amaarockz Nov 18 '20 at 15:14

score 0 · Answer 3 · answered Nov 18 '20 at 15:09

A variation with destructuring parameters:

const pick = (fruit, {[fruit]: out, ...fruits}) => [out, fruits];

const [fruit, fruits] = pick('banana', basket);

console.log(fruit);
console.log(fruits);
console.log(basket);

<script>const basket = { banana: 1, apple: 2, strawberry: 3 };</script>

score 0 · Answer 4 · answered Nov 18 '20 at 15:10

This also works for non-dynamic choices and also if you want to have the variable name same as the fruit name

const myObject = { banana: 1, apple: 2, strawberry: 3 };
const { banana, ...theRest } = myObject;

console.log(banana); // 1
console.log(theRest);

Javascript object destructure with property name in variable

4 Answers4

Related