Section 9: Data Structures, Modern Operators and Strings

Question 1

What is Destructuring ?
Syntax in array and object?

Answer 1

extract specific values from complex data structures like arrays or objects and assign them to variables

const [x, y, z] = [1, 2, 3]; 
console.log(x, y, z); // 1 2 3
const { variable 1, variable 2} = object

Question 2

Destructuring’s Features for Array

Answer 2

1. Mutate variable
2. Assign variable
3. Destruct nested array/object
4. Set default value

Question 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'],
};

1/ Extract ‘Italian’ and ‘Vegetarian’ from categories into main and secondary variable, then mutate them by switch between 2 values
2/ Write a order method so that when input numbers (1,2), return array contains food’s name in Starter Menu and Main Menu.
3/ Call the method and Destruct returned array into variables ‘starter’ and ‘mainCourse’

Answer 3

1 /
// Print 1st and 3rd in categories and assign them in main, secondary variable. Skip 2rd category
let [main, , secondary] = restaurant.categories;
console.log(main, secondary); // Italian Vegetarian

// Switch Vegetarian to main and Italian to secondary
// Switch variables - Old trick, set a temp variable to hold main value
const temp = main;
main = secondary;
secondary = temp;
console.log(main, secondary); // Vegetarian Italian

// Switch variables - New trick using destructuring
[main, secondary] = [secondary, main];
console.log(main, secondary); // Vegetarian Italian"

2/ 
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'],

  // write a order method so when put an index number, it returns starterMenu and main Menu in array
  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
};

// Receive 2 return values in array from a function then destructure them into variables
const [starter, mainCourse] = restaurant.order(2, 0);
console.log(starter, mainCourse); // Garlic Bread, Pizza

Question 4

const arr = [1, 2, [4, 5], 6];

Assign 1,4,5,6 to variables a,c,d,e,f. If any variable is undefined, set it with default value of 100

Answer 4

const [a, , [c, d], e, f = 100] = arr;
console.log(a, c, d, e, f);

Question 5

Destructuring’s Features for Object

Answer 5

1. Change variable name
2. Set default value
3. Mutating value
4. Nested object
5. Destructuring object into variables

Question 6

const restaurant1 = {
  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'],
  realOwner: 'Vu Son',
  realAge: 27,

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },
};

let owner = 'Giovani';
let age = 40;

1. Assign variables restaurantName, address, hours with values from name, location, openingHours
2. Assign variables menu and starterMenu with values from object restaurant. Set both variables with default empty array in case both properties don’t exist in object
3. Change initial values of owner and age with value from realOwner and realAge in restaurant1 object
4. Get open and close of thursday and assign to variables
5. Given an object containing these information:
   ~~~
   restaurant1.orderDelivery({
   time: ‘22.30’,
   address: ‘97 Nguyen Thi Kieu’,
   starterIndex: 3,
   mainIndex: 2,
   });
   ~~~
   Write a method to print this string “Caprese Salad and Risotto will be delivered to 97 Nguyen Thi Kieu at 22.30”

Answer 6

//  1. Classico Italiano Via Angelo Tavanti 23, Firenze, Italy {thu: {…}, fri: {…}, sat: {…}}
2. [] (4)['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad']
3. Vu Son 27

// 1.
const {
  name: restaurantName,
  location: address,
  openingHours: hours,
} = restaurant1;
// console.log(restaurantName, address, hours); // Classico Italiano Via Angelo Tavanti 23, Firenze, Italy {thu: {…}, fri: {…}, sat: {…}}

// 2.
const { menu = [], starterMenu = [] } = restaurant1;
// console.log(menu, starterMenu); // [] (4)['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad']

// 3.
({ realOwner: owner, realAge: age } = restaurant1);
// console.log(owner, age); // Vu Son 27

// 4.
// OPTION 1
// const { open: openTime, close: closeTime } = restaurant1.openingHours.thu;

// OPTION 2
const {
  openingHours: {
    thu: { open: openTime, close: closeTime },
  },
} = restaurant1;
console.log(openTime, closeTime);

// 5. 
// put this method inside object restaurant and call method
  orderDelivery({ time, address, starterIndex, mainIndex }) {
    console.log(
      `${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
    );
  },

Question 7

Definition

The Spread Operator

Answer 7

The spread operator is used to spread elements from an iterable (like an array or a string) into another array, function arguments, or object literals.

Note: When using the spread operator, you need to provide a target (like a new array, function call, or object literal) to receive the spreaded elements.

Question 8

How to turn array into values separated by commas?

Answer 8

The Spread Operator