See the Pen thecodelog.com - ES6 Destructuring 1 by Deano (@deangilewicz) on CodePen.
Object destructuring for parameters works too with the use of curly brackets wrapping the arguments giving the function access to the variables.
See the Pen thecodelog.com - ES6 Destructuring 2 by Deano (@deangilewicz) on CodePen.
A default value can also be used when destructuring.
See the Pen thecodelog.com - ES6 Destructuring 3 by Deano (@deangilewicz) on CodePen.
Variable reassignment and destructuring can be used together.
See the Pen thecodelog.com - ES6 Destructuring 4 by Deano (@deangilewicz) on CodePen.
When destructuring arrays square brackets are used.
See the Pen thecodelog.com - ES6 Destructuring 5 by Deano (@deangilewicz) on CodePen.
Array destructuring for parameters works too with the use of square brackets wrapping the arguments giving the function access to the variables.
See the Pen thecodelog.com - ES6 Destructuring 6 by Deano (@deangilewicz) on CodePen.
To destructure without using all of the array items you can do the following:
See the Pen thecodelog.com - ES6 Destructuring 7 by Deano (@deangilewicz) on CodePen.
Destructuring works well with an ES6 feature called rest.
See the Pen thecodelog.com - ES6 Destructuring 8 by Deano (@deangilewicz) on CodePen.
Destructuring can be used to swap two variables without using a temporary variable.
See the Pen thecodelog.com - ES6 Destructuring 9 by Deano (@deangilewicz) on CodePen.
Destructuring can be useful when working with functions.
See the Pen thecodelog.com - ES6 Destructuring 10 by Deano (@deangilewicz) on CodePen.
It’s especially useful when passing an object into the function. The function arguments can be wrapped in curly brackets which destructures the values so you can use them in the function and not care about the order of the arguments.
See the Pen thecodelog.com - ES6 Destructuring 11 by Deano (@deangilewicz) on CodePen.
If no arguments are passed then this will result in an error.
See the Pen thecodelog.com - ES6 Destructuring 12 by Deano (@deangilewicz) on CodePen.
In this case you would need to give the destructuring object inside of arguments a default value.
See the Pen thecodelog.com - ES6 Destructuring 13 by Deano (@deangilewicz) on CodePen.
Destructuring can be used to map an object to an array. Remember to wrap the state in parenthesis.
See the Pen thecodelog.com - ES6 Destructuring 14 by Deano (@deangilewicz) on CodePen.
Destructuring works with nested arrays and objects although if there are too many levels it can become confusing.
See the Pen thecodelog.com - ES6 Destructuring 15 by Deano (@deangilewicz) on CodePen.