Si vas a hacer un proyecto nuevo  o simplemente vas a una entrevista como Javascript developer, hay puntos ES6 que deberías conocer.

Aunque no todos los aspectos de ES6 son soportados de forma nativa por los browser, sabemos que Babel, Typescript o Traceur  nos ayudan a ‘transpilar’ o convertir nuestro código de ES6 a ES5.

Usar frameworks como Angular 1x, Angular2, Emberjs , React , Aurelia o Vue con ES6 nos permite tener un código mantenible, desacoplado y testable.

ES6 incluye  módulos, Clases, Promises , Arrow Function, Interpolación, Default Paramenters y puedes ver mas detalles en http://es6-features.org/

Aquí solo brindo una pincelada rápida de los aspectos de ES6 que mas uso, para el proceso de transpiling usare JSPM y Babel , si no lo has configurado te recomiendo  “Manejo de módulos y Dependencias con JSPM“.

let y const

ES6 nos facilita el uso de let lo cual permite definir una variable para un scope especifico.

var lebron = 23
       if (true) {
           let lebron = "king";
           console.log(lebron); //king
       }
       console.log(lebron) //23

Ademas de let,  tenemos “const” para definir un valor constante que no varia cuando intentamos modificar su valor.

const CAVS = "winner"
CAVS = "losser"
console.log(CAVS)
//Resultado: Line 13: "cavs" is read-only

Arrow Functions =>

Es la forma corta de definir funciones en ES6,  si usamos “concise body” no es necesario usar el return para devolver el valor.

let WhoMVPGuy = (player) => player + " MVP"
console.log(WhoMVPGuy("lebron"))
// lebron MVP

Classes

Ya podemos crear clases con el keyword “class”  y utilizando this en el constructor podemos crear propiedades  o get para propiedades de solo lectura, ademas métodos  como MiMetodo() o métodos estáticos con “static”.

export class App {
    constructor() {
       console.log("hola");
       this.team = "cavs";
   }
    get CavsProperty() {
        return "Are you ready!!!"
   }
    ShowView() {
       const cavs = "winner";
       var lebron = 23;
       if (true) {
           let lebron = "king";
           console.log(lebron); //king
       }
       console.log(lebron) //23
       let WhoMVP = function(player) {
           return player + "MVP"
       }
       let WhoMVPGuy = (player) => player + " MVP
       console.log(WhoMVPGuy("lebron")
   }
   static GetPlayers() {
       console.log("Irving , Shumpper!")
   }
}

El keyword “extends” nos permite heredar de otra clase, “recordando llamar el método super()” en el constructor de clase hija, para iniciar el constructor de la clase padre.

export class Team {
   constructor() {
        this.team = "cavs";
   }
}
export class Player extends Team {
   constructor(number = 0) {
       super()
       this.number = number;
   }
}
let king = new Player(12)
console.log(king);
//Resultado: Player {team: "cavs", number: 12}

Interpolation

ES6 nos permite una forma fácil de interpolar valores en un string, usando `como delimitador y `${nuestravariable}  para renderizar.

let WhoMVPGuy = (player) => `Soy un el jugador ${player} el real MVP`
// Resultado: Soy un el jugador lebron el real MVP

For “of | in”

En el for podemos iterar con “of” ó “in”, con of lo realizamos  sobre el objeto.

let players = ['lebron', 'curry', 'durant'];
for (let player of players) {
    console.log(player);
}
//Resultado: lebron, curry, durant

Con “in” es sobre indices.

let players = ['lebron', 'curry', 'durant'];
for (let player in players) {
    console.log(player);
}
//Resultado: 0, 1, 2

Promises

ES6 tiene soporte nativo a las promises, las promesas es un objeto que espera a que una operación se complete y cuando finaliza esta puede enviar un “resolved o “rejected”.

El constructor de new Promise() acepta dos funciones como parámetros  ‘resolve’ y ‘reject’.

GetChampion(cavs, gsw) {
 const promise = new Promise(function(resolve, reject) {
 if (cavs > gsw) {
 resolve("cavs win")
 } else {
 reject(new Error('gsw win'))
 }
 })
 return promise
 }

Al devolver una promesa , el valor resuelto de la promesa se van pasando a las funciones asignadas o usando catch podemos tomar el error.

//usando la promesa
let cavs = 4
 let gsw = 3
 app.GetChampion(cavs, gsw).then(function(res) {
 console.log(res)
 }).catch(err => console.log(err))

//resultado: "cavs wins".

Nota: Recomiendo que mires el post de @carlosazaustre sobre manejar asincronía en js.
https://carlosazaustre.es/blog/manejando-la-asincronia-en-javascript/

Happy ES6!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *