Todo sobre ECMAscript 6

Vamos a hacer un repaso de las principales características de ECMAscript 6. ECMAscript es un lenguaje que se integra dentro del propio Javascript y del cual podemos aprovechar multitud de nuevas funcionalidades interesantes.

Variable let: Permite declarar la misma variable en diferentes scopes.

let i = 7;
{ 
    let i = 3;
    console.log(i); // 3
}

console.log(i); // 7

Variable const: Variable inmutable, no se puede cambiar su valor.

const a = 5;

a = 6; // error

Función Arrow (flecha): Otra forma de declarar funciones

//ES6
const a = (x, y) =>   x + y;

//Equivale a:
var a = function (x, y) {
    return x + y;
}

console.log( a(2,3) ); // 5

Loop for/of: Forma más simple de recorrer los elementos de un iterable (Array, String, etc.)

const numeros = [1, 2, 3, 4, 5]; // array de números
let textoNumeros = "";

for(let n of numeros) {
   textoNumeros += n + " ";
}

console.log(textoNumeros); // 1 2 3 4 5

Maps: Permite utilizar objetos como "keys"

// definimos objetos
const coche = {nombre: 'Coche'}; 
const moto = {nombre: 'Moto'};

const vehiculos = new Map(); // nuevo map

vehiculos.set(coche, 'Ford'); // la key es el objeto coche
vehiculos.set(moto, 'Yamaha'); // la key es el objeto moto

console.log(vehiculos.get(coche)); // Ford
console.log(vehiculos.get(moto)); // Yamaha

Sets: Iterable, como un Map pero sin "keys"

const numeros = new Set();

numeros.add(1);
numeros.add(132);

console.log(numeros.has(132)); // true

Clases: Podemos crear plantillas (templates) para nuestros objetos en forma de clases

class Casa {
  constructor(puertas, ventanas) { // el constructor es obligatorio siempre
    this.puertas = puertas;
    this.ventanas = ventanas;
  }
}

const miCasa = new Casa(5, 10);

console.log("Puertas: " +miCasa.puertas); // Puertas: 5
console.log("Ventanas: " +miCasa.ventanas); // Ventanas: 10

Promises: Objeto que se ejecuta asíncronamente. Resuelve correctamente o con error.

const promesa = new Promise((resuelveBien, resuelveError) => {
  let a = 2; // 2 para que devuelva OK, otro valor para que devuelva un error

  // aquí puede ir código que puede tardar tiempo en ejecutarse (por ej: llamada a una API)

  if(a == 2) {
    resuelveBien("Todo OK");
  } else {
    resuelveError("ERROR");
  }
});

// cuando acaba la ejecución del código de la promesa, devuelve uno de los 2 posibles valores
promesa.then {
  valorOk => {
    console.log(valorOk); // Todo OK
  },
  valorError => {
    console.log(valorError) // ERROR
  }
}

Variable Symbol: Identificador único y oculto en los objetos. Nos aseguramos que no se puede modificar desde fuera de nuestro código.

const coche = {
  color: "rojo",
  puertas: 4
};

let id = Symbol('id');
coche[id] = 1;

console.log(coche.id); // undefined
console.log(coche[id]); // 1

Parámetros con valores por defecto en las funciones.

let a = (x, y = 2) => x + y;

console.log(a(3)); // 5
console.log(a(3, 7)); // 10

Función Rest: Parámetro "(...)" que indica que puede haber un número indefinido de parámetros en forma de array.

let a = (...parametros) => {
  let suma = 0;
  for(let param of parametros)
    suma += param;
  return suma;
}

console.log(a(4, 6)); // 10

String.includes(): Devuelve true si el string contiene el valor indicado.

let texto = "Un texto de prueba";

console.log(texto.includes("prueba")); // true

String.startWith() y String.endWith(): Devuelve true si el string empieza o acaba con el valor indicado.

let texto = "Un texto de prueba";

console.log(texto.startWith("Un texto")); // true

let texto = "Un texto de prueba";

console.log(texto.endWith("prueba")); // true

Array.from: Devuelve el iterable indicado en forma de objeto Array.

let texto = "Hola Mundo";

console.log(Array.from(texto)); // [H,o,l,a, ,M,u,n,d,o]

Array.keys(): Devuelve un iterable con los keys de un Array.

let array = ["coche", "moto", "bici"];

let keys = array.keys();

let textoKeys = "";
for(let key of keys) {
  textoKeys += key + " ";
}

console.log(textoKeys); // 0, 1, 2

Array.find(): Devuelve el valor del primer elemento que cumple la condición de la función que se le pasa como parámetro.

let array = [1, 5, 7, 10];

let obtieneMayorCinco = valor => valor > 5; // cuando el valor sea superior a 5 por primera vez lo devolverá

console.log(array.find(obtieneMayorSiete)); // 7

Array.findIndex(): Devuelve el index del primer elemento que cumple la condición de la función que se le pasa como parámetro.

let array = [1, 4, 8, 14];

let indexMayorCinco = valor => valor > 5; // cuando el valor sea superior a 5 por primera vez devolverá el index

console.log(array.findIndex(indexMayorCinco)); // 2

Métodos Math.trunc(), Math.sign(), Math.cbrt(), Math.log2() y Math.log10().

// Math.trunc() devuelve la parte integral
console.log(Math.trunc(3,8)); // 3 

// Math.sign() devuelve si el número es negativo (-1), nulo o 0 (0) o positivo (1)
console.log(Math.sign(-7)); // -1
console.log(Math.sign(0)); // 0
console.log(Math.sign(12)); // 1

// Math.cbrt() devuelve la raíz cúbica
console.log(Math.cbrt(64)); // 4

// Math.log2() devuelve el logaritmo en base 2
console.log(Math.log2(2)); // 1

// Math.log10() devuelve el logaritmo en base 10
console.log(Math.log2(10)); // 1

Métodos Number.isInteger() y Number.isSafeInteger().

// Number.isInteger() devuelve true si es integral y false si no
console.log(Number.isInteger(4)); // true
console.log(Number.isInteger(3.1428)); // false

//Number.isSafeInteger() devuelve true si un integral se puede representar como un número de doble precisión  IEEE-754
console.log(Number.isSafeInteger(Math.pow(2, 53) - 1)); // true
console.log(Number.isSafeInteger(3.1)); // false

Métodos globales isFinite() y isNaN():

// isFinite() devuelve false si el argumento es infinito o no numérico (NaN), si no, devuelve true
console.log(isFinite(4/0)); // false
console.log(isFinite("texto")); // false
console.log(isFinite(8)); // true

//isNaN() devuelve true si el argumento es no numérico, en caso contrario devuelve false
console.log(isNaN(10)); // false
console.log(isNaN("coche")); // true

Object.entries(): devuelve un Iterator de array con los valores y keys.

const objeto = { 0: 'a', 1: 'b', 2: 'c' }

console.log(vehiculos.entries(objeto)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

Importar Módulos de 2 formas distintas.

// exports con nombre
import { id, telefono} from "./datosPersonales.js";

// exports por defecto
import nombre from "./usuario.js";

Estas son todas las novedades que incorpora ES6 con respecto a su versión anterior (ES5).