1const myHero = {
2    name: 'Batman', 
3    weapon: 'Batarang',
4    vehicles: [
5       { type: 'motorcycle', model: 'Batpod' },
6       { type: 'car', model: 'Batmobile' }
7    ]
8};
9
10let {name, vehicles: [{model: vehicle}]} = myHero;
11console.log(name, vehicle); 
12// 'Batman', 'Batpod'
13
14let {name: newName, newVehicles = myHero.vehicles.map(v => ({model: v.model}))} = myHero;
15console.log(newName, newVehicles); 
16// 'Batman', [ { model: 'Batpod' }, { model: 'Batmobile' }]
17
18let {name: anotherName, vehicles: anotherVehicles} = myHero;
19console.log(anotherName, anotherVehicles); 
20// 'Batman', [ { type: 'motorcycle', model: 'Batpod' }, {  type: 'car', model: 'Batmobile' }]

1// JS Tip of the Day
2// How to trigger events (with details too)
3
4const el = document.querySelector('.example-class');
5
6// Add an event listener to an element
7// NOTE: You could use default parameter or an awesome destructuring syntax!
8el.addEventListener('click', (ev) => {
9  const hero = ev.detail?.hero ?  ev.detail.hero : 'An hero';
10  console.log(`${hero} clicked me!`); 
11});
12
13el.dispatchEvent(new Event('click')); 
14// An hero clicked me!
15el.dispatchEvent(new CustomEvent('click', { detail: { hero: 'Batman' } })); 
16// Batman clicked me!

1// JS Tip of the Day
2// Invoke a function after waiting
3
4// Delay function
5const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
6
7// A generic function
8const logHeroes = (...heroes) => console.log(heroes);
9
10delay(
11  logHeroes, // Function to invoke
12  2000, // Delay time 
13  'Batman', // First Argument for the logHeroes function
14  'Robin' // Second Argument for the logHeroes function
15); 
16
17// ['Batman', 'Robin'] after two seconds.
18

1// JS Tip of the Day
2// Check if all Array item passes a condition
3
4const heroes = [
5      { name: "Batman", superPower: "money",  team: 'Justice League' },
6      { name: "Superman", superPower: "flight",  team: 'Justice League' },
7      { name: "Wonder Woman", superPower: "superior strength",  team: 'Justice League' }
8];
9
10const haveMoney = heroes.every(hero => hero.superPower === 'money'); 
11console.log(haveMoney); // false
12
13const bestTeam = heroes.every(hero => hero.team === 'Justice League'); 
14console.log(bestTeam); // true

1// JS Tip of the Day
2// Improve readability with Numeric Separator
3
4const anIntegerNumber = 5_667_441;
5console.log(anIntegerNumber); // 5667441
6const aFloatNumber = 3.14159_26535;
7console.log(aFloatNumber); // 3.1415926535
8
9const aBinaryNumber =  0b101_0110_0111_1010_0111_0001;
10console.log(aBinaryNumber); // 5667441
11const anHexNumber = 0x0056_7A71;
12console.log(anHexNumber); // 5667441
13
14const aVeryBigNumber = 1e1_2;
15console.log(aVeryBigNumber); // 1000000000000
16
17// Don't do it!
18const anotherVeryBigNumber = 1e_12; // It's an error!
19const anotherFloatNumber = 3._14159_26535; // It's an error!