1// JS Tip of the Day
2// Logical assignment operators
3
4let hero = 'Batman';
5let newHero = 'Superman';
6
7/*
8 &&= operator is equivalent of: 
9 	if (hero) { hero = newHero; }
10  or 
11  	hero && (hero = newHero);
12*/
13hero &&= newHero; 
14
15/*
16 ||= operator is equivalent of: 
17 	if (!hero) { hero = newHero; }
18  or 
19  	hero || (hero = newHero);
20*/
21hero ||= newHero; 
22
23/*
24 ??= operator is equivalent of: 
25 	if (hero === null) { hero = newHero; }
26  or 
27  	hero ?? (hero = newHero);
28    
29 ?? operator understands nullish values, and will not work for values that are falsy.    
30*/
31hero ??= newHero;

1// JS Tip of the Day
2// How to trigger events (Destructuring Edition :D)
3
4const el = document.querySelector('.example-class');
5
6const defParams = { hero: 'An Hero' };
7// Add an event listener to an element
8el.addEventListener('click', ({ detail: { hero } = defParams }) => {
9  console.log(`${hero} clicked me!`); 
10});
11
12el.dispatchEvent(new Event('click')); 
13// An hero clicked me!
14el.dispatchEvent(new CustomEvent('click', { detail: { hero: 'Batman' } })); 
15// Batman clicked me

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