Sección 3: JavaScript avanzado

Lección 5: ECMAScript 5 y ECMAScript 6

Si hay algo que hemos estado aprendiendo desde el principio del sendero, es que nada es estático en el mundo del desarrollo web. Mejoras son realizadas constantemente en HTML, CSS, JavaScript, e incluso en los navegadores web. Librerías también son creadas constantemente. Si recordamos, las librerías son sólo piezas de código CSS, HTML o JavaScript.

Son piezas de código escritas por algunas personas que podemos utilizar para no comenzar todo desde cero en nuestros proyectos.

Es parte de la naturaleza humana el mejorar constantemente. En esta lección aprenderemos nuevas características de JavaScript, pero antes repasemos un poco de lo que aprendimos anteriormente.

JavaScript fue creado por el equipo de desarrollo del navegador web Netscape, y luego todos los demás navegadores web comenzar a utilizar JavaScript. Entonces Netscape adhirió a JavaScript a una organización internacional de estandarización llamada ECMA.

De esta manera nació el estándar ECMAScript, de manera que todos los navegadores web pudieran usar una misma versión de JavaScript. La versión actual de ECMAScript es la novena y se conoce como ES9 (ECMAScript 9), la cual fue publicada en Junio de 2018.

En esta lección, comenzaremos estudiando ES5 y ES6, las cuales introdujeron algunas nuevas características muy poderosas, e hicieron que el escribir código sea más agradable. Grande parte del código que leerán hoy, en el 2018, usará estas características aportadas por ES5 y ES6.

Suena complicado aprender algo nuevo y en constante actualización que quizás no todos los navegadores web lo puedan soportar. Pero en realidad, todos los navegadores web soportan todas estas funcionalidades, principalmente gracias a algo llamado Babel.

Hace algunos años, se creó Babel para que los desarrolladores pudieran comenzar a utilizar las nuevas características de JavaScript apenas fueran publicadas, de manera que no tuvieran que esperar a que los navegadores web implementen estas nuevas características de JavaScript.

¿Cómo logra esto Babel? Echemos un vistazo a la web de Babel: https://babeljs.io

Hagamos click en el botón “Try it out”.

Podemos escribir algo empleando la sintaxis propuesta por alguna de las nuevas versiones de ECMAScript, y Babel lo traducirá a una versión de JavaScript que podrá ser ejecutada por todos los navegadores web.

Ahora aprendamos algo de las nuevas sintaxis. De ahora en adelante tomaremos todo lo aprendido en esta lección para escribir nuestro código, ya que es lo que la industria usa actualmente.

La primeras características que vamos a ver son let y const. Estas son nuevas formas de declarar variables, y fueron incorporadas en ES6. Por lo que la palabra “var” que veníamos usando hasta ahora, no la usaremos más. Ahora usaremos “let” y “const”. Veamos un pequeño ejemplo.

Como podemos ver lucen como variables de definidas con “var”. Ahora verifiquemos algunas cosas:

Esto resulta raro, porque si en lugar de let hubiéramos definido a las variables con la palabra var el valor devuelto sería false.

Esto resultado raro, ¿no? La causa de esto es que con var las variables definidas en el alcande de window comparten su valor, y por lo tanto pueden ser modificadas por una variable con el mismo nombre definida dentro de una función.

En cambio cuando creamos variables con la palabra let dentro de una función, la única forma de acceder a éstas es dentro de la función, y además la variable dentro de la función no modifica el valor de una variable con el mismo valor definida en el alcance de window. Veámoslo en el ejemplo que veníamos trabajando antes.

Esto se debe a que cada vez que definimos una variable usando let, si esta definición se encuentra entre dos llaves {}, esta nueva variable creará un nuevo scope (alcance). Debemos mentalizarnos a partir de ahora en esto, ya que emplearemos let en lugar de var desde aquí en adelante.

Ahora, ¿qué es const? Para entenderlo ejecutemos la siguiente sentencia a continuación de lo trabajado en el ejemplo anterior.

A partir de ES6 podemos definir constantes en JavaScript empleando la palabra const. Las constantes no pueden cambiar su valor a lo largo de la ejecución de un programa. ¿Entonces para qué sirven las variables? La verdad que son muy útiles, ya que no se producirán errores debido al cambio del valor de una variable.

