Cacher is the code snippet organizer for pro developers

/*=============================================
= Destructuring 
=============================================*/
// Array
  // ES5
  var joe = ['Joe', 31]
  var name = joe[0]
  var age = [1]
  console.log(name, age)

  // ES 6
  var joe = ["Joe", 31];
  const [name, age] =  joe

// Object
  const obj = {
    firstname: 'Joe',
    lastname: 'Boo'
  }
  const { firstname: first, lastname: last } = obj;

  function calcAgeRetirement(year){
    const age = new Date().getFullYear() - year
    return [age, 65 - age]
  }

  const [age, retirement] = calcAgeRetirement(1990)
  console.log(age)
  console.log(retirement)



// Example 1
function convertCurrency(amount) {
    const converted = {
      USD: amount * 0.76,
      GPB: amount * 0.53,
      AUD: amount * 1.01,
      MEX: amount * 13.30
    };
    return converted;
  }

  const hundo = convertCurrency(100)
  //  Destructuring an objects
  // you can put your objects in any order and it will works fine
  const { USD, GPB } = hundo
  // console.log(USD, GPB);


  // default name argument
  // when passing in as an objects, it's gonna Destructuring them into an object. This will Destructuring them into vaiable.
  function tipCalc({total = 100, tip = 0.15, tax = 0.13}) {
    return total + (tip * total) + (tax * total)
  }
  console.log(tipCalc({ tax: 0.3}))
  // const bill = tipCalc({ tip: 0.20, total: 200 });

  //Example 2
  const person = {
    first: 'Wes',
    last: 'Bos',
    country: 'Canada',
    city: 'Hamilton',
    twitter: '@wesbos'
  };

/*=============================================
=            Example 1                       =
=============================================*/
  // const first = person.first;
  // const last = person.last;
  // const twitter = person.twitter;
  // output: Object {first: "Wes", last: "Bos", country: "Canada", city: "Hamilton", twitter: "@wesbos"}
  const { first, last, country, city, twitter } = person;


/*=============================================
=            Example 2                        =
=============================================*/
  const wes = {
    first: 'Wes',
    last: 'Bos',
    links: {
      social: {
        twitter: 'https://twitter.com/wesbos',
        facebook: 'https://facebook.com/wesbos.developer',
      },
      web: {
        blog: 'https://wesbos.com'
      }
    }
  };
  // twitter is stored in 'tweet'
  // facebook is stored in 'fb'
  // console.log(tweet);
  // output: Object {twitter: "https://twitter.com/wesbos", facebook: "https://facebook.com/wesbos.developer"}
  const { twitter: tweet, facebook: facebook } = wes.links.social;


/*=============================================
=            Example 3                        =
=============================================*/
const settings = {
  // width: 300,
  color: 'black'
}  // require height, fontSize

const {
	width = 100,
	height = 100,
	color = 'blue',
	fontSize = 25
} = settings;
// output: Object {width: 300, color: "black"}

//Example 3
let inRing = 'Hulk Hogan';
  let onSide = 'The Rock';

  // console.log('in ring' + inRing, onSide);
  console.log('In ring:'+`${inRing} ` + ', On Side: ' + `${onSide}`);
  // result: In ring:Hulk Hogan , On Side: The Rock

  [inRing, onSide] = [onSide, inRing]; // switching string value

  // console.log(inRing, onSide);
  console.log('In ring:'+`${inRing} ` + ', On Side: ' + `${onSide}`);
	// result: In ring:The Rock , On Side: Hulk Hogan

// Example 4
// Ex.1
  const details = ['Joe Boo邏 ', 123, 'kanisorn.com'];
  const [name,id,website] = details;
  console.log(`Name: ${name}, ID: ${id}, Website: ${website}`);
  // result: Name: Wes Bos, ID: 123, Website: wesbos.com


// Ex.2
  const data = 'bastketball, Sports, 90210, 23'
  // Destructuring an array
  const [itemName,category,sku,inventory] = data.split(', ');
  console.log(itemName,category,sku,inventory);
  // result: bastketball  Sports  90210  23


// Ex.3
  const team = ['a','b','c','d','e'];
  const [captain, assistant, ...players] = team;
  console.log(`captain:${captain}, assistant:${assistant}, players:${players}`); // using rest '...' operator means that it will give you the rest of an array
  // captain:a, assistant:b, players:c,d,e
  // result: a b ["c", "d", "e"]