Destructuring Assignment can be used in different contexts, some of which require subtle variations.
The most common context is assignment to a constant:
const myObject = {
a: 5,
b: 10
}
const { b } = myObject
// b is 10
Destructuring With A Value Returned from a Function
const { c } = f()
This requires knowledge of the object returned from f, and will only work if the function returns a field named c.
Destructuring Assignment Statements with the let Keyword
Destructuring assignment can be used with let, but we must use parentheses to give the interpreter some help so the syntax is not ambiguous.
const myObject = {
a: 5,
b: 10,
c: 15
}
let b
({ b } = myObject)
console.log(b); // Required semicolon.
({ c } = myObject)
console.log(c)
This prints:
10 15
Without the parentheses the interpreter gets confused and we get an error:
SyntaxError: Unexpected token =
Parentheses are required to force the interpreter to treat the braces as destructuring assignment instead of assignment to an object literal.
Destructuring in Objects Passed in as Function Arguments
This is a way of requiring a specific object structure only as an argument.
If we define our function as follows:
const f = ( {x, y} ) => {
console.log("x is: " + x)
console.log("y is: " + y)
}
Then attempt to use it as below:
const a = 5
const b = 10
f({a, b})
The function prints:
x is: undefined y is: undefined
The destructuring inside the argument object forces only the specific object structure {a,b} to be a valid input for the function.
Only the code below behaves as desired:
const x = 5
const y = 10
f({x, y})
This prints:
x is: 5 y is: 10
Destructuring Syntax not to be Confused with Returning Literal Objects
Note that a return statement with a literal object is not destructuring:
return { x, y }
This simply returns an object with fields x and y.
Destructuring and Renaming Fields
We can add a colon (:) and a new name after a named field in destructuring assignment in order to rename a field.
Example:
const myObject = {
r: 10,
s: 20,
}
const { r: newName } = myObject
console.log(newName) // Will print 10.
Destructure an Object with Remaining Leftover Fields
We can destructure an object taking specific fields we want, and leaving the rest inside the rest variable.
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
const { a, ...rest } = obj
console.log(rest)
This outputs:
{ b: 2, c: 3, d: 4 }
Note that this does not have to be in any specific order.
If we choose to extract c instead as below:
const { c, ...rest } = obj
Our result rest object will be equal to:
{ a: 1, b: 2, d: 4 }