ES6 / ES7 / ES8

javascript-es6-es7-es8.js

// ###################################################################

// Arrow function

function sumar(num1, num2) {
  return num1 + num2;
}

const sumar = (num1, num2) => num1 + num2;

// ## Ejemplo

const empleados = [
  { nombre: "Miguel", puesto: "Sysadmin" },
  { nombre: "Laura", puesto: "Diseñadora" },
  { nombre: "Alba", puesto: "Frontend" },
  { nombre: "Luis", puesto: "Backend" }
];

empleados.forEach(empleado =>
  console.log(`${empleado.nombre} trabaja como ${empleado.puesto}`)
);

// ###################################################################

// Object values

const empleado = { nombre: "Miguel", puesto: "Sysadmin" };

let resultado = Object.values(empleado);
// [ "Miguel", "Sysadmin" ]

// ## EJEMPLO FIREBASE

const empleados = [
  { nombre: "Miguel", puesto: "Sysadmin" },
  { nombre: "Laura", puesto: "Diseñadora" }
];

const empleados = {
  0: { nombre: "Miguel", puesto: "Sysadmin" },
  1: { nombre: "Laura", puesto: "Diseñadora" }
};

let resultado = Object.values(empleados);
// [ { nombre: "Miguel", puesto: "Sysadmin" }, { nombre: "Laura", puesto: "Diseñadora" } ]

// ###################################################################

// Object entries

const empleado = { nombre: "Miguel", puesto: "Sysadmin" };

let resultado = Object.entries(empleado);
// [ ["nombre", "Miguel"], ["puesto", "Sysadmin"]]

// ## EJEMPLO

const empleado = { nombre: "Miguel", puesto: "Sysadmin" };

Object.entries(empleado).forEach(([key, value]) =>
  console.log(`${key} : ${value} `)
);

// nombre: Miguel
// puesto: Sysadmin

// ###################################################################

// String padding

"jsday".padStart(2);
("jsday");
"jsday".padStart(7);
("  jsday");
"jsday".padStart(10, "hola");
("holahjsday");
"jsday".padStart(14, "#");
("#########jsday");

"jsday".padEnd(2);
("jsday");
"jsday".padEnd(7);
("jsday  ");
"jsday".padEnd(10, "hola");
("jsdayholah");
"jsday".padEnd(14, "#");
("jsday#######");

// ###################################################################

// Async / Await

async function loadUsers() {
  const users = await axios.get(apiURL);
}

async function loadUsers() {
  try {
    const users = await axios.get(apiURL);
    console.log(`Usuarios: ${users}`);
  } catch (error) {
    console.log(`Hubo un error ${error}`);
  }
}

// ###################################################################

// Spread operator (Objetos)

const empleado = { nombre: "Miguel", puesto: "Sysadmin" };
const empleadoFamilia = { hijos: 2, estado: "Casado" };

const persona = { ...empleado, ...empleadoFamilia};
// { nombre: "Miguel", puesto: "Sysadmin", hijos: 2, estado: "Casado" }

// Spread operator (Arrays)

const empleados = [ "Miguel", "Laura" ];
const empleadosDesarrollo = [ "Alba" ,"Luis" ];

const empleadosEmpresa = [ ...empleados, ...empleadosDesarrollo ];
// [ "Miguel", "Laura", "Alba" ,"Luis" ]

// ###################################################################

// Map

let numeros = [ 5, 10, 25];

let dobles = numeros.map(numero => numero * 2);

// numeros: [ 5, 10, 25];
// dobles: [ 10, 20, 50];

// ###################################################################

// Filter

let numeros = [ 5, 10, 25];

let resultado = numeros.filter(numero => numero > 5);

// [ 10, 25 ]


// ###################################################################

// Find
const empleados = [
  { nombre: "Miguel", puesto: "Sysadmin" },
  { nombre: "Laura", puesto: "Frontend" },
  { nombre: "Alba", puesto: "Frontend" },
  { nombre: "Luis", puesto: "Backend" }
];

let resultado = empleados.find(empleado => empleado.puesto === "Frontend");
// { nombre: "Laura", puesto: "Frontend" }


// ###################################################################

// Reduce

let numeros = [ 5, 10, 25];

//                                 0     5
//                                 5    10
//                                15    25
let total = numeros.reduce((previo, actual) => previo + actual, 0);
// resultado : 40

// Ejemplo 2

let palabras = ["Bienvenidos", " a ", "JSDayCAN2017"];

let mensaje = palabras.reduce((mensaje, palabra) => mensaje + palabra);

// Bienvenidos a JSDayCAN2017

// ###################################################################