Destructuring in JavaScript

Destructuring is a powerful feature in JavaScript that allows you to extract values from arrays and objects more conveniently. Let’s explore how to use destructuring for both arrays and objects.

Destructuring Arrays

Destructuring arrays is a straightforward way to assign values to variables. For example: `

const arr = [1, 2, 3];
const [x, y, z] = arr;

console.log(x, y, z); // Output: 1 2 3

You can also skip elements by leaving them empty in the destructuring pattern:

let [x, , z] = arr;

Swapping Variables with Destructuring

Destructuring can be used for variable swapping efficiently:

[x, z] = [z, x];

Nested Destructuring

You can destructure nested arrays as well:

const nested = [2, 4, [5, 6]];
const [i, , [j, k]] = nested;
console.log(i, j, k); // Output: 2 5 6

Default Values

Destructuring allows you to provide default values for variables:

const [p = 1, q = 1, r] = [8, 9];
console.log(p, q, r); // Output: 8 9 undefined

const [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r); // Output: 8 9 1

Destructuring Objects

When destructuring objects, the order doesn’t matter, but variable names should match:

const restaurant = {
  name: "Classico Italiano",
  location: "Via Angelo Tavanti 23, Firenze, Italy",
  // ...
};

const { location, name } = restaurant;
console.log(`${location} ${name}`); // Output: Via Angelo Tavanti 23, Firenze, Italy Classico Italiano

Renaming Variables

You can also rename variables while destructuring:

const {
  name: restaurantName,
  openingHours: hours,
  categories: tags,
} = restaurant;
console.log(restaurantName, hours, tags);

Providing Default Values

Assign default values for variables during destructuring:

const { menu = [], starterMenu: starters = [] } = restaurant;
console.log(menu, starters);

Mutating Variables

You can use destructuring to reassign values to variables:

let a = 111;
let b = 999;
const obj = { a: 23, b: 7, c: 14 };

({ a, b } = obj);
console.log(a, b);

Nested Objects

Destructuring is also useful for handling nested objects:

const openingHours = {
  thu: { open: 12, close: 22 },
  fri: { open: 11, close: 23 },
  // ...
};

const { fri } = openingHours;
console.log(fri); // Output: { open: 11, close: 23 }

const {
  fri: { open, close },
} = openingHours;
console.log(open, close); // Output: 11 23

Using Destructuring in Function Definitions

Destructuring can simplify function definitions. Here are three ways to define functions:

1. Using an object as a parameter:

const orderDelivery = function (obj) {
  console.log(
    `Order received! ${obj.starter} and ${obj.mainCourse} will be delivered to ${obj.address} at ${obj.time}`
  );
};

2. Using destructuring for function parameters:

const orderDelivery = function ({
  starter = "Focaccia",
  mainCourse = "Pizza",
  time = "20:00",
  address,
}) {
  console.log(
    `Order received! ${starter} and ${mainCourse} will be delivered to ${address} at ${time}`
  );
};

3. Using primitive variables as parameters:

const orderDelivery = function (
  starter = "Focaccia",
  mainCourse = "Pizza",
  time = "20:00",
  address
) {
  console.log(
    `Order received! ${starter} and ${mainCourse} will be delivered to ${address} at ${time}`
  );
};

The second method is the most convenient, allowing you to set default values for each variable and not worry about the order of arguments when calling the function.