3 Min

JavaScript Destructuring is a ES6 (ECMAScript 2015) function that enables you to extract elements from an array in a simple way.

1. Array Destructuring

With Array Destructuring you can assign individual values ​​of an array directly to variables.

Example:

const numbers = [1, 2, 3];

const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

In this example the elements of the array numbers are assigned to the variables a, b and c.

Default values:

If an element is not present in the array, you can specify a default value:

const numbers = [1, 2];
const [a, b, c = 3] = numbers;
console.log(c); // 3

Here the third value (c) is set to 3 by default since the array only has two elements.

Skipping elements:

You can also skip certain elements by simply using empty commas:

const numbers = [1, 2, 3, 4];
const [, , c] = numbers; // The third element is extracted
console.log(c); // 3

2. Object Destructuring

Object Destructuring works similarly to Array Destructuring, but here you extract values ​​based on the keys of the object.

Example:

const person = {
  name: 'Alice',
  age: 30,
  profession: 'Developer'
};

const { name, age, profession } = person;

console.log(name); // Alice
console.log(age); // 30
console.log(profession); // Developer

Here the name, age and profession properties of the person object are assigned to the corresponding variables.

Renaming variables:

If you want to save the extracted values ​​in another variable with a different name, you can rename the variables:

const person = {
  name: 'Alice',
  age: 30
};

const { name: firstName, age: yearsOld } = person;
console.log(firstName); // Alice
console.log(yearsOld); // 30

Default values ​​in objects:

Here you can also define default values if a property is not present in the object:

const person = {
  name: 'Alice'
};

const { name, age = 25 } = person;
console.log(age); // 25

Since age is not present in the person object, the default value 25 is used.

3. Nested destructuring

You can also destructure nested arrays and objects:

Example of nested array destructuring:

const nestedArray = [1, [2, 3]];
const [a, [b, c]] = nestedArray;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Example of nested object destructuring:

const person = {
  name: 'Alice',
  address: {
  city: 'Berlin',
  zip: 10115
}
};

const { name, address: { city, zip } } = person;

console.log(city); // Berlin
console.log(zip); // 10115

Here the nested values ​​of the object address are extracted directly into city and zip.

4. Combination of array and object destructuring

It is possible to combine both destructuring types:

const data = {
  title: 'JavaScript Guide',
  tags: ['ES6', 'Destructuring', 'JavaScript']
};

const { title, tags: [firstTag, secondTag] } = data;
console.log(title); // JavaScript Guide
console.log(firstTag); // ES6
console.log(secondTag); // Destructuring

Here we extract the value title and at the same time the first two tags from the tags array.

5. Usage in functions

You can also use destructuring in function parameters to destructure objects or arrays as parameters:

Array destructuring in functions:

function printCoordinates([x, y]) {
  console.log(`X: ${x}, Y: ${y}`);
}

printCoordinates([10, 20]); // X: 10, Y: 20

Object destructuring in functions:

function printPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Alice', age: 30 };
printPerson(person); // Name: Alice, Age: 30

Here the function parameters are extracted directly from the passed object.

Benefits of Destructuring:

  • Shorter code: Destructuring reduces the number of lines and simplifies the code significantly.
  • Readability: Variables are assigned in a clearer and more readable way.
  • Flexibility: It allows direct assignment of nested data structures and renaming of variables.

Summary:

JavaScript Destructuring is a very useful feature that allows developers to unpack arrays and objects efficiently and succinctly. It makes working with complex data structures easier and offers many opportunities to improve code readability and maintainability.

Updated:

Similar Content