Skip to content

JavaScript Array Destructuring

المعرفة:: JavaScript
الحالة:: ملاحظة_مؤرشفة
المراجع:: The Complete JavaScript Course 2022 From Zero to Expert, syahshiimi’s notes


What Is Array Destructuring?

  1. Array destructuring is a modern advanced operator in JavaScript

  2. It is a method to complex large, complex data structures into smaller, less complicated data structures.

Simple destructuring implementation

const arr = [2, 3, 4];  
const a = arr[0];  
const b = arr[1];  
``;  
const c = arr[2];  
// With destructuring operations, we can declare the array in the const variable instead  
const [x, y, z] = arr;  
console.log(x, y, z);  

We are not destroying the original array rather unpacking it.

Swapping Variables

// Switching variables  
// The old way  
const temp = main;  
main = secondary;  
secondary = temp;  
console.log(main, secondary);  
// The better way  
[main, secondary] = [secondary, main];  
console.log(main, secondary);  

Unpacking returned arrays

const restaurant = {  
  name: "Classico Italiano",  
  location: "Via Angelo Tavanti 23, Firenze, Italy",  
  categories: ["Italian", "Pizzeria", "Vegetarian", "Organic"],  
  starterMenu: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"],  
  mainMenu: ["Pizza", "Pasta", "Risotto"],  

  order(starterIndex, mainIndex) {  
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];  
  },  
};  

// Receive 2 return values from a function  
const [starter, mainCourse] = restaurant.order(2, 0);  
console.log(starter, mainCourse);  

Skipping Items While Destructuring

let [main, , secondary] = restaurant.categories; // Notice the ", ," that will skip the second item  
console.log(main, secondary);  

Nested Destructuring

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

Destructuring Arrays Of Unknown Length and Default Values

// We can use default values  
const [p, q, r] = [8, 9];  
console.log(p, q, r); // will return 8, 9, undefined  
// We can set default values to solve this issue  
const [p = 1, q = 1, r = 1] = [8, 9];  
console.log(p, q, r); // will return 8, 9, 1  

Last update : August 14, 2023
Created : August 23, 2022

Comments

Comments