[JS] #js #tip&tricks

JavaScript Pro Tips - Code This, Not That.js

//
// Computed Property Names //

const foo = {name: 'tom', age: 30, nervous: false}
const bar = {name: 'tim', age: 30, nervous: false}
const baz = {name: 'loo', age: 30, nervous: true}
// BAD:
console.log(foo)
console.log(bar)
console.log(baz)
// GOOD:
console.log('%c My Friends', 'color:orange;') //optional color styling
console.log({foo, bar, baz})

//
// Console Table //

console.table([foo, bra, baz])

//
// Console time //

console.time('looper')
let i = 0
while(i < 100000) {i++}
console.timeEnd('looper')

//
// Stack Trace logs //

const deleteMe = () => console.trace('bye bye databse')
deleteMe()
deleteMe()

//
// Destructuring //

const turtle = {
	name: 'Bob',
    legs: 4,
    shell: true,
    type: 'amphibious'
    meal: 10,
    diet: 'berries'
}
// BAD:
function feed(animal) {
	return `Feed ${animal.name} ${animal.meal} kilos of ${animal.diet}`
}
// GOOD:
function({name, meal, diet}) {
	return `Feed ${name} ${meal} kilos of ${diet}`
}
function(animal) {
    const {name, meal, diet} = animal
	return `Feed ${animal.name} ${animal.meal} kilos of ${animal.diet}`
}

//
// Template literals //

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

// BAD:
let bio = horse.name + ' is a ' + hose.size + ' horse skilled in ' + horse.skills.join(' & ')
// GOOD:
const {name, size, skills} = horse
bio = `${name} is a ${size} horse skilled in ${skills.join(' & ')}`

// Advanced Tag Example
function horseAge(str, age){
	const ageStr = age > 5 ? 'old' : 'young'
    return `${str[0]} ${age} years ${ageStr}`
}
const bio2 = horseAge`This horse is ${horse.age}.`

//
// Spread Syntax //

const pikachu = {name: 'Pikachu'}
const stats = {hp: 40, attack 60, defense: 45}

// BAD:
pikachu['hp'] = stats.hp
pikachu['attack'] = stats.attack
pikachu['defense'] = stats.defense
// GOOD:
const lvl0 = Object.assign(pikachu, stats) // multi assign
const lvl1 = Object.assign(pikachu, {hp: 45}) // single assign
// OR:
const lvl0 = {...pikachu, ...stats}
const lvl1 = {...pikachu, hp: 45}

// Arrays
let pokemon = ['Arbok', 'Raichu', 'SandShrew']
// BAD:
pokemon.push('Bulbasaur')
pokemon.push('Metapod')
pokemon('Weedle')
// GOOD:
pokemon = [...pokemon, 'Bulbasaur', 'Metapod', 'Weedle',] // push
pokemon = ['Bulbasaur', 'Metapod', 'Weedle', ...pokemon,] // unshift
pokemon = ['Bulbasaur', ...pokemon, 'Metapod', 'Weedle',] // splice

//
// Loops //

const orders = [500, 30, 99, 15, 223]
// BAD:
const total = 0
const withTax = []
const highValue = []
for (i = 0; i < orders.length; i++) {
	total += orders[i] //Reduce
    withTax.push(orders[i] * 1.1) // Map
    if(orders[i] > 100) {highValue.push(orders[i])} // Filter
}
// GOOD:
const total = orders.reduce(acc, cur) => acc + cur // Reduce
const withTax = orders.map(v => v * 1.1) // Map
const highValue = orders.filter(v => v > 100) // Filter

//
// Async-await //

const random = () => {
	return Promise.resolve(Math.random())
}
// BAD:
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
    	})
  		.then(v => {
        	console.log(`Result ${v}`)
    	})
}
// GOOD:
const sumRandomAsyncNums = async() => {
  
	const first = await random()
    const second = await random()
    const third = await random()
    
    console.log(`Result ${first + second + third}`)
}

nice_sort

arr.sort(function(a, b){
            if(a.QTY_TEST < b.QTY_TEST) return 1;
            if(a.QTY_TEST > b.QTY_TEST) return -1;
            return 0;
        });