Qué es JavaScript ES6 y por qué te interesa aprenderlo

10 Oct, 2018 · 5 minutos lectura

Seguramente ya hayas escuchado hablar sobre JavaScript ES6. Internet está lleno de artículos detallando algunas de sus funciones más llamativas, pero, ¿qué significa en realidad ES6? 🧐

ES6 (también referido como ES2015) es la abreviatura de ECMAScript v6. Si te preguntas de dónde viene ese nombre, encontrarás la explicación en la historia del lenguaje.

Originalmente, Brendan Eich creó Mocha, más tarde renombrado a LiveScript y finalmente bautizado como JavaScript.

Netscape quiso estandarizar el lenguaje y lo presentó a Ecma Internacional (European Computer Manufacturer’s Association), quienes se dedican a desarrollar estándares para TIC. Estos lo renombraron a ECMA-262 (ECMAScript) debido a problemas legales con el nombre JavaScript.

De esta manera, ECMAScript es un estándar para lenguajes de scripting (lenguajes interpretados diseñados para funcionar con otros lenguajes de programación).

Teniendo esto en cuenta, es importante entender que el JavaScript que interpretan los navegadores actuales no es el mismo que desarrolló Brendan Eich, sino un dialecto basado en el estándar ECMAScript.

Eso explica por qué hay diferencias al ejecutar un mismo código JavaScript en distintos navegadores, puesto que, aunque todos los navegadores se rigen bajo el estándar ECMAScript, estos suelen agregar funcionalidades propias sobre el mismo que no implementan el resto (por ejemplo, Mozilla lista las características no estandarizadas disponibles en Firefox en esta web

Una vez tenemos todos estos conceptos claros, volvamos a ECMAScript 6.

La adopción de ES6 por los navegadores en la actualidad es muy alta. La mayoría de las nuevas incorporaciones del estándar ya están implementadas en las últimas versiones. No obstante, hay que tener en cuenta que aún podemos encontrarnos con algunas excepciones.

Para solventar este problema, surgió Babel, un compilador que nos permite convertir código escrito en ES6 o posterior a código compatible con exploradores que aún no han implementado al completo el estándar.

Hoy en día podemos usar ES6 con tranquilidad, ya que, como podemos comprobar en el siguiente cuadro informativo, la adopción por los navegadores es prácticamente completa, salvando ciertas funciones del estándar que son menos populares.

Adopción de ES6

JavaScript ES6 trae consigo algunas novedades que extienden las posibilidades del lenguaje y nos permiten resolver algunos de los problemas más comunes de una forma más declarativa.

Tres de las novedades más populares en ES6 son las arrow functions, los módulos y las nuevas formas de declarar una variable en JavaScript. Veamos en qué consisten.

Arrow Functions

Las arrow functions nos permiten declarar funciones anónimas sin hacer uso de la expresión function.

Su uso ha sido ampliamente debatido, debido a la mala praxis de multitud de desarrolladores al hacer uso de estas en todas las situaciones posibles sin llegar a comprender del todo su funcionalidad, causando errores difíciles de identificar y empeorando la legibilidad del código.

Un caso en el que estas funciones son útiles es cuando necesitamos acceder a la variable this referida al contexto de su bloque contenedor, ya que las arrow functions heredan su valor del mismo.

// Antes de ES6
var obj = {
    id: 42,
    foo: function foo () {
        setTimeout(function() {
            console.log(this.id)
        }.bind(this),100)
    }
}

// ES6
var obj = {
    id: 42,
    foo: function foo () {
        setTimeout(() => 
            console.log(this.id)
        ,100)
    }
}

Módulos nativos en ES6

Una de las novedades más útiles es la posibilidad de poder crear módulos de forma nativa en JavaScript.

Esto nos permitirá dividir nuestro código en varios archivos dependiendo de su funcionalidad, y abre las puertas de la re-utilización de un mismo código en más de un proyecto sin tener que preocuparnos de posibles conflictos de nomenclatura; podemos importar el código necesario de un módulo bajo un mismo namespace como modulo.CONSTANTE1 o usar un alias para un elemento importado en particular.

Tenemos varias opciones para exportar un módulo. Podemos exportar los elementos que queramos uno a uno, como en este ejemplo

export const NOMBRE = 'Iván Moreno'

export function funcionPublica (...args) {
   console.log(args[2])
}

function funcionPrivada () {
   console.log('Función privada')
}

O también es posible unificar todos los exports en una misma expresión

const NOMBRE = 'Iván Moreno'

function funcionPublica (...args) {
    console.log(args[2])
}

export { NOMBRE as ivan, funcionPublica }

Para importar un módulo externo podemos escoger importar únicamente las partes que necesitemos o hacer una importación global

// ---------------------------------
// import1.js
import { NOMBRE } from './ejemplo.js'

console.log(NOMBRE)     // "Iván Moreno"

// ---------------------------------
// import2.js
import * as modulo from './ejemplo.js'

console.log(modulo.NOMBRE)      // "Iván Moreno"

Declaración de variables en ES6

ES6 trae consigo dos nuevas formas de declarar variables: let y const.

Ninguna de estas dos nuevas inclusiones reemplaza directamente a var. Por ejemplo, let limita su ámbito de ejecución a su bloque contenedor, mientras que var nos permitirá acceder a su valor en toda la extensión de la función que la contiene.

function test () {
    if (x) {
        var y = 0;
        // y disponible en el contexto global
    }

    for(var i = 0; i < 2; i++) {
        // i disponible en el contexto global
    }

    for(let i = 0; i < 2; i++) {
        // i únicamente disponible en el loop
    }
}

const, por su parte, permite la declaración de constantes, es decir, variables que no pueden ser reasignadas.

Esto no significa que el valor de const sea inmutable (para ello disponemos de Object.freeze()), como podemos ver en el siguiente ejemplo.

const x = [1,2,3]
x.push(4)           // permitido, x = [1,2,3,4]

const y = 32
y = 27			// no permitido, error

Espero que este artículo te haya ayudado a comprender mejor de qué trata ES6 y te decidas a explorar en mayor profundidad sus nuevas funcionalidades, ¡estoy seguro de que te ayudarán en más de una ocasión!

Si tienes alguna duda, puedes contactar conmigo vía Twitter o dejar un comentario más abajo 😄

¡Hasta pronto! 👋🏻