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
1
vote
2 answers

Can't destructure props in child component

I'm getting some trouble on destructuring props when passing an object to a child component. This object has 2 values, one is another object and the second is a function. This is my code in case any of you can help: Parent cmp: export const…
1
vote
2 answers

Javascript Curly Braces Around Parameters

I'm learning react and javascript right now and am struggling to understand why curly braces are required when passing a simple string into a react functional component like so: function Editor({ headerText }) { return (
ikreie
  • 13
  • 3
1
vote
0 answers

Object destructuring for counting duplicate occurrences

I've been looking through ways to count the number of occurrences of a specific value in an array of objects. I found this answer about using the reduce method on the array, as in their example: const people = [ {name: 'John', group: 'A'}, …
Echo
  • 521
  • 5
  • 16
1
vote
1 answer

Destructuring possible null values within an array

Is there a better way to handle null values within the example below. In entries 5, 7, and 10; a null value is present. The following errors are presented whether the value is null or undefined. #5 - Uncaught TypeError: Cannot read property 'id' of…
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
1
vote
1 answer

Can I destructure to multiple variables when at least one has already been declared, and at least one has not?

I'm aware that I can destructure an object or array to multiple variables, whether they are both already assigned or both unassigned, but is it possible to restructure to multiple variables together when at least one variable has already been…
1
vote
1 answer

Destructuring Assignment to Pass an object as function's parameter

I am learning Javascript on freeCodeCamp, and I came across passing an Object as a function Parameter through restructuring Assignment I was asked to "Use destructuring assignment within the argument to the function half to send only max and min…
1
vote
2 answers

Object destructing resulting in 'never' type in TypeScript

My code is as follows: export function testGraph({ id = 0, name = "test", nodes = [] }): Graph { if (nodes.length === 0) { const dummyNode = testNode({}); return new Graph(id, name, [dummyNode]); } return new Graph(id, name,…
Debanik Dawn
  • 797
  • 5
  • 28
1
vote
1 answer

Javascript (es6) possible to destructure and return on a single line?

I'm curious if it's possible to return a destructured object on the same line it was destructured. Current (working) examples: using 2 lines const itemList = json.map((item) => { const { id, title } = item; return { id, title }; }); 1 line…
Jacksonkr
  • 31,583
  • 39
  • 180
  • 284
1
vote
0 answers

How can I dynamically use a variable to destructure an object of various objects

export const apiDataDay = async () => { try { var days = [ "monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday", ]; var date = new Date(); var dayName =…
Abdullah Ch
  • 1,678
  • 1
  • 13
  • 31
1
vote
1 answer

JS. Object destructuring with default value not working

Object: fruits { citrus { lime { id } } berries { ... } } Destructuring fruits to reach lime: const { citrus: { lime } = {} } = fruits; My understanding is that if citrus is null,…
wazus
  • 103
  • 1
  • 7
1
vote
1 answer

How to assign values to class level properties in constructor using Object Destructuring in TypeScript?

I am using Typescript for my react project. Thus I am passing props in the constructor. I want to break "props" in the constructor and want to assign it to class-level variables. This is my code - abstract class IProps{ abstract…
Prafull Dhadkar
  • 891
  • 2
  • 10
  • 23
1
vote
2 answers

object destructuring when key has dot character

var x = { "a": 1, "b": 3 } const { a } = x console.log(a) For the above code output is 1 as expected. var x = { "a.0.0": 1, "b": 3 } const { a.0.0 } = x console.log(a) but when the key has dot character in it, the output is undefined. How can…
1
vote
2 answers

Object destructuring or optional chaining which is better code?

Given there are two ways to write the code, which way is better in terms of effective code?const { match: { params: { clientId = '' } } } = this.props;const clientId = this.props?.match?.params?.clientId ?? ''N.B. We can ignore the fact that any of…
1
vote
2 answers

javascript destructure object to 'this'

I would like to assign pagination result from response.data to Vue data so the obvious way is simply this.data = response.data.data this.total = response.data.total this.perPage = response.data.per_page But is there an ES6 way to assign…
Anurat Chapanond
  • 2,837
  • 3
  • 18
  • 31
1
vote
2 answers

.map() to iterate an arrays of objects

I have attempted a nested approach which is able to display in the console log but unable in the main Tsx page in react. The data structure is as follows array[0]={title:"abc", url:"abc.com"}; array[1]={title:"abcd", url:"abcd.com"}; …
Random I.T
  • 121
  • 1
  • 10