This story on HackerNoon has a decentralized backup on Sia.
Transaction ID: pa_myIn5CqRrSmpzprplU7TNA1DY2vOJLfrb1U6SF0Q
Cover

Destructuring in Javascript

Written by @the_rock | Published on 2020/9/2
TL;DR —
Destructuring in Javascript is a simple concept in javascript, it allows you to pull out some variables from object/array. It has a lot of features, including destructuring objects in array and for-of-of loops. There are some cool things you can do with it, such as renaming values and destructuring arrays. The code is written by Sasha Software Developer from monday to friday (Healthcare sector), Game Developer in free time, in his free time (healthcare sector)
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

[story continues]

Written by
@the_rock
Software Developer from monday to friday (Healthcare sector), Game Developer in free time
Topics and
tags
javascript|es6|webdev|programming|beginners|software-development|nodejs|coding
This story on HackerNoon has a decentralized backup on Sia.
Transaction ID: pa_myIn5CqRrSmpzprplU7TNA1DY2vOJLfrb1U6SF0Q