Destructuring in JavaScript

In JavaScript, the term “destruction” is not standard terminology related to objects. However, you might be referring to “destructuring,” which is a feature introduced in ECMAScript 6 (ES6) to extract values from arrays or properties from objects into distinct variables.

Destructuring assignment allows you to unpack values from arrays or properties from objects into variables in a concise and readable manner.

Get Aman Rathore’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here’s a quick overview of destructuring in JavaScript:

Array Destructuring

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

console.log(firstColor);  // Output: red
console.log(secondColor); // Output: green

Object Destructuring

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

const { firstName, lastName } = person;

console.log(firstName); // Output: John
console.log(lastName);  // Output: Doe

Destructuring can also be used in function parameters:

const greet = ({ firstName, lastName }) => {
  console.log(`Hello, ${firstName} ${lastName}!`);
};

const person = {
  firstName: 'John',
  lastName: 'Doe'
};

greet(person); // Output: Hello, John Doe!

Destructuring provides a convenient way to work with arrays and objects in JavaScript by allowing you to extract values or properties into variables more easily.