JavaScript Destructuring

Destructuring in JavaScript extracts values from arrays or properties from objects and assigns them to variables in a single, concise statement. It simplifies working with complex arrays and objects by reducing repetitive code.

Array Destructuring

Array destructuring extracts values from arrays in order, assigning them to variables in a single statement:

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);
console.log(secondColor);
console.log(thirdColor);

Copy to clipboard
Copy to clipboard

The output for this is:

red
green
blue

Copy to clipboard
Copy to clipboard

Items that aren’t needed can also be skipped:

const colors = ['red', 'green', 'blue'];
const [primaryColor, , tertiaryColor] = colors;

console.log(tertiaryColor); // Output: blue

Copy to clipboard
Copy to clipboard

Object Destructuring

Object destructuring extracts specific properties from an object using their key names:

const car = { make: 'Toyota', model: 'Camry', year: 2021 };
const { make, model } = car;

console.log(make); // Output: Toyota
console.log(model); // Output: Camry

Copy to clipboard
Copy to clipboard

The output for this code is:

Toyota
Camry

Copy to clipboard
Copy to clipboard

Variables can also be renamed or assigned default values:

const car = { make: 'Toyota', model: 'Camry', year: 2021 };
const { model: carModel, color = 'white' } = car;

console.log(carModel); // Output: Camry
console.log(color); // Output: white

Copy to clipboard
Copy to clipboard

Nested Destructuring

Destructuring also supports nested structures for deeply nested objects or arrays:

const user = {
  id: 1,
  info: { name: 'Alice', address: { city: 'Seattle', zip: 98101 } },
};

const {
  info: {
    name,
    address: { city },
  },
} = user;

console.log(name);
console.log(city);

Copy to clipboard
Copy to clipboard

The output of this code is:

Alice
Seattle

Copy to clipboard
Copy to clipboard

Codebyte Example

The following codebyte example uses nested destructuring to extract values directly from an object:

Visit us
Visit us
Hide code
Code
Output
Hide output
Copy to your clipboard
Copy Codebyte
Run