Questions tagged [object-destructuring]

Use this tag for JavaScripts object destructuring syntax.

JavaScript object destructuring allows one to replace code like:

const object = {foo: 'bar', baz: 'bing'};
const foo = object.foo;
const baz = object.baz;

With this destructuring assignment syntax:

const object = {foo: 'bar', baz: 'bing'};
const {foo, baz} = object;
155 questions
4
votes
1 answer

Escape reserved keywords in object destructing assignment

Is it possible to use reserved keywords in an object destructing assignment. Specifically I am trying to handle JSON with property property named default. //Doesn't compile class FooBar { constructor({foo, default}) { this.foo = foo; …
Steven Wexler
  • 16,589
  • 8
  • 53
  • 80
4
votes
1 answer

how to bind data to this by destructuring assignment?

I wanna add new key and value to this object by destructuring assignment, but it falls in error: Uncaught SyntaxError: Unexpected token : Let see my example, assume I have obj data object: const obj = { 'a':'1', 'b':'2', …
AmerllicA
  • 29,059
  • 15
  • 130
  • 154
4
votes
1 answer

object destructing inside constructor in nodejs to assign values to member variable not working

I am trying ES6 object destructuring inside a constructor hoping to assign value to a member variable. It is not working. Its showing undefined when I am printing the value inside a member function. Its printing correctly if I print inside the…
KKB
  • 43
  • 3
4
votes
1 answer

Why destructuring assignment doesn't know null value as falsy and use default value?

Assume we have a function that use some keys in the inner object of argument: const api = ({ data: { name } = {} }) => `My name is ${name}.`; If we pass {}, { data: '' }, { data: 0 }, { data: NaN } or { data: undefined } to the function we will…
AmerllicA
  • 29,059
  • 15
  • 130
  • 154
3
votes
2 answers

What's the best way to use a type assertion with destructuring assignment?

I have some code using destructuring assignment as follows: const { values: project, setValues, submitForm } = useFormikContext(); Per the TypeScript type assertion documentation I'd like to use the as keyword to tell the TS compiler that project…
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
3
votes
2 answers

Can you destruct an object and have nullish coalescing for potential undefined constants?

I use React, so I have a props object, for example: const props: { id: number, name?: string} = { id: 1 }; // not defining the `name` const { id, name } = props; // here the `const name` becomes undefined forever and even if I use the defaultProps…
3
votes
1 answer

Enforcing TSX prop type inline for function declaration which declares props using object destructuring

I have a custom Type export class MyClass { name: string; img: string; constructor(name: string) { this.name = name; this.img = `/images/${name}.jpg`; } } I have a stateless functional component which takes that type as a…
Sam
  • 1,765
  • 11
  • 82
  • 176
3
votes
2 answers

How to destructure an object based on a dynamic defined variable

I am working with an immutable object that I need to add subtract an array of values from. I know it's possible using ES6 destructing with the following. const {countries, remainder} = someObj // {countries:...,languages:..., ...keys}; This will…
3
votes
3 answers

Why there is a problem with destructuring ES6 on declared object?

I have a problem, or more some weird situation. I am using https://es6console.com. I want to use destructuring and assign properties to already declared variables. It looks like that there is a problem in where I declare object. Please open…
zamf123
  • 33
  • 4
3
votes
1 answer

destruct object with interface

I have this code: const {items} = this.props; but, I need to set the interface into the items constant and I do not want to do this: const items: ItemsInterface = this.props.items Possible?
3
votes
1 answer

TypeScript imports vs. ES6 object destructuring

With TS imports, I believe I can do this: import {foo as bar} from 'foo'; with ES6 object destructuring in JS or TypeScript - is there a way to rename an "imported value" in the same way? For example, const {longVarName as lvn} = x.bar;
Alexander Mills
  • 90,741
  • 139
  • 482
  • 817
2
votes
2 answers

Need help understanding what is happening in object destructuring for React component

I was watching a video about layout components and I saw that the author seemed to destructure the parameters but also assign it as a property in an object (as seen in Splitscreen.js)? I was wondering if anyone could help me understand what is going…
CMS
  • 51
  • 3
2
votes
2 answers

Object destructuring in typescript

Is it possible to destructure an object which comes from an function call without Typescript complaining? File 1 React Component 1 ... let obj = null // <-- object initialization ... useEffect(() => { obj = functionCall(...) // <-- function call…
eakl
  • 501
  • 8
  • 22
2
votes
3 answers

How to destructure an array of objects into multiple arrays of its keys?

My data set is an array of objects which all have only two keys (id and name): [{ id: 1, name: 'Foo'}, { id: 2, name: 'Bar'}, { id: 3, name: 'FooBar'}, { id: 4, name: 'BarFoo'}] I want to destructure them in such a way that I end up having an…
leonheess
  • 16,068
  • 14
  • 77
  • 112
2
votes
3 answers

Object destructuring assignment with default value of itself

I need to destruct an object that some of the variables may already have a value. let foo = 1, bar, baz = 'Hello'; const config = { foo: 42 }; ({ foo, bar, baz } = config); console.log({ foo, bar, baz }); This gives me { "foo": 42, "bar":…
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
1
2
3
10 11