El consejo a seguir es que si tenemos algo que no debería cambiar a lo largo de la ejecución de nuestros programas, deberíamos definirlo como una constante. Por ejemplo, una constante podría ser una función ya que su contenido no debería cambiar a lo largo del a ejecución.

Una cosa que debemos tener en cuenta es el caso cuando hacemos constante a un objeto. Veámoslo con un ejemplo.

Vemos que cuando queremos cambiar el valor del objeto completo tenemos un error, ya que fue definido como una constante. Pero si tratamos modificar una de sus propiedad no tendremos problemas.

Bueno, veamos ahora otra nueva característica: destructuring (desestructuración), consiste asignar los valores de las propiedades de un objeto a variables y/o constantes. Sigamos usando el objeto definido en el ejemplo anterior, para ver el uso del destructuring.

El destructuring nos brinda una sintaxis más bonita para hacer esto mismo:

Otra cosa que podemos hacer a partir de ES6 es colocar nombres variables a los atributos de un objeto. Veámoslo en un ejemplo.

Sigamos trabajando con objetos y sus propiedades. Podemos tener una situación como la siguiente:

Como vemos, asignamos a los atributos de un objeto el valor de variable que poseen sus mismos nombres. Las nuevas versiones de JavaScript nos permiten escribirlo de la siguiente manera:

Como vemos, asignamos a los atributos de un objeto el valor de variable que poseen sus mismos nombres. Las nuevas versiones de JavaScript nos permiten escribirlo de la siguiente manera:

Algo también muy usado últimamente en JavaScript son las plantillas de strings, también conocidas como template strings. Recordemos cuando teníamos que crear strings concatenando sus partes con variables, por ejemplo:

La forma anterior resulta un poco tediosa de usar. Por ello, se creó una mejor forma de hacerlo:

Vemos que ahora en lugar de usar todos esas comillas dobles y signos de suma, tenemos todo en un solo string con comilla simple invertida, en donde el texto correspondiente a una variable o constante se coloca entre llaves antecedidas por un signo de moneda.

Ahora veamos lo que se conoce como argumento por defecto (default argument). Veamos su uso en un ejemplo.

Ahora ejecutemos la función saludar sin pasarle argumentos.

Vemos cómo al no pasar argumentos en el llamado de la función, los argumentos toman los valor por defecto declarados en la definición de la función.

Ahora veamos el séptimo y último tipo de dato en Java: Symbol. Este tipo de datos se añadió en ES6, y realmente no es muy utilizado frecuentemente, pero veámoslo de todas formas. Veamos un ejemplo de cómo crear variables de tipo Symbol.

Como podemos ver, para crear un nuevo símbolo debemos llamar a la función Symbol().

Cada uno de estos representa un símbolo único. Por lo que, por más que lo parezcan, simbolo2 y simbolo3 no son iguales.

Los símbolos son creados porque crean estos tipos totalmente únicos. De esta manera nos aseguramos que nunca vamos a tener algún conflicto. Los valores de los símbolos mayormente son usados para nombrar atributos de objetos, ya que debemos asegurarnos que no haya conflicto entre atributos nombrados por variables que puedan ser iguales.

Casi no vamos a usar símbolos a lo largo de este sendero, pero acabamos de verlos para completar el listado de los siete tipos de datos existentes en JavaScript.

Ahora veremos las arrow functions (funciones flecha), pero antes recordemos cómo definimos a una función:

A muchas personas esta forma de definir funciones le resulta muy tediosa, por lo que se creó una mejor forma de hacerlo: arrow functions (funciones flecha).

Esta sintaxis nos permite definir la función de una manera más corta. Como podemos ver, no es necesario emplear las palabras reservadas function ni return (en el caso de tener un solo retorno).

Se las conoce como arrow function (funciones flecha) debido al uso de los caracteres => que la identifican como una función, y a su vez se parecen a una flecha apuntando hacia la derecha.

Esta forma de definir funciones re ha vuelto muy usada en JavaScript. Encontraremos muchísimo código que la usa, por lo que nosotros comenzaremos a usarla de aquí en adelante.

En esta lección hemos aprendido varias formas de escribir mejor y más limpio código.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!