Skip to content

Destructuring.md

Latest commit

 

History

History
executable file
·
104 lines (82 loc) · 2.28 KB

Destructuring.md

File metadata and controls

executable file
·
104 lines (82 loc) · 2.28 KB

ES6 - Object Destructuring

  • Destructuring allows you to assign the properties of an array or object to variables.
  • Object destructuring is used curly braces {}.
  • Array destructuring is used square brackets [].

Example 1

  • Destructuring person object.
const person = {
  name: 'Andrew',
  age: 27,
  location: {
    city: 'Philadelphia',
    temp: 88
  }
};
const {name, age, location} = person;
console.log(`${name} is ${age}. the city is ${location.city} and ${location.temp}`);

Example 2

  • Destructuring social object.
const wes = {
  first: 'Wes',
  last: 'Bos',
  links: {
    social: {
      twitter: 'https://twitter.com/wesbos',
      facebook: 'https://facebook.com/wesbos.developer',
    },
    web: {
      blog: 'https://wesbos.com'
    }
  }
};
// Here is the BEST way!!
const {twitter, facebook}  = wes.links.social;

//This way is annoying!!
const twitter = wes.links.social.twitter;
const facebook = wes.links.social.facebook;

Example 3

  • Destructuring all properties in address.
const address = ['1299 S Juniper Street', 'Santa Monica', 'California', '90064'];
const [street, city, state, zip] = address;
console.log(`You are in ${street} ${city}, ${state} ${zip}.`);
//You are in 1299 S Juniper Street Santa Monica, California 90064.

Example 4

  • Destructuring only city and state in address.
const address = ['1299 S Juniper Street', 'Santa Monica', 'California', '90064'];
const [, city, state] = address;
console.log(`You are in ${city}, ${state}.`);
// You are in Santa Monica, California.

Example 5 - Set default �- Set state is New York as default

const address = ['1299 S Juniper Street', 'Santa Monica', 'California', '90064'];
const [, state='New York'] = address;
console.log(`You are in ${state}`); //You are in New York

Example 6 - coffee menu

  • Destructuring item and print A medium Coffee costs $3.50
const item = ['Coffee', '$3.00', '$3.50', '$3.75'];
const [itemName, small, medium, large] = item;
console.log(`A medium ${itemName} costs ${medium}`);
//A medium Coffee costs $3.50

References: