Menu

Intro a EcmaScript 6

ecmascript - December 27, 2018 por Carlos Rojas | Edita este Post.
EcmaScript6

El gran impacto que ha tenido javascript ha sido sorprendente y ha crecido de una manera muy significativa, podemos ver ahora javascript en cualquier parte, como lenguaje backend con node, podemos controlar robots con nodebots, en frontend con miles de proyectos y también hacer aplicaciones móviles y ahora tenemos una de las más recientes actualizaciones al lenguaje ES6 y vamos a ir aprendiendo caracteristicas que nos van a ayudar a tener mejores bases para nuestras Apps.

Principales características

Clases


Javascript es (o era) un lenguaje orientado a prototipos el concepto de clases no existía, pero ahora podemos hacer uso de un estilo de programación orientada a objetos definiendo clases de esta manera:

ES6 (Ahora):

class Person {
  name;
  age;

  constructor (name, age) {
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}

ES5 (Antes):

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.getName = function () {
    return this.name;
};

Esto es muy parecido a lenguajes como Java, Python, C# e inclusive PHP que tiene la opción de crear clases.

Módulos


Ahora podemos crear módulos específicos sin la necesidad de tantos namespaces para cada librería.

ES6 (Ahora):

//  lib/math.js
export function multiply (x, y) { return x * y }

//  someApp.js
import { multiply } from "./lib/math"
console.log(multiply(2, 2));

ES5 (Antes):

//  lib/math.js
LibMath = {};
LibMath.multiply = function (x, y) { return x * y };

//  someApp.js
var math = LibMath;
console.log(math.multiply(2, 2));

Promesas


Ahora el uso de promesas es nativo en el lenguaje y evitando tener tantos callbacks.

ES6 (Ahora):

doSomething(){
   return new Promise((resolve) =>{
     resolve(true);
   })
}

doSomething().then(rta => {
  console.log(rta);
});

ES5 (Antes):

function doSomething (onDone) {
  onDone();
}

doSomething(function(rta){
  console.log(rta);
})

Lo cual nos evitaría tener el uso excesivo de callbacks:

ES6 (Ahora):

doSomething()
.then((rta) => {
  console.log(rta);
})
.then((rta) => {
  console.log(rta);
})
.catch((error) => {
  console.log(error);
})

ES5 (Antes):

doSomething(function(rtaA){
  b(rtaA, function(rtaB){
    c(rtaB, function(rtaC){
      d(rtaC, function(rtaD){
        console.log(rtaD);
      })
    })
  })
})

let y const


Ahora con let podemos tener mejor control del ámbito global de nuestras variables sin tener que hacer funciones que se auto invoquen para proteger el scope y el uso de const podemos definir constantes.

ES6 (Ahora):

const PI = 3.14;
if(true) {
  let twitter = "@carlosrojas_o";
}
console.log(twitter); //Error porque twitter ha sido definida dentro de IF
console.log(PI); //3.14

PI = 3.12; //Error porque PI es un constante y no puede cambiar de valor una vez definida.

ES5 (Antes):

if(true) {
  var twitter = "@carlosrojas_o";
}
console.log(twitter); //twitter es global
//Const no existe en ES5

Arrow Functions


Podemos manejar funciones y enviarlas es mucho más fácil y cuando trabajamos con objetos no es necesario guardar la referencia del objeto para luego acceder a él.

ES6 (Ahora):

let numbers = [1,2,3,4];
numbers.map(item => item * 2); //[2,4,6,8]

class Person(){
  foo(){}
  bar(){
    document.addEventListener("click", (e) => this.foo());
  } 
}

ES5 (Antes):

var numbers = [1,2,3,4];
numbers.map(function(item){
  return item * 2;
}); //[2,4,6,8]

function Person(){
  this.foo = function(){}
  this.bar = function(){
    var self = this;
    document.addEventListener("click", function(e){
      self.foo();
    });
  }
}

Template Strings


Podemos concatenar un string de manera mucho más fácil y tener saltos de línea.

ES6 (Ahora):

let name = 'Carlos Rojas';
let twitter = '@carlosrojas_o';

console.log(`Mi nombre es ${name} y mi twitter es ${twitter}`);
let template = `<div>
  <h1>${name}</h1>
</div>`;

ES5 (Antes):

var name = 'Carlos Rojas';
var twitter = '@carlosrojas_o';

console.log('Mi nombre es ' + name + ' y mi twitter es ' + twiiter);
let template = '<div>' +
  '<h1>' + name  + '</h1>' +
'</div>';

Puedes revisar más ventajas desde aquí:

ES6 Features

Espero que este Post les sea de ayuda y proximamente vendran mas conceptos de los fundamentos en ES6. Hasta un proximo Post :)

¡Compártelo!