ECMAScript 6, lo nuevo. | Ser Programador.es

Definitivamente, uno de mis lenguajes favoritos es Javascript, tanto que en su momento lo odiaba por que inicialmente consideraba que aunque Javascript era muy accesible, cuando llegaba a ser demasiado, era un infierno mantener tu código, sin embargo, dicen que del odio al amor hay solo un paso, y precisamente, hoy, soy gran fan de Javascript y toda su magnifica capacidad.

Pero!, como bien dicen, más tardas en aprender una cosa, en lo que ya salio algo nuevo, lo mismo sucedió en mi caso, tal es el caso de ECMAScript 6, que aunque no es totalmente nuevo, pasará a ser un estandar a finales de Junio de este año, y yo dije, Oh my good!!!, hay que ver que trae de nuevo, y bien, despues de revisar algunas cosas de lo nuevo de ECMAScript 6, tengo intenciones de resumirselos en terminos generales.

Valores por defecto

Una de las primeras cosas que trae consigo ECMAScript 6, es la asignación de valores por defecto a los parámetros de las funciones, normalmente en Javascript, haciamos algo como lo siguiente:

function(param){
    if(param != undefined){
        //anything
    }
}

Ahora, con las nuevas características, podrémos hacer algo como lo siguiente:

function( page = false){
    if( page != false ){
        //anything
    }
}

Eso es de gran utilidad para algunas personas, y ahora, en con Javascript también será posible.

Función Arrow

Algo muy común en Javascript, es tener funciones con una estructura simliar a la siguiente:

var list = ['h1', 'h2', 'h3', 'h4', 'h5'];
list.forEach( function(arg){ 
    console.log(arg);
});

Esto, puede llegar a ser algo alborotoso, y los developers de Javascript han pensado en esto, es por eso, que de ahora en adelante, tendremos una nueva funciòn llamada arrow, que nos permitirá resumir lo anterior en algo como:

var list = ['h1', 'h2', 'h3', 'h4', 'h5'];
list.forEach( arg => {
    console.log(arg);
});

O incluso podemos pasar algo como esto:

var elevar = function(num, potenciar){
    return Math.pow(num, potenciar);
}

A esto:

var resultado = (num, potenciar) => return Math.pow(num, potenciar);

La función this

Definitivamente, algo gracioso de muchos que se inician en Javascript es que su mayor infierno, es como la función this, cambia de valor entre un scope y otro, y a veces puede llegar a ser tedioso estar inspeccionando en cada momento para saber que valor tiene this en los diferentes scopes, sin embargo, teniamos una solución para esto:

var Test = function(){
     var self = this;
     var saludar = function(){ console.log("hola"); }
     var modales = {
         presentarse : function(){
             self.saludar();
         }
     }
}

Pero ahora, con ECMAScript 6, tendrémos disponible una función llamada bind, que nos permitirá «casar» el scope de una función con el que estamos trabajando actualmente, por ejemplo:

var Test = function(){
     var saludar = function(){ console.log("hola"); }
     var modales = {
         presentarse : function(){
             this.saludar();
         }.bind(this)
     }
}

Así mismo, podemos resumir al código anterior, utilizando la función arrow de la siguiente manera:

var Test = function(){
     var saludar = function(){ console.log("hola"); }
     var modales = {
         presentarse : (e) => this.saludar
     }
}

Clases y Heréncia

En lo personal, me gusta como funciona javascript actualmente, pero estoy seguro de que a muchos de los que les costaba entender el lenguaje tal y como era esto les agradará, con lo nuevo de ECMAScript, tendrémos la posibilidad de utilizar clases, y así mismo, tener las ventajas que esto proporciona, como por ejemplo, la heréncia.

class Alumno extends Persona
{
    constructor(){
        this._nombre = '';
    }
    function calificar(materia = false, calificacion = 5)
    {
        //Anything
    }
}

Algo en lo que estoy muy a favor, es en lo de la herencia, aunque considero que al manejo de funciones como objetos era excelente, pero bueno, habrá que acostumbrarnos y así mismo habrá a quien le guste.
Así mismo, algo muy importante, es que podremos definir métodos set y get con algunas cosas interesantes:

class Alumno extends Persona
{
    constructor(name){
        this._nombre = name;
    }
    get nombre()
    {
        return this._nombre;
    }
    set nombre(name)
    {
        this._nombre = name;
    }
}
//Y utilizarlos como
let persona = new Alumno('juan');
console.log(persona.nombre); //juan
persona.nombre = 'manuel';
console.log(persona.nombre); //manuel

Declaraciones con Let

Esta mejora viene a ser algo muy interesante, ahora podremos declarar variables con la palabra let, la cual limitará el alcance del scope de la variable que estemos declarando, y bien, esto funcionará de la siguiente manera, actualmente nosotros podemos tener un código como el siguiente:

if( true ){
    var n = 3;
}
console.log(n); //Imprimirá 3, por que la variable se declaro arriba

Ahora, si declaramos la variable n con let, sucederá lo siguiente:

if(true){
    let n = 3;
}
console.log(n); //Imprimirá undefined

Así mismo, ahora contaremos con constantes, con una utilización muy similar:

const PI = 3.1416;

Templates en Strings

Algo que en definitiva, le hacía falta a Javascript, y lo admito, eso de andar haciendo templates de la siguiente manera es un infierno:

var template = 
"titulo"+ "subtitulo"+ "contenido" ; var html = template.replace("titulo", "Este es el título");

Ahora, con la nueva versión de EMACScript no solo podremos tener strings con multiples lineas, sino que también podremos hacer lo siguiente:

var title = "Ivan Alvarado";
var subtitle = "Blog personal";
var content = "Este es el contenido";
console.log("
${title}
${subtitulo}
${contenido}");

Definitivamente, es algo que le hacía falta a Javascript, y aunque se tardaron, lo tendremos.

Asignación Multiple

Ok, esto es algo nuevo en Javascript, pero genial, y la explicación no puede ser más simple:

var [titulo, subtitulo, contenido] = ['Soy el titulo', 'Soy el subtitulo', 'Soy el contenido'];
console.log(subtitulo); //Soy en subtítulo
console.log(titulo); //Soy el tìtulo

Ahora podemos asignar a multiples variables simultaneas multiples valores, eso definitivamente, es algo nuevo, y quizá, algo que en su momento pueda llegar a ser muy útil.

Crear un objeto a partir de otros

Algo muy interesante que leí sobre las nuevas funciones que tendrá EMACScript, es la capacidad de crear un objeto a partir de otros objetos, por ejemplo:

let item1 = { pos : 1 };
let item2 = { pos : 2 };

let complete = Object.assign({}, item1, item2);

Y listo, tenemos un objeto nuevo creado con otros objetos.. 🙂 genial ¿no?.

Definición abreviada de objetos

Cuantas veces no hemos tenido una situación como la siguiente:

var nombre = "ivan";
var apellidos = "alvarado";
var element = {
    nombre : nombre,
    apellidos : apellidos
}

De verdad es muy molesto, es por eso que los developers de Javascript pensaron que sería mejor verse así:

var element = {  
    nombre, 
    apellidos,
    edad : 26
};

Un nuevo Ciclo For!

Actualmente, hay algo muy incomodo a la hora de recorrer listas en Javascript, es el tipico for…in, de verdad en lo particular lo odio, pero no hay de otra, sin embargo, en la nueva versión de EMACScript, podremos hacer algo como:

var elements = [1,2,3,4,5,6,7,8,9,10];
for( let item of elements ){
    console.log(item);
}

De esta manera, item, tomará el valor de cada elemento del array, y no de un indice.

Módulos

Al fin!, tenemos módulos en Javascript, una de las cosas que más se esperaban, y no existe una sola forma de hacerlos.

Exportación única

class Persona{
    //Anything
}
export default Persona;

Exportación múltiple

function sumar(a,b){
    //anything
}
function restar(a,b){
    //anything
}
export sumar;
export restar;

Exportación combinada

class Persona{
    //Anything
}
function sumar(a,b){
    //anything
}
function restar(a,b){
    //anything
}
export default Persona;
export sumar;
export restar;

Importación Síncrona

import Persona from './Persona.js';
// Asignando a una variable
import * as myfunctions from './functions.js';
// Importando objetos y funciones
import myfunctions from './functions.js';
import { myObjeto } from './functions.js';

Importación Asíncrona

System.import('modulo')
  .then(modulo => {
    // código
  })
  .catch(error => {
    // código
  });

Y en fin, ¿que más quieren?, con esto tenemos solo la introducción a todo lo demás que viene con el resto de EMACScript, así, que con esto tenemos definitivamente mucho que aprender, y ¿a partir de cuando?, pues según informes, ECMAScript pasarña a ser un estandar a finales de Junio, aunque navegadores como Chrome ya estan implementando algunas funcionalidades, bueno, sin más, a darle muchachos, y bienvenidos sean las nuevas funcionalidades de JavaScript.