Destructuring in Javascript

Destructuring is a very simple concept in javascript, it allows you to pull out some variables from object/array, but it has a lot of features. Here are some cool things you can do with it!

Basics

//destructuring object
const fruit = { id: 0, name: "apple", color: "red" };
const { name, id } = fruit;
console.log(id + ": " + name);//0: apple

//destructuring array
const range = [0, 5];
const [min, max] = range;
console.log(min + " - " + max);//0 - 5

//destructuring objects in array
const fruits = [
    { id: 0, name: "apple", color: "red" },
    { id: 1, name: "pear", color: "yellow" }
];

const [{name: appleName, id: appleId}, {name: pearName}] = fruits;
console.log(appleName);//apple
console.log(appleId);//0
console.log(pearName);//pear

Destructuring inside of for-of loop

const fruits = [
    { id: 0, name: "apple", color: "red" },
    { id: 1, name: "pear", color: "yellow" }
];

for(let { id, name } of fruits){
    console.log(id + ": " + name);
    //first loop> 0: apple
    //second loop> 1: pear
}

Default value

const empty = {};
const { name = "apple", id = 5 } = empty;
console.log(id + ": " + name);//5: apple

const emptyRange = [];
const [min = 0, max = 100] = range;
console.log(min + " - " + max);//0 - 100

Renaming values

const fruit = { id: 0, name: "apple", color: "red" };
const { name: fruitName, id: fruitId } = fruit;
console.log(fruitId + ": " + fruitName);//0: apple

Destructuring function input

const printName = ({ name }) => {
    console.log(name); //apple
};

const fruit = { id: 0, name: "apple", color: "red" };
printName(fruit);

Rest operator

const fruit = { id: 0, name: "apple", color: "red" };
const { name, ...other } = fruit;
console.log(name);//apple
console.log(other);// { id: 0, color: "red" }

//destructuring array
const range = [0, 5, 55, 100];
const [min, max, ...other] = range;
console.log(min + " - " + max);//0 - 5
console.log(other);// [55, 100]

Nested properties

const fruit = {
    id: 0,
    name: "apple",
    properties: {
        color: "red",
        hasBugs: false
    }
};
const {name, properties: {color, hasBugs, isMature = false }} = fruit;
console.log(name);//"apple"
console.log(color);//"red"
console.log(hasBugs);//false
console.log(isMature);//uses default value: false

Swap values

let [one, two] = [1, 2];
[two, one] = [one, two];
console.log(one);//2
console.log(two);//1

Split string

const namePassString = "hello:world";
const [username, password] = str.split(":");
console.log(username);//hello
console.log(password);//world