Módulo perteneciente al curso Programación avanzada con JavaScript y ECMAScript.

La sintaxis y capacidades del lenguaje JavaScript se encuentran reguladas por el organismo ECMA (European Computer Manufacturer Association - Asociación Europea de Fabricantes de Computadoras). Se trata de una organización sin ánimo de lucro que se encarga, entre otras cosas, de regular el funcionamiento de muchos estándares de la industria mundial, no solo de Europa. Entre estos estándares se encuentran los de algunos lenguajes de programación, como por ejemplo C# (que es el estándar ECMA-334), las extensiones del lenguaje C++/CLI, el lenguaje de descripción de servicios Web (WSDL) o, por supuesto, nuestro queridísimo ECMAScript que es el estándar ECMA-262.

La primera versión de JavaScript, ECMAScript 1, se lanzó en Junio de 1997, y desde entonces han existido las versiones 2, 3 y 5 (la 4 se abandonó), que es la que se conoce generalmente como simplemente JavaScript. Durante varios años ECMA estuvo trabajando en la siguiente versión del lenguaje, conocida como ECMAScript 6, y en junio de 2015 por fin vio la luz la versión definitiva, con el nombre oficial ECMAScript 2015.

Se trata de una evolución del lenguaje JavaScript para dotarlo de características avanzadas que se echaban mucho en falta y que sí estaban disponibles en otros lenguajes populares, como por ejemplo:

• Mejoras de sintaxis: parámetros por defecto, let, plantillas…
• Módulos para organización de código
• Sintaxis de “verdaderas” clases para programación orientada a objetos
• Promesas, para programación asíncrona
• Mejoras en programación funcional: expresiones de flecha, iteradores, generadores…

En Junio de 2016 ECMA lanzó una nueva versión del lenguaje, ECMAScript 2016 también conocida por algunos como ECMAScript 7, pero no es el ES7 que te piensas. En esta revisión sin embargo las novedades son mínimas, pero alguna hay.

Posteriormente, cada año se han ido introduciendo novedades en el lenguaje. En este completo segundo bloque se estudian a fondo todas y cada una de las novedades relevantes que han ido introduciendo las sucesivas versiones de ECMAScript, hasta la más reciente, y cómo aplicarlas tanto en navegadores que las soportan de manera nativa, como en navegadores más antiguos mediante el uso de transpiladores.

Entre otras cosas aprenderás:

• Nuevas funciones y tipos de datos
• Nuevas formas de declarar variables y su efecto en el ámbito, this, etc…
• Nuevos tipos de colecciones y agrupamientos de información
• Promesas
• Operador flecha, pérdida de this, uso de lambdas
• Mejoras y cambios en definición y notación de objetos
• Uso de literales de cadena y plantillas
• Símbolos y sus aplicaciones avanzadas
• Weakmaps
• Fetch
• Async/await
• Desestructuración de datos y el operador “spread”
• Nuevos tipos de bucles
• Iteradores y generadores
• Programación orientada a objetos con ECMAScript
• Creación y uso de proxies.
• Modularización de código
• Transpilación a ES5

¡Adelante!

El hoisting es una característica que muchos desarrolladores que han estado usando el lenguaje desconocen. Consiste en que, con independencia de donde declaremos una variable, la declaración se mueve al principio del ámbito. Además debemos tener presente que JavaScript tiene tan solo dos ámbitos: ámbito global o ámbito local (de función). No existe, como en otros lenguajes, el ámbito de bloque (aunque esto último cambia, como vamos a ver en este módulo).

¿Qué crees que imprime el siguiente código?

'use strict';
var n = 'eiximenis';
function foo() {
    n = 'campusMVP';
    var n = null;
    for (var i=0; i<10; i++) {
        n = 'iter ' + i;
    }
}
foo();
console.log(n);

Este código no da error. Se puede observar el uso del modo estricto, para que el motor de JavaScript nos avise de que accedemos a cualquier variable no declarada previamente. Se puede ver que la primera línea de la función foo accede a una variable n. Lo normal es pensar que esta variable n a la que se accede es la variable global cuyo valor es eiximenis. Posteriormente, se declara una variable local con el mismo nombre n. Sabemos que las variables locales “ocultan” a las globales si tienen el mismo nombre. Por lo tanto las asignaciones dentro del for afectan a la variable local, no a la global.

Visto así, lo lógico es pensar que al final de este código la variable local valdrá “iter 9” y la variable global tendrá el valor de “campusMVP”. Pero eso no es así. Al finalizar este código la variable global sigue teniendo el valor de “eiximenis“. ¿Cómo se entiende eso? Pues por el hoisting.

Recuerda que el hoisting significa que todas las declaraciones de variables se mueven al principio del ámbito correspondiente (y recuerda que aparte del global, el único ámbito existente es el local). Así, el código anterior es como si realmente se hubiese escrito:

'use strict';
var n = 'eiximenis';
function foo() {
    var n;              // La declaración se mueve al principio de la función
    n = 'campusMVP';
    n = null;
 
    for (var i=0; i<10; i++) {
        n = 'iter ' + i;
    }
}
foo();
console.log(n);

Leyendo este código queda claro que la asignación del valor ”campusMVP” es a la variable local, no a la global, y por lo tanto, se puede ver claramente que el valor de la variable global nunca se modifica dentro de la función foo. Como se puede comprobar en el ejemplo anterior, el uso del modo estricto no te previene de los efectos del hoisting.

Otra forma de definir el consiste en decir que dentro de un ámbito concreto (local, global, bloque) un identificador en concreto (es decir un nombre de variable) siempre hace referencia a la misma variable (por eso en el ejemplo, dentro del ámbito local el identificador “n” siempre hace referencia a la misma variable: la variable local “n”, aunque ésta esté definida posteriormente al código que accede a ella). En lenguajes que no tienen hoisting un mismo nombre de variable puede referenciar a variables distintas en función de cuando se use este nombre. Todas las declaraciones en JavaScript tienen hoisting, incluidas las variables declaradas con las nuevas palabras clave “let” y “const''”, a pesar de que en algunos sitios puedas leer lo contrario. En la lección siguiente se amplía esta información.