3.0 destruction

After spread and rest, the next ES6 feature we want to cover is destructuring. Destructuring lets you pull elements out of arrays or properties out of objects in one expression, and store them directly in named variables. At first glance it can look similar to the spread operator, but it does the opposite: spread expands a structure, destructuring extracts pieces of one.

Array and object destructuring

For arrays, the syntax mirrors a literal array on the left-hand side of the assignment: const [a, b] = ["hello", "Matthieu"]; binds a to "hello" and b to "Matthieu". Order matters because array destructuring is positional, not name-based. You can also skip elements with commas to pick non-consecutive items.

For objects, the left-hand side uses braces and targets the property names: const { name } = { name: "Matthieu", age: 30 }; only extracts name; logging age would return undefined because we did not pull it out. Object destructuring is name-based, not positional, so the order of properties in the braces does not matter. 

const numbers = [1, 2, 3];
const [num1, num2] = numbers;
console.log(num1, num2);     // 1 2

const [num1, , num3] = numbers;
console.log(num1, num3);     // 1 3

const person = { name: "Matthieu", age: 30 };
const { name } = person;
console.log(name);           // "Matthieu"

In this React course you will see destructuring quite often, especially with object destructuring used to read props inside a component. It is a small but very convenient feature: instead of writing props.title everywhere, you grab { title } once at the top of the function.

Summary

Destructuring is a JavaScript feature that allows you to extract specific elements from arrays and objects and store them in individual variables. Unlike the spread operator which distributes all elements, destructuring lets you selectively extract and assign values. This lesson covers array destructuring using square brackets (e.g., [a, b] to extract elements by position) and introduces object destructuring syntax with curly braces to extract properties by name.

Key points

  • Destructuring extracts specific elements from arrays or properties from objects into individual variables
  • Array destructuring uses square bracket syntax [a, b] to match elements by position order
  • Object destructuring uses curly brace syntax {propertyName} to extract object properties by name
  • You can skip array elements by using commas without variable names (e.g., [a, , c] extracts 1st and 3rd elements only)
  • Destructuring differs from the spread operator: spread distributes all elements, destructuring selects specific ones
  • The order matters in array destructuring but the property name matters in object destructuring

FAQ

What is the difference between destructuring and the spread operator?

The spread operator (...) distributes all elements or properties into a new array or object, while destructuring extracts specific elements or properties and assigns them to individual named variables.

How do you skip elements when destructuring an array?

Use commas to mark positions you want to skip. For example, [a, , c] = [1, 2, 3] extracts only the 1st and 3rd elements, leaving the 2nd position empty.

Why use destructuring instead of accessing array elements by index?

Destructuring provides cleaner, more readable syntax for extracting multiple values at once and assigning them meaningful variable names, reducing code verbosity.