Ediciones ENI Editorial | líder en informática
Las novedades de EcmaScript 6
Presentación general
EcmaScript 6, también llamado ES6 o JavaScript 2015, es una evolución de JavaScript aparecida en 2015. En esta ocasión, JavaScript ha sufrido numerosos retoques, en particular con la aparición de nuevas sintaxis vinculadas al modelo de «programación orientada a objetos» (POO).
En lo que respecta a la POO, el lenguaje se parece sintácticamente a lo que podríamos encontrar en lenguajes principales como Java, C++ o incluso PHP 5, incluso aunque solo se trata de un disfraz.
En esta nueva versión se han implementado muchas otras novedades (o mejoras), en particular:
-
la importación/exportación de módulos (como encontramos en Node JS, que estudiaremos en el siguiente capítulo),
-
las funciones flecha (arrow functions),
-
la gestión de los procesamientos asíncronos mediante «promesas» (instrucción promise),
-
las tablas asociativas de tipo clave/valor (instrucción Map),
-
estructuras de datos nuevas o mejoradas (instrucciones Map, Set, WeakMap, WeakSet),
-
...
En este capítulo, vamos a implementar con ejemplos concretos las principales evoluciones. Es decir, puede que la exposición no sea del todo exhaustiva.
Aportaciones a nivel de la Programación Orientada a Objetos
1. Noción de prototipo
Comenzaremos nuestra serie de ejemplos ilustrando las novedades aportadas por EcmaScript 6 en lo relativo a la POO con un primer script que se proponía hasta la versión EcmaScript 5 (con fecha de diciembre de 2009).
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: poo_01.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: "POO" en EcmaScript 5 (noción de prototipo)
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script -->
<h3>EcmaScript 5 & 6: Noción de prototipo - Script poo_01.htm</h3>
<!-- Script JavaScript -->
<script>
/* Definición de una función constructor llamada Coche */
/* NOTA: El constructor está aquí vacío */
var Coche = function() {};
/* Comprueba la existencia por defecto de un prototipo */
/* para cualquier constructor */
document.write("Prototipo del constructor: " + Coche.prototype);
/* Agregar...Funciones flecha (arrow functions)
1. Ventajas de las funciones flecha
Encontrará dos ventajas en las funciones flecha (o arrow functions) introducidas con EcmaScript 6:
-
una sintaxis más ligera respecto a las funciones EcmaScript 5,
-
la no-creación de un nuevo «scope» asociado.
Estas ventajas parecen algo abstractas. Veamos, a través de un ejemplo completo, a qué se corresponde.
2. Ejemplo
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: arrow.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: Uso de la sintaxis arrow (=>)
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<!-- Scripts de compatibilidad ES6 (transpiling)
para Microsoft Edge -->
<script
src="https://google.github.io/traceur-compiler/bin/traceur.js">
</script>
<script
src="https://google.github.io/traceur-compiler/src/bootstrap.js">
</script>
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script -->
<h3>EcmaScript 6: Uso de la sintaxis arrow (=>)</h3>
<!-- Script JavaScript -->
<script>
// Definición de una tabla JavaScript coche deportivo
// (marca únicamente)
...Estructuras Map, Set y bucle for of
1. Presentación general
Sin pretender ser exhaustivos en este tema, estudiaremos la gestión de las siguientes estructuras de datos disponibles en EcmaScript 6:
-
Las tablas JavaScript (ya disponibles en versiones anteriores).
-
Las estructuras Map.
-
Las estructuras Set.
2. Ejemplo
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: map_set.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: Map y Set
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script -->
<h3>EcmaScript 6: Map, Set y bucle for ... of</h3>
<!-- Script JavaScript -->
<script>
//
// Definición de una tabla JavaScript y visualización
// de su contenido
//
document.write("<h4>Tabla JavaScript</h4>");
// Definición de una tabla JavaScript de coches
// (marca únicamente)
// let tabCoches = ["Porsche", "Ferrari", "BMW"];
let tabCoches = new Array("Porsche", "Ferrari", "BMW");
// Se agrega un 4o coche
...Ámbito de las variables (var o let)
1. Presentación general
La gestión del ámbito de las variables resultaba algo problemático en las anteriores versiones de JavaScript.
En adelante, resulta muy sencillo precisar el ámbito exacto de las variables mediante dos palabras clave diferentes situadas al principio de las declaraciones: var y let.
Veremos, a través de un ejemplo, el impacto de ambas soluciones.
2. Ejemplo
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: var_let.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: Declaración de variables mediante var o let
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script -->
<h3>EcmaScript 6: Declaraciones de variables mediante var
y let</h3>
<!-- Script JavaScript -->
<script>
// Definición de una variable porsche911 mediante var
// (ámbito en el conjunto del script)
var porsche911 = "Porsche 911"; ...Promesas (promise)
1. Presentación general
El objeto Promise (de «promesa») se utiliza para realizar procesamientos de manera asíncrona. Una promesa representa una operación que todavía no se ha completado, pero que se espera en el futuro (fuente: Mozilla Developer Network).
Tomemos el ejemplo de un procesamiento web extremadamente largo (por ejemplo, la descarga de un archivo voluminoso) que bloquea temporal o completamente el navegador. Las promesas, implementadas en JavaScript desde EcmaScript 6, resuelven este problema de una manera elegante.
Estudiemos la creación de una promesa mediante un ejemplo, fácil de interpretar, si bien no muy realista.
Para obtener la explicación detallada acerca del funcionamiento de las promesas, consulte los numerosos blogs disponibles en Internet, en particular:https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise
2. Ejemplo
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: promise.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: Uso de las promesas
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script -->
<h3>EcmaScript 6: Uso de las promesas</h3>
<!-- Script JavaScript -->
<script>
...Desestructuración
1. Presentación general
La asignación por descomposición (destructuring en inglés) es una expresión en JavaScript que permite extraer datos de una tabla o de un objeto gracias a una sintaxis cuya forma se parece a la estructura de la tabla o del objeto (fuente: Mozilla Developer Network).
2. Ejemplo
Script completo HTML/JavaScript
<!DOCTYPE html>
<!--
Nombre del script: destructuring.htm
Autor: Christian VIGOUROUX
Fecha de creación: 15/10/2018
Fecha de última modificación: 15/10/2018
Objetivo: Destructuring de tablas y objetos JavaScript
-->
<!-- Etiqueta html -->
<html>
<!-- Sección head -->
<head>
<!-- Etiqueta meta de gestión de la acentuación UTF-8 -->
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<!-- Sección body -->
<body>
<!-- Uso de la tipografía Arial -->
<font face="Arial">
<!-- Mostrar el título del script --> ...