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 fruit = { : , : , : }; { name, id } = fruit; .log(id + + name); range = [ , ]; [min, max] = range; .log(min + + max); fruits = [
    { : , : , : },
    { : , : , : }
]; [{ : appleName, : appleId}, { : pearName}] = fruits; .log(appleName); .log(appleId); .log(pearName); //destructuring object const id 0 name "apple" color "red" const console ": " //0: apple //destructuring array const 0 5 const console " - " //0 - 5 //destructuring objects in array const id 0 name "apple" color "red" id 1 name "pear" color "yellow" const name id name console //apple console //0 console //pear Destructuring inside of for-of loop fruits = [
    { : , : , : },
    { : , : , : }
]; ( { id, name } fruits){ .log(id + + name); } const id 0 name "apple" color "red" id 1 name "pear" color "yellow" for let of console ": " //first loop> 0: apple //second loop> 1: pear Default value empty = {}; { name = , id = } = empty; .log(id + + name); emptyRange = []; [min = , max = ] = range; .log(min + + max); const const "apple" 5 console ": " //5: apple const const 0 100 console " - " //0 - 100 Renaming values fruit = { : , : , : }; { : fruitName, : fruitId } = fruit; .log(fruitId + + fruitName); const id 0 name "apple" color "red" const name id console ": " //0: apple Destructuring function input printName = { .log(name); }; fruit = { : , : , : };
printName(fruit); const ( ) => { name } console //apple const id 0 name "apple" color "red" Rest operator fruit = { : , : , : }; { name, ...other } = fruit; .log(name); .log(other); range = [ , , , ]; [min, max, ...other] = range; .log(min + + max); .log(other); const id 0 name "apple" color "red" const console //apple console // { id: 0, color: "red" } //destructuring array const 0 5 55 100 const console " - " //0 - 5 console // [55, 100] Nested properties fruit = { : , : , : { : , : }
}; {name, : {color, hasBugs, isMature = }} = fruit; .log(name); .log(color); .log(hasBugs); .log(isMature); const id 0 name "apple" properties color "red" hasBugs false const properties false console //"apple" console //"red" console //false console //uses default value: false Swap values [one, two] = [ , ];
[two, one] = [one, two]; .log(one); .log(two); let 1 2 console //2 console //1 Split string namePassString = ; [username, password] = str.split( ); .log(username); .log(password); const "hello:world" const ":" console //hello console //world

Apple

Yellow

Portfolio

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Destructuring in Javascript

Too Long; Didn't Read

Companies Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Destructuring in Javascript

Too Long; Didn't Read

Companies Mentioned

Sasha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES