En el anterior post, comenté algunas de las novedades de ECMAScript6, puedes ver el post en el siguiente link: Nuevas características de ECMAScript6 - I, así que en este post hablaremos de algunas más, en concreto de:

  • Clases
  • Promises
  • Operadores rest y spread


Clases

Tipicamente para simular herencia en JavaScript era necesario utilizar prototipos, sin embargo no era un trabajo muy sencillo de implementar, así en ECMAScript6 ahora disponemos de la palabra clave class para definir una clase y de extend para definir o heredar de una clase base, por ejemplo, para definir una clase Person:


class Person {
  constructor (name = "default"){
    this.name = name;
  }
  getPersonById(){
    return `get info from ${this.name}`;
  }
  get nombre(){
    return this.name;
  }
  set nombre(value){
    this.name = value;
  }
  updateInfo(){
    console.log("update info in class base");
  }
}

let Jack = new Person("Jack");
console.log(Jack.nombre); //imprime Jack
Jack.nombre = "New Jack";
console.log(Jack.nombre); //imprime New Jack
console.log(Jack.getPersonById()); //Imprime get info from New Jack

Ahora, si se quiere crear una nueva clase que herede de la clase Person definida anteriormente, es cuando debemos usar la palabra clase extends, en la siguiente porción de código se define la clase base Customer que va a heredar de Person:


class Customer extends Person {
  constructor (name, customerId){
    //super() calls the constructor of the base class
    super(name);
    this.customerId = customerId;
  }
  getCustomerType(){
    return "VIP";
  }
}

let Bruce = new Customer("Bruce", 1357);
console.log(Bruce.nombre); //imprime Bruce
console.log(Bruce.getCustomerType()); //imprime VIP

super permite acceder a métodos de la clase de la clase base.


Promises

En versiones anteriores a ECMAScript6, generalmente se utilizaban callbacks para ejecutar código luego que alguna operación asínccrona finalizaba ya fuera correcta o incorrectamente.

Ahora, en ECMAScript6 el manejo de operaciones asíncronas es más sencillo y legible gracias al uso de las Promises, veamos el siguiente ejemplo:


function getCustomer(){
  //Create the Promise
  return new Promise(
    function (resolve, reject){
      console.log("Getting customers");
      // Emulate an async server call here
      setTimeout(function(){
        var success = true;
        if (success){
          resolve( "Jack"); // get the customer
        }else{
          reject("Cannot get customer");
        }
      },3000);
    }
  );
}

let promise = getCustomer()
    .then((cust) => console.log(cust.toUpperCase()))
    .catch((err) => console.log(err));

console.log("Invoked getCustomers. Waiting for results");

Se define la función getCustomer que en teoría debe retornar un cliente, ahora, en dicha función se crea una Promise utilizando la palabra clave Promise, dicha Promise se instancia pasándole dos argumentos, el primero hace referencia a la función a llamar si la operación es correcta, y la segunda es la función a llamar si la operación falla, es por ello que cuando se hace uso de getCustomer usamos then() y catch() para manejar la respuesta o error en la ejecución de la Promise.

La ejecución de la Promise anterior imprime:


Getting customers
Invoked getCustomers. Waiting for results
JACK

Operadores rest y spread

El operador rest permite pasar diferentes argumentos a una función y recibirlos como un array, para usar este operador se deben usar tres puntos:


function sum(...nums){
  let total = 0;
  nums.forEach(function(num){
      total += num;
  });
  return total;
}

console.log(sum(5,5)); //imprime 10
console.log(sum(5,5,5,5)); //imprime 20

Por otra parte, el operador spread realiza lo contrario que rest, es decir, convierte un array a un listado de elementos, igualmente se usan los tres puntos:


function sum(num1, num2, num3){
  return num1 + num2 + num3;
}

console.log(sum(...[5,5,5])); //imprime 15
let nums = [10,20,30];
console.log(sum(...nums)); //imprime 15


Y por el momento es todo, en el siguiente post vamos a revisar el tema de transpilers.

Y no te olvides de compartir el post!