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

Pempaltes Boilerplates Introduction: How To Bootstrap your Dev Environment 

Portfolio

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Destructuring in Javascript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Getting Started With Svelte Framework

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Getting Started With Svelte Framework

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps