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
– Nick Parsons, Commented Nov 18, 2020 at 14:56

Nina Scholz · Accepted Answer · 2020-11-18 14:55:47Z

14

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);

answered Nov 18, 2020 at 14:55

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taplar · Accepted Answer · 2020-11-18 15:00:26Z

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, 2020 at 15:00

Taplar

25k4 gold badges24 silver badges36 bronze badges

9 Comments

Thomas Clayson Over a year ago

A good solution! Achieves the desired outcome with deleting the property, but doesn't translate to "normal" destructuring, unlike Nina's answer. :)

Taplar Over a year ago

"normal" deconstruction?

Thomas Clayson Over a year ago

Where you just want to pull values out of objects, rather than deleting them.

Taplar Over a year ago

Ah, I gotcha. True.

Amaarockz Over a year ago

This doesnt have any destructuring

|

customcommander · Accepted Answer · 2020-11-18 15:09:46Z

0

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>

answered Nov 18, 2020 at 15:09

customcommander

19.3k6 gold badges70 silver badges97 bronze badges

Comments

Amaarockz · Accepted Answer · 2020-11-18 15:10:09Z

0

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);

answered Nov 18, 2020 at 15:10

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

1 Comment

Parker H Gordon Mar 18 at 15:08

The question was asking specifically for a way to do this with the property name in a variable. I.e., sometimes that var will have the value 'banana', and sometimes it will have the value 'apple'.

Collectives™ on Stack Overflow

Javascript object destructure with property name in variable

4 Answers 4

Comments

9 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related