JavaScript Tips video https://www.youtube.com/watch?v=Mus_vwhTCq0&feature=youtu.be

tips.js

const foo = {name: 'Foo', age: 16, nervous: false};
const bar = {name: 'Bar', age: 18, nervous: false};
const baz = {name: 'Baz', age: 20, nervous: true};

// Bad code
// Debugging with console.log
console.log(foo);
console.log(bar);
console.log(baz);

// Good code
// Debugging with console.log obj
console.log({foo, bar, baz})

// Styling text before log
console.log("%c My Friends", "color: indigo; font-weight: bold");
console.log({foo, bar, baz});

// console.table when object share same properties
console.table([foo, bar, baz])

// benchmarking with console.timer
console.time('looper');
// let i = 0;
while(i < 1e5) { i+=1 };
console.timeEnd('looper');

// Stack trace
const deleteMe = () => console.trace("bye bye database");
deleteMe();
deleteMe();
/////////////////////////////////////////////////////////////////////////////////

// destructuring
const turtle = {
  name: 'Bob 🐢',
  legs: 4,
  shell: true,
  type: 'amphibious',
  meal: 10,
  diet: 'berries'
}

// Bad code
function feed1(animal) {
  return `Feed ${animal.name} ${animal.meal} kilos of ${animal.diet}`;
};
feed1(turtle);

// Good code
function feed2({ name, meal, diet }) {
  return `Feed ${name} ${meal} kilos of ${diet}`;
};
feed2(turtle);

function feed3(animal) {
  const {name, meal, diet} = animal;
  return `Feed ${name} ${meal} kilos of ${diet}`;
};
feed3(turtle);
////////////////////////////////////////////////////////////////////////////////

// template literal
const horse = {
  name: 'Topher 🐎',
  size: 'large',
  skills: ['jousting', 'racing'],
  age: 7
}

// Bad String code
let bio = horse.name + 
    ' is a ' + horse.size +
    ' horse skilled in ' +
    horse.skills.join(' & ');
console.log(bio); // Topher 🐎 is a large horse skilled in jousting & racing

// Good sring code
const { name, size, skills } = horse;
bio = `${name} is a ${size} horse skilled in ${skills.join(' & ')}`;
console.log(bio); // Topher 🐎 is a large horse skilled in jousting & racing

// better string code
function horseAge(str, age) {
  const ageStr = age > 5 ? 'old' : 'young';
  return `${str[0]}${ageStr} at ${age} years`;
};
bio = horseAge`This horse is ${horse.age}`;
console.log(bio); // This horse is old at 7 years
//////////////////////////////////////////////////////////////////////

// Spread syntax of Objects
const pikachu = { name: 'Pikachu 🐹' };
const stats = {hp: 40, attack: 60, defense: 45 };

// Bad code
pikachu['hp'] = stats.hp;
pikachu['attack'] = stats.attack;
pikachu['defense'] = stats.defense;

// OR 
const lv10 = Object.assign(pikachu, stats);
const lv11 = Object.assign(pikachu, { hp: 45 });

// Good code
const lv12 = { ...pikachu, ...stats };
const lv13 = { ...pikachu, hp: stats.hp };

// Array

let pokemon = ['Arbok', 'Raichu', 'Sandshrew'];

// Bad Array code
pokemon.push('Bulbasaur');
pokemon.push('Metapod');
pokemon.push('Weedle');

// Good code
// push
pokemon = [...pokemon, 'Bulbasaur', 'Metapod', 'Weedle'];

// Shift
pokemon = ['Bulbasaur', 'Metapod', 'Weedle', ...pokemon];
pokemon = ['Bulbasaur',  ...pokemon, 'Metapod', 'Weedle',];
////////////////////////////////////////////////////////////////////////

// loops
const orders = [500, 30, 99, 15, 223];

// Bad code

let total = 0;
let withTax = [];
let highValue = [];
for(i = 0; i < orders.length; i++) {
  // Reduce
  total += orders[i];
  
  // Map
  withTax.push(orders[i] * 1.18);
  
  // Filter
  if(orders[i] > 100) {
    highValue.push(orders[i]);
  }
}

// Good code
// _variable use is to avoid const already defined
const _total = orders.reduce((acc, cur) => acc + cur);

// Map
const _withTax = orders.map(v => v * 1.18);

// Filter
const _highValue = orders.filter(v => v > 100);

// async / await
const random = () => {
  return Promise.resolve(Math.random());
}

// Bad code
const sumRandomAsyncNums = () => {
  let first;
  let second;
  let third;
  
  return random()
    .then(v => {
      first = v;
      return random();
    })
    .then(v => {
      second = v;
      return random();
    })
    .then(v => {
      third = v;
      return first + second + third;
    })
}

// Good code

const _sumRandomAsyncNums = async() => {
  const first = await random();
  const second = await random();
  const third = await random();
  
  console.log(`Result ${first + second + third}`);
}