Object and Array Destructuring in JavaScript with ES6

Introduction to JavaScript destructuring

JavaScript destructuring (introduced in ES6 / ES2015) is a concise way to extract values from arrays and objects into distinct variables. Destructuring assignment reduces boilerplate, improves readability, and pairs well with modern patterns like the rest operator and default values.

Array destructuring

Array destructuring assigns elements from an array to variables by position. This is useful for returning multiple values from functions or unpacking tuple-like structures.

Basic array destructuring

const colors = ["red", "green", "blue"];
const [primary, secondary, tertiary] = colors;
console.log(primary);   // "red"
console.log(secondary); // "green"

Skip elements in array destructuring

const items = [10, 20, 30, 40];
const [first, , third] = items; // skip the second element
console.log(first); // 10
console.log(third); // 30

Use the rest operator in array destructuring

const numbers = [1, 2, 3, 4, 5];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

Default values in destructuring (array examples)

const coords = [50];
const [x = 0, y = 0] = coords;
console.log(x); // 50
console.log(y); // 0 (default applied)

Object destructuring

Object destructuring maps properties from an object to variables by matching property names. Because object properties are unordered, the variable names or explicit renaming determine the mapping.

Basic object destructuring

const user = {name: "Sam", age: 28, city: "Seattle"};
const {name, city} = user;
console.log(name); // "Sam"
console.log(city); // "Seattle"

Rename variables in object destructuring

You can assign a different local variable name while extracting a property.

const product = {id: 42, title: "Notebook"};
const {title: productName} = product;
console.log(productName); // "Notebook"

Default values in object destructuring

const settings = {theme: "dark"};
const {theme, layout = "grid"} = settings;
console.log(layout); // "grid" (fallback)

Nested destructuring in JavaScript

const response = {
  status: 200,
  data: {user: {id: 7, name: "Elena"}}
};
const {data: {user: {id, name}}} = response;
console.log(id);   // 7
console.log(name); // "Elena"

Object destructuring with rest properties

const record = {a: 1, b: 2, c: 3};
const {a, ...others} = record;
console.log(a);      // 1
console.log(others); // { b: 2, c: 3 }

Practical tips and ES6 destructuring assignment syntax notes

• Use destructuring to make function signatures clearer: const fn = ({id, name}) => { ... }
• Combine defaults and renaming when reading possibly missing properties: const {count: total = 0} = obj;
• Prefer destructuring for immutable patterns: extract values, then build new objects with spread syntax.
• When destructuring nested data, consider temporary variables to keep lines readable.

Destructuring assignment is syntax sugar that makes extracting and assigning values simpler — especially valuable when working with modern ES6+ code and immutable data patterns.

Examples to try

• JavaScript array destructuring examples: swap two variables without a temporary value: [a, b] = [b, a]
• JavaScript object destructuring examples: pick a subset of properties to pass to a child component.
• How to use rest operator in array destructuring: split first element from the remainder for streaming/processing pipelines.

These patterns — array destructuring, object destructuring, and the rest operator — form a compact, readable toolkit for working with structured data in modern JavaScript.