iWexter/README-ECMAScript.md

ECMAScript6

Novedades acerca de ECMAScript6 2019/06/05

Definición de variables 'const' y 'let' 💬

Errores de compilación

'var' puede convertir las variables en datos nuevos ❗

var nombre = 'Erick';
var nombre = 'Osorio';

console.log(nombre); //Osorio

'let' y 'const' no puede convertir las variables en datos nuevos ❗

let nombre = 'Erick';
let nombre = 'Osorio';

const nombre = 'Erick';
const nombre = 'Osorio';

console.log(nombre); //Error (al menos compilando con babel) 
//Duplicate declaration "nombre"

Scope de Javascript normal

Explicación del scope según Kyle Simpson

La burbuja 1 abarca el scope global y tiene solo un identificador en foo.

La burbuja 2 abarca el scope de foo, que incluye los tres identificadores: a, bar, y b.

La burbuja 3 abarca el scope de bar, e incluye solo un identificador: c.

(Kyle, 2014.)

Probando el scope con 'var'

Puede tomar datos fuera del bloque ❗

var edad = 18
function saludo(){
   var esAdulto = true;
}
console.log(esAdulto); //true

Probando el scope con 'let' (lo mismo en 'const')

No puede tomar datos fuera del bloque ❗

let edad = 18
function saludo(){
   let esAdulto = true;
}
console.log(esAdulto); //Error de referencia "esAdulto" no definido

Ahora puede tomar los datos dentro del bloque ✅

let edad = 18
function saludo(){
   let esAdulto = true;
   console.log(esAdulto); //true
}

Las variables 'const' no cambian solo en arrays

const nombre = 'Erick';
nombre = 'Osorio';
//Error "nombre" es sólo lectura ❌

const colores = ['Rojo', 'Verde'];
colores = 'Texto plano'
//Error "colores" es sólo lectura ❌

const colores = ['Rojo', 'Verde'];
colores.push('Azul')
console.log(colores) //['Rojo', 'Verde', 'Azul'] ✅

Template Strings 📝

Sirve para evitar escribir los + en textos representativos

const nombre = 'Erick';
const edad = 23;
const pais = "Mexico";

console.log("La persona es" + nombre + ", tiene " + edad + " y es de " + pais) ❌
console.log(`La persona es ${nombre}, tiene ${edad} y es de ${pais}`) ✅

Funciones tipo flecha ➡️

Simplifica las funciones normales

const nombres = ['Carlos', 'Alejandro', 'Manuel', 'Cesar'];

const numero_caracteres_mal = nombres.map((nombre) => {
   return `${nombre} tiene ${nombre.length} letras` 
}); ❌

const numero_caracteres = nombres.map(nombre => `${nombre} tiene ${nombre.length} letras`); ✅
//Solo en un parámetro quitar los paréntesis = (nombre) a nombre
console.log(numero_caracteres) 
//(4) ["Carlos tiene 6 letras", "Alejandro tiene 9 letras", "Manuel tiene 6 letras", "Cesar tiene 5 letras"]

Parámetros por defecto

Si el dato no es enviado evita undefined u otros datos no deseados (no aplica en '')

function registrarUsuario(nombre,
                           pais = 'No definido',
                           correo = 'No llega',
                           telefono = 'Vacío') {
   return `Nombre: ${nombre},
            País: ${pais},
            Correo: ${correo},
            Teléfono: ${telefono}`
}

console.log(registrarUsuario('Carlos', undefined, '[email protected]', ''))
//Nombre: Carlos, País: No definido, Correo: [email protected], Teléfono:

Desestructuración de arreglos

Puede usarse para nombrar variables a los elementos de un array que no los tenga especificados

const persona = ['Erick', 23, 'México'/*, 'Desarrollador web'*/];

const [nombre, , pais, profesion = 'No especificado'] = persona;

console.log(nombre); //Erick
console.log(profesion); //No especificado

mostrarInfo(persona);

const mostrarInfo = ( [nombre, , pais] ) => {
   console.log(nombre,pais); // Erick México
}

Desestructuración de objetos

El mismo caso para la desestructuración de arrays

const usuario = { 
   nombre: 'Erick',
   correo: '[email protected]',
   edad: 22,
   pais: 'Mexico',
   /*profesion: 'Desarrollador Web'*/
}

const {nombre, pais, profesion = 'No especificado'} = usuario;
const mostrarInfo = ( { nombre, profesion = 'Estudiante', pais} ) => console.log(`${nombre} es ${profesion} de ${pais}` )

mostrarInfo(usuario);//Erick es Estudiante de México

Clases (Constructores) 🚧

Para poder usar la herencia hay que asignar constructores a las clases, desde ahí se pueden asignar nuevos métodos e información nueva que necesite el constructor

class Usuario {
   constructor(nombre, edad){
      // Cuando se usan clases, las variables pasan a llamarse "Propiedades" 
      //Importante usar this para hacer referencia sólo al constructor
      this.nombre = nombre,   //Propiedades
      this.edad = edad        //Propiedades
   }
   //Las funciones dentro de clases se llaman métodos
   mostarSaludo(mensaje){
      return mensaje + "+" + this.nombre;
   }
}

Hereda desde Usuario y usa sus valores con super

class Estudiante extends Usuario{
   constructor(nombre, edad, carrera) {
      super(nombre, edad); //Trae los valores heredados
      this.carrera = carrera;
   }
   mostarSaludo(mensaje){
      return `${mensaje} ${this.nombre} de la carrera ${this.carrera}`;
   }
}

const erick = new Usuario('Erick', 23);

const Otro = new Estudiante('Otro', 30, 'Desarrollador web');

console.log(erick.nombre)  //Erick

console.log(Otro.edad)  //30

console.log(erick.mostarSaludo(" Estoy saludando a ")) //Estoy saludando a Erick

console.log(Otro.mostarSaludo(" Estoy saludando a")) //Estoy saludando a Otro de la carrera Desarrollador web

Parámetros Rest

Sirve para pasar un número indefinido de elementos y recibirlos de forma simple

const mostrarDatos = (nombre, edad, correo, pais) => {
   console.log(nombre, edad, correo, pais); //(4) ["Erick", 23, "[email protected]", "México"]❌
}

mostrarDatos('Erick', 23, '[email protected]', 'México') ❌

const mostrarDatos = (...datos) => { ✅
   console.log(datos); //(4) ["Erick", 23, "[email protected]", "México"] 
}

mostrarDatos('Erick', 23, '[email protected]', 'México')

Parámetros Spread

Sirve para pasar cada uno de los elementos como un elemento de argumento

const mostrarDatos = (...datos) => { 
   console.log(datos); //(4) ["Erick", 23, "[email protected]", "México"] 
}

mostrarDatos('Erick', 23, '[email protected]', 'México') ❌

const mostrarDatos = (...datos) => {
   console.log(datos);
}

const arregloDatos('Erick', 23, '[email protected]', 'México') 
mostrarDatos(...arregloDatos);✅

Promesas

Impide que el código se detenga de ejecutarse al fallar alguna parte del código

let promesa = new Promise ((resolve, reject) => {
   const exito = false; //Desencadenante para las funciones hechas o no
   if (exito){
      resolve("Bien :y:");
   } else{
      reject("Mal :(");
   }
});
promesa.then(mensaje=>{ console.log(mensaje); }) //resolve
         .catch(mensaje=> { console.log(mensaje); }); //reject

Fuentes ✒️

FalconMasters - Trabajo de youtube - FalconMasters
Erick Osorio - Documentación de Github - iWexter
Simpson, Kyle. Scope and closures. Sebastopol, CA: O'Reilly Media, 2014.