523 reads

Destructuring in Javascript

by SashaSeptember 2nd, 2020

Too Long; Didn't Read

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)

Companies Mentioned

featured image - 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

L O A D I N G
. . . comments & more!

About Author

Sasha@the_rock

Software Developer from monday to friday (Healthcare sector), Game Developer in free time

Read my stories About @the_rock

TOPICS

programming #javascript #es6 #webdev #programming #beginners #software-development #nodejs #coding

THIS ARTICLE WAS FEATURED IN...

Customcraftedkeywords

Linkedbd

Coinerblog

Join HackerNoon

Latest technology trends. Customized Experience. Curated Stories. Publish Your Ideas