Destructuring, Spread & Rest

Write cleaner, more modern JavaScript. Learn how to unpack objects and merge arrays using elegant syntax shortcuts.

JavaScript7 min readConcept 20 of 62

What is Destructuring?

Destructuring is a syntax that allows you to unpack properties from objects (or items from arrays) into distinct, standalone variables.

Instead of writing const name = user.name; const age = user.age;, you can write it all in one line: const { name, age } = user;

The Spread Operator (...)

The Spread operator looks like three dots (...). It allows an iterable (like an array or object) to be expanded in places where zero or more arguments are expected.

It is incredibly useful for merging data. const newObj = { ...obj1, ...obj2 } takes all properties from both objects and combines them into a brand new object.

The Rest Parameter (...)

The Rest parameter looks exactly the same (...), but it does the exact opposite. While Spread expands things out, Rest collects things up.

In a function signature function add(first, ...others), the others variable collects all remaining arguments into a neat array.

The Syntax Sandbox

Select a syntax feature (Destructuring, Spread, or Rest) to see how data is dynamically unpacked or merged.

The Syntax Sandbox

// Unpack properties directly into variables
const hero = { name: "Link", hp: 100 };
const { name, hp } = hero;
Data Visualization
name
"Link"
hp
100
"Link"
const name
100
const hp
iDestructuring neatly pops the name and hp values right out of the object into their own standalone variables.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What does the Spread operator (`...`) do?
  2. 2If you want to extract `user.id` but call the variable `userId`, how do you write the destructuring?
  3. 3What is the difference between Spread and Rest if they both use three dots (`...`)?

Remember this

  • Destructuring unboxes properties or array items into distinct variables.
  • Spread (...) expands an iterable into individual elements.
  • Rest (...) collects remaining elements into an array.
  • When spreading objects, keys on the right overwrite matching keys on the left.

Done with this concept?

Mark it complete to track your progress. No login needed.