Cheatsheet: fireship's-code-this-💪-not-that-💩

asyncawait.js

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


console.log('Esto es 💩 🙅🙅🙅');

const rumRandomAsyncNums = () => {
    let uno, dos, tres;

    return random().then(primero => {
        uno = primero;
        return random().then(segundo => {
            dos = segundo;
            return random().then(tercero => {
                tres = tercero;
                return uno + dos + tres;
            })
        }).then(result => console.log(result));
    })
}

console.log(`La suma hecha de manera tonta da: ${rumRandomAsyncNums()}`);

console.log('Esto es 👌 🙆🙆🙆');

const rumRandomAsyncNumsAsync = async() => {
    let uno = await random();
    let dos = await random();
    let tres = await random();

    console.log(uno + dos + tres);
}

rumRandomAsyncNumsAsync();

consolelog.js

console.log('Chuletilla del vídeo...');

// Fuente: https://dev.to/moriczgergo/nodejs-console-colors-101
// También dice una librería
const nodeColors = {
    "Reset": "\x1b[0m",
    "Bright": "\x1b[1m",
    "Dim": "\x1b[2m",
    "Underscore": "\x1b[4m",
    "Blink": "\x1b[5m",
    "Reverse": "\x1b[7m",
    "Hidden": "\x1b[8m",
    "FgBlack": "\x1b[30m",
    "FgRed": "\x1b[31m",
    "FgGreen": "\x1b[32m",
    "FgYellow": "\x1b[33m",
    "FgBlue": "\x1b[34m",
    "FgMagenta": "\x1b[35m",
    "FgCyan": "\x1b[36m",
    "FgWhite": "\x1b[37m",
    "BgBlack": "\x1b[40m",
    "BgRed": "\x1b[41m",
    "BgGreen": "\x1b[42m",
    "BgYellow": "\x1b[43m",
    "BgBlue": "\x1b[44m",
    "BgMagenta": "\x1b[45m",
    "BgCyan": "\x1b[46m",
    "BgWhite": "\x1b[47m"
}

const tom = { name: 'tom', age: 69, nervous: false };
const dick = { name: 'dick', age: 420, nervous: false };
const harry = { name: 'harry', age: 30, nervous: true };

console.log('Esto es 💩 🙅🙅🙅');

console.log(tom);
console.log(dick);
console.log(harry);

console.log('No podemos ver el nombre de la variable, por ejemplo!');

console.log('Esto es 👌 🙆🙆🙆');

console.log({ tom, dick, harry });

const cssLog1 = "color: #fe0fe0; font-weight: 'bold';";
const cssLog2 = "color: orange; font-weight: 'bold';";
console.log('%cY si estamos en el navegador, podemos poner estilos css!!' + ' %cSorprendente!', cssLog1, cssLog2);

console.log(`${nodeColors.FgBlue}${nodeColors.BgWhite}En node obvio que hay que hacerlo a la hard way...${nodeColors.Reset}`);

console.log("\nY no olvidemos la capacidad de tener una tabla!");

console.table([tom, dick, harry]);

console.log('Puede tenerse en cuenta el tiempo también, interesante para hacer benchmarks!');

for (let j = 0; j <= 4; j++) {
    console.time('timer_1');

    let i = 0;
    while (i < 10000000) i++;

    console.timeEnd('timer_1');
}

for (let j = 0; j <= 4; j++) {
    console.time('timer_1');

    let i = 0;
    while (i < 10000000) i++;

    console.timeEnd('timer_1');
}

console.log('Jajaja como producto de esta prueba parece que he encontra una memoization :)');

console.log('Para recordar al gran ☕, vamos a ver que se pueden sacar trazas. Útil para ver si una función se llama sin que lo sepamos desde dos sitios!');


const C0FFE_BABE = () => console.trace("☕");

C0FFE_BABE();
C0FFE_BABE();

destructuring.js

const ariel = {
    name: 'Ariel 🐶',
    legs: 4,
    shell: false,
    type: 'DOGGO',
    meal: 10,
    diet: 'Todo lo que se cae al suelo',
    cuteness: "> 9000",
    skills: ['Rabia && Destrucción', 'Vagancia']
};

const crunch = {
    name: 'Crunch 🐕',
    legs: 4,
    shell: false,
    type: 'DOGGO',
    meal: 100,
    diet: 'TODO!',
    cuteness: "👍",
    skills: ['CAOS Y ENTROpÏA', 'COMER']
};


console.log('Esto es 💩 🙅🙅🙅');

decirComidaCaca = (animal) => {
    console.log(`${animal.name} come ${animal.diet} x ${animal.meal} y su nivel de monosidad es: ${animal.cuteness}. Sus habilidades son: ${animal.skills.join(' y ')}`);
}

decirComidaCaca(ariel);
decirComidaCaca(crunch);

console.log('Esto es 👌 🙆🙆🙆');

decirComidaOK = ({ name, diet, meal, cuteness, skills }) => {
    console.log(`${name} come ${diet} x ${meal} y su nivel de monosidad es: ${cuteness}. Sus habilidades son: ${skills.join(' y ')}`);
}

decirComidaOK(ariel);
decirComidaOK(crunch);

decirComidaPR0 = (animal) => {
    const { name, diet, meal, cuteness, skills } = animal;
    console.log(`${name} come ${diet} x ${meal} y su nivel de monosidad es: ${cuteness}. Sus habilidades son: ${skills.join(' y ')}`);
}

decirComidaPR0(ariel);
decirComidaPR0(crunch);

const glotoneria = (animal) => {
    const { name, meal } = animal;
    const nivel = (meal >= 75) ? 'DEMASIADO!' : 'OK';
    return `El nivel de glotonería de ${name} es ${nivel}`;
}

console.log(glotoneria(ariel));
console.log(glotoneria(crunch));

console.log("Y ojo a esta cosa rara, que permite pasar parámetros dentro del literal, wtf...");

const glotoneriaRara = (str, name, type, meal) => {
    const nivel = (meal >= 75) ? 'DEMASIADO!' : 'OK';
    return `${str[0]} llamado ${name}, de tipo ${type} tiene un nivel de glotonería que se puede describir como: ${nivel}. ${str[1]} ${str[2]} ${str[3]}`;
}

//                         ==== TODO ESTO ES str                                               ===
//                          ----[0]----             1              2              ------[3]------
console.log(glotoneriaRara`El perrito: ${ariel.name}, ${ariel.type}, ${ariel.meal}. Qué panorama!`);
// Es decir, se pasa el string, y todo lo que no sea una variable, son los índices del string y los argumentos se sacam con el nombre!

functional.js

const items = [23, 21, 54, 823, 22];

const totals = items.reduce((acc, curr) => acc + curr);

console.log(`El total de sumar los elementos de ${items} es ${totals}`);

const opuestos = items.map(element => element *= -1);

console.log(`Los opuestos de ${items} son: ${opuestos}`);

const veintipocos = items.filter(num => num >= 20 && num <= 30);

console.log(`De ${items}, los veintipico son: ${veintipocos}`);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba en web para tener las tools del navegador!</title>
</head>
<body>
    
</body>
<script defer src="consolelog.js"></script>
</html>

spread.js

const pj = {
    name: "Pepe",
    clazz: "Rogue"
}

const rogueskillslevel1 = {
    skills: [
        'sneak attack',
        'hide in shadows'
    ]
}

const rogueskillslevel2 = {
    skills: rogueskillslevel1.skills.concat([
        'dodge'
    ])
}

let rogueSkills = {
    level1_skills: rogueskillslevel1,
    level2_skills: rogueskillslevel2
}

console.log(`Podemos hacer esto:`);

const lvl1Pj = Object.assign(pj, rogueSkills.level1_skills);
console.log({ "level1": lvl1Pj });
const lvl2Pj = Object.assign(pj, rogueSkills.level2_skills);
console.log({ "level2": lvl2Pj });

console.log(`O empezar a usar la sintaxis de spread...`);

const lvl1Rogue = { ...pj, ...rogueSkills.level1_skills };
console.log({ "level1": lvl1Rogue });
const lvl2Rogue = { ...pj, ...rogueSkills.level2_skills };
console.log({ "level2": lvl2Rogue });

console.log(`Que vemos que nos puede simplificar las cosas:`);

const rogueskillslevel3 = {
    skills: [...rogueskillslevel2.skills, 'Uncanny Dodge', 'Trap sense']
}

rogueSkills = {...rogueSkills, level3_skills: rogueskillslevel3};

const lvl3Rogue = { ...pj, ...rogueSkills.level3_skills};
console.log({ "level3": lvl3Rogue });