Object Destructuring Without Var, Let or Const

Object destructuring without var, let or const

The issue stems from the {...} operators having multiple meanings in JavaScript.

When { appears at the start of a Statement, it'll always represent a block, which can't be assigned to. If it appears later in the Statement as an Expression, then it'll represent an Object.

The var helps make this distinction, since it can't be followed by a Statement, as will grouping parenthesis:

( {a, b} = objectReturningFunction() );

From their docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#assignment_separate_from_declaration_2

Notes: The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration.

{a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.

However, ({a, b} = {a: 1, b: 2}) is valid, as is var {a, b} = {a: 1, b: 2}

Your ( ... ) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.

Can I pre-declare variables for destructuring assignment of objects?

When you are destructuring an Object,

1. you need to use the same variable names as the keys in the object. Only then you will get one to one correspondence and the values will be destructured properly.

2. and you need to wrap the entire assignment in parenthesis if you are not using declaration statement, otherwise the object literal in the left hand side expression would be considered as a block and you will get syntax error.

---

So your fixed code would look like this

'use strict';
let cat, dog, mouse;
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
({cat, dog, mouse} = obj);     // Note the `()` around

which is equivalent to

'use strict';
let obj = {cat: 'meow', dog: 'woof', mouse: 'squeak'};
let {cat, dog, mouse} = obj;

Javascript re-assign let variable with destructuring

 ({ latitude, longitude } = props.userLocation.coords);

Destructuring needs to be either after a let, const or var declaration or it needs to be in an expression context to distinguish it from a block statement.

ES6 Destructuring assignment without declaration

The first example defines the variables within block scope.

The second example defines the variables globally.

Does a Javascript Object Destructure assignment use const, let, or var?

Declaring variables with destructuring uses the same scope as if you'd declared ordinary variables in the same position. So if you do:

let {id} = {id: 42};

then it's a let binding, if you do:

var {id} = {id: 42};

then it's a var binding.

Function parameters are like var bindings, since they're scoped to the entire function and they're not const. They're also like let bindings because they're scoped to the current block, which is the entire function body.

Reassign JavaScript variable via destructuring

It is pretty simple. For the variable which are declared already and you want to reassign them values using destructuring just add the parenthesis around the statement.

( { thing1, thing2 } = myObj );

Why can I assign a value to a reference using array destructuring, but not object destructuring?

You can. The issue is just that the { } is interpreted as block here instead of an object literal! For the same reason you can't write { a: 1 }.a.

You can wrap the whole statement in parens to avoid this problem (in the same way as ({ a: 1 }).a makes the previous example work):

const o = {}

;({ ['1']: o['something'] } = { '1': 'a' })

console.log(o) // { something: 'a' }

Javascript overwrite destructured let variable

You need to wrap {} in () in an arrow function that has no brackets for grouping statements:

const somefunction = data => ({a:1+data, b:2-data, c: 2*data, d: 3+1*data});

const {a,b,c,d} = somefunction(3)

console.log(a,b,c,d)

---

Related Topics