Destructuring & Spread

Modern ~20 min read

Destructuring Assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Array Destructuring

HTML

CSS

<h2>Array Destructuring Demo</h2>
<p id='arrayOutput'></p>

Object Destructuring

HTML

CSS

<h2>Object Destructuring Demo</h2>
<p id='objOutput'></p>

Spread Operator (...)

The spread operator (...) allows an iterable (like an array) to be expanded in places where zero or more arguments or elements are expected.

HTML

CSS

<h2>Spread Operator Demo</h2>
<p id='spreadOutput'></p>

Rest Parameter (...)

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. It looks the same as spread, but is used in function definitions.

HTML

CSS

<h2>Rest Parameter Demo</h2>
<p id='restOutput'></p>

Summary

Destructuring unpacks values from arrays or properties from objects into variables.
The Spread operator (...) expands iterables into elements.
The Rest parameter (...) collects multiple elements into an array.

Quick Quiz

Which operator is used to unpack an array?

Rest

Spread

Destructure

Unpack

Previous Modules

Next Advanced Arrays

Destructuring Assignment

Array Destructuring

Object Destructuring

Spread Operator (...)

Rest Parameter (...)

Summary

Quick Quiz

Enjoying these tutorials?