Javascript Destructuring assignment

Sometimes you have a javascript object and you would like to just populate some variables with its properties or pass them as parameters to a function in a quick, clean and easy way or if it’s an array, extract its elements without having to use the indexes for each element. You can use the Destructuring assignment for this, in this quick tips episode, you will learn how. Above is the vid and below you will find some useful notes.

1. 1.

   Pre-reqs

   • Have a browser like Chrome, Edge or Firefox installed
2. 2.

   Using the Destructuring Assignment

   • Object Destructuring

     let myObject = {
       a: 10,
       b: 20,
       c: 30
     }
     let { a, b, c } = myObject
     console.log(a, b, c);
     

   • Object Destructuring for Function Parameters

     function printValues({ a, b, c }) {
       console.log(a, b, c);
     }
     printValues(myObject);
     

   • Array Destructuring

     let myArray = [
       40,
       50,
       60
     ];
     let [ d, e, f ] = myArray;
     console.log(d, e, f);
     

   • Array Destructuring for Function Parameters

     function printValues([ d, e, f ]) {
       console.log(d, e, f);
     }
     printValues(myArray);
     

3. 3.

   Resources

   Can I Use - JavaScript operator: Destructuring assignment

   Destructuring assignment