Notes for Jonas Schmedtmann's lecture Destructuring Arrays and Objects https://udemy.com/course/the-complete-javascript-course/learn/lecture/22648441#overview

Destructuring: Arrays and Objects

================================================= Destructuring Arrays =================================================

Declare multiple variables at the same time on the left side    > const arr = [1, 2, 3];
                                                                > const [a, b, c] = arr;
                                                                > console.log({a}, {b}, {c});
                                                                {a: 1} {b: 2} {c: 3}
                                                                
                                                                const restaurant = {
                                                                  name: 'Classico Italiano',
                                                                  location: 'Via Angelo Tavanti 23, Firenze, Italy',
                                                                  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
                                                                  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread',
                                                                  'Caprese Salad'],
                                                                  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
                                                                    order: function(startIndex, mainIndex){
                                                                      return [this.starterMenu[startIndex],
                                                                      this.mainMenu[mainIndex]]
                                                                    }
                                                                  }

To skip an index, you can use a blank space                     > let [first, , third] = restaurant.categories;
                                                                > console.log('Before Re-Assignment: ', {first}, {third});
                                                                Before Re-Assignment:  {first: "Italian"} {third: "Vegetarian"}
                                                                
Switching variables, space not needed                           > [first, third] = [third, first]
                                                                > console.log('After Re-Assignment: ', {first}, {third});
                                                                After Re-Assignment:  {first: "Vegetarian"} {third: "Italian"}
                                                                third: "Italian"__proto__: Object
                                                               
Receive return values from a function                          > console.log(restaurant.order(2, 0));
                                                               (2) ["Garlic Bread", "Pizza"]
                                                               > let [start, main] = restaurant.order(2, 0);
                                                               > console.log({start}, {main});
                                                               {start: "Garlic Bread"} {main: "Pizza"}
                                                                
Nested Destructuring                                           > const nested = [2, 3, [5, 6]];
                                                               > const [a, , [b, c]] = nested;
                                                               > console.log({a}, {b}, {c});
                                                               {a: 2} {b: 5} {c: 6}   
                                                                
Default Values                                                 > const [p, q, r] = [8, 9];
set value when destructuring in case index is missing          > console.log(p,q,r);
                                                               8 9 undefined
                                                               > const [p=1, q=1, r=1] = [8, 9];
                                                               > console.log(p,q,r);
                                                               8 9 1               

================================================= Destructuring Objects ================================================

                                                             const restaurant = {
                                                              name: 'Classico Italiano',
                                                              location: 'Via Angelo Tavanti 23, Firenze, Italy',
                                                              categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
                                                              starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
                                                              mainMenu: ['Pizza', 'Pasta', 'Risotto'],
                                                              openingHours: {
                                                                thu: {
                                                                  open: 12,
                                                                  close: 22,
                                                                },
                                                                fri: {
                                                                  open: 11,
                                                                  close: 23,
                                                                },
                                                                sat: {
                                                                  open: 0, // Open 24 hours
                                                                  close: 24,
                                                                },
                                                              },
                                                              order: function(startIndex, mainIndex){
                                                                return [this.starterMenu[startIndex], this.mainMenu[mainIndex]]
                                                              }
                                                            };
                                                            
Renaming object key names is useful when working with       > const { name, openingHours, categories } = restaurant;
third party data                                            > const { name, openingHours, categories } = restaurant;
                                                            {name: "Classico Italiano"} {openingHours: {…}} {categories: Array(4)}
                                                            > const { name: restaurantName, openingHours: hours, categories: tags } = restaurant;
                                                            > console.log({restaurantName}, {hours}, {tags});
                                                            {restaurantName: "Classico Italiano"} {hours: {…}} {tags: Array(4)}
                                                            > const {menu = [], starterMenu: starters = []} = restaurant;
                                                            > console.log({menu}, {starters});
                                                            {menu: []} (4) {starters: ["Focaccia", "Bruschetta", "Garlic Bread", "Caprese Salad"]}
                                                            
Mutating variables                                          > let a = 111;
place parenthesis around code that reassigns value          > let b = 999;
                                                            > const obj = { a: 23, b: 7, c: 14 };
                                                            > ({a, b} = obj);
                                                            > console.log({a}, {b});
                                                            {a: 23} {b: 7}
                                                            
Nested Destructuring                                        > const { fri } = openingHours;
                                                            > console.log({fri});
                                                            {fri: {open: 11, close: 23}}
                                                            > const { fri: { open, close } } = openingHours;
                                                            > console.log({open}, {close});
                                                            {open: 11} {close: 23}
                                                            > const { fri: { open: o, close: c } } = openingHours;
                                                            > console.log({o}, {c});
                                                            {o: 11} {c: 23}