Description

This allows for saving parts of arrays or objects into variables for easy usage. It helps in accessing items in arrays or objects and writing them in a short syntax.

Resource list:

I have gotten some knowledge from this article: More on array destructuring

Example 1: Destructuring arrays into variables;

let arr = ['Ikram', 'Kantor'];
let [firstName, surname]; = arr; //What's happening here is that the values set above are being passed into the firstName and surname properties.
//Note that variables are set from left to right. The first variable get the first item  in the array, the second variable gets the second item in the array, and so on.
//Destructuring assignment sets firstName = arr[0] and surname = arr[1]

console.log(arr); //result will be an array with 2 items which are Ikram and Kantor
console.log(firstName); //result will be Ikram
console.log(surname); //result will be Kantor

//Destructuring makes it easy to work with variables instead of array members.

//Here is another example
let [greeting, pronoun] = ["Hello", "I", "am", "Peace"];
console.log(greeting); //result will be Hello.
console.log(pronoun); //result will be I.

//Variables can be declared before being assigned like this;
let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I", "am", "Peace"];
console.log(greeting); //result will be Hello.
console.log(pronoun); //result will be I.

Quick Note

• Destructuring does not mean "destructive".
• It is called "destructuring assignment" because it "destructurizes" by copying items into variables. But the array itself is not modified.
• Variables are set from left to right
• It is a shorter way to write:

let firstName = arr[0];
let surname = arr[1];
//Instead of writing the above, it can be written like so;
let [firstName, surname] = arr;

Example 2: Skipping items in an array

//Items in the array can be skipped if they are not needed like this;
let [greeting, , , name] = ["Hello", "I", "am", "Peace"];
//Notice the comma separator(,)? It is used to skip items in an array. Two items have been skipped from the array.
console.log(greeting); //result will be Hello.
console.log(name); //result will be Peace.

//skipping items in an array at different positions;
let [, pronoun, , name] = ["Hello", "I", "am", "Peace"];
//Here, the first item and third item in the array have been skipped.
console.log(pronoun); //result will be I.
console.log(name); //result will be Peace.

//To skip all items in an array, it is done this way;
let [, , , ,] = ["Hello", "I", "am", "Peace"];

Example 3: Assigning the rest of an array

//To assign some items in an array to a variable, and the other items in the array to another variable, it is done like this:
let [greeting, ...intro] = ["Hello", "I", "am", "Peace"];
//The rest parameter(...) has been used to assign the remaining items in the array to the intro variable.
console.log(greeting); //result will be Hello.
console.log(intro); //result will be ["I", "am", "Peace"].

Quick Note:

• The rest parameter(...) looks just like the spread operator(...). They are both different. The rest parameter collects all remaining elements into an array. The spread operator allows iterables(arrays/objects/strings) to be expanded into single arguments/elements.

Example 4: Destructuring assignment with functions

function getArray() {
    return ["Hello", "I", "am", "Peace"];
}

let [greeting, pronoun] = getArray();
console.log(greeting); //result will be Hello.
console.log(intro); //result will be I.

Example 5: Using default values:

//Default values can be assigned to variables in case the value extracted from the array is undefined.
let [greeting = "hi", name = "Peace"] = ["hello"];
//The greeting variable will have a value of "hello" as it is the first item in the      array. The name variable will have the value of "Peace" which is the default value      assigned to it because it is not defined in the array.

console.log(greeting); //result will be Hello.
console.log(name); //result will be Peace.

Example 6: Swapping values using destructuring

let x = 1;
let y = 2;

[x,y] = [y,x];

console.log(x); //result will be 2
console.log(y); //result will be 1