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,
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.
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
Jquery Validate Plugin - How to Create a Simple Custom Rule
Why Is My Asynchronous Function Returning Promise { ≪Pending≫ } Instead of a Value
What's the Difference Between Event.Stoppropagation and Event.Preventdefault
How to Post Urlencoded Form Data With $Http Without Jquery
Get Week of Year in JavaScript Like in PHP
How to Pass Parameters Rendered from Backend to Angular2 Bootstrap Method
In JavaScript, How to Conditionally Add a Member to an Object
How to Connect to SQL Server Database from JavaScript in the Browser
How to Count String Occurrence in String
What Does 'Var That = This;' Mean in JavaScript
Can't Perform a React State Update on an Unmounted Component
How Does This JavaScript/Jquery Syntax Work: (Function( Window, Undefined ) { })(Window)
Definitive Way to Trigger Keypress Events With Jquery
How to Check Whether a Radio Button Is Selected With JavaScript