DEV Community

Ajay Baraiya
Ajay Baraiya

Posted on • Edited on

Destructuring #React Quick Notes.

#react #node #beginners #javascript

Remember basic meaning.

It means choosing only desire sweets from a cakeshop.

Here is an example to remember it.

const cakeVarieties = ['Chocolate','KitKat','Mango', 'Brownie']; const [myChoise1, myChoise2, ...rest] = cakeVarieties; console.log(myChoise1); //Chocolate console.log(myChoise2); //KitKat console.log(rest); //['Mango','Brownie'] --Remember rest means other things left and which is only be declared at last position. //Below is for #React.js const premiumCakeVarieties = {sameNameHere1: 'Chocolate', sameNameHere2:'KitKat', sameNameHere3:{fruitCakes :['Mango','Pineaple']}, sameNameHere4:'Brownie'}; const {sameNameHere1, sameNameHere2, sameNameHere4, sameNameHere3 : {fruitCakes:[cake1, cake2]}} = premiumCakeVarieties; //Notice: We have same variable name no matter in which order they are they will access array property where matching name of itself. console.log(sameNameHere1); //Chocolate console.log(sameNameHere2); //KitKat console.log(sameNameHere4); //Brownie console.log(sameNameHere3); //['Mango','Pineaple'] console.log(cake1); //Mango //this follows order here as we did not have key for it console.log(cake2); //Pineaple //this follows order here as we did not have key for it
Enter fullscreen mode Exit fullscreen mode

Notes

  1. While working with an Array we can destruct with defining array left side. 
const [a, b, ...rest] = [1,2,3,4]; //here an array both sides.
Enter fullscreen mode Exit fullscreen mode
  1. While working with object we need brackets i.e. {} 
const {a, b, ...rest} = obj; //here {} left side.
Enter fullscreen mode Exit fullscreen mode

We only require this basics to work around, although we can check over https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment, which has best detail explanation and can be used when we destruct more complex object. But make all object simpler as possible.

Top comments (0)