JavaScript ES6 Características

En este tutorial vamos a aprender acerca de las nuevas características de la última versión de JavaScript.

Qué es ECMAScript 6 (o ES6)

ECMAScript 2015 (o ES6) es la sexta y mayor edición del estándar de especificación del lenguaje ECMAScript. Define el estándar para la implementación de JavaScript.

es6 trajo cambios significativos al lenguaje JavaScript., Introduce varias características nuevas, tales como, variables de ámbito de bloque, nuevo bucle para iterar sobre matrices y objetos, literales de plantilla, y muchas otras mejoras para hacer la programación de JavaScript más fácil y más divertido. En este capítulo, discutiremos algunas de las mejores características de ES6 que puede usar en su código JavaScript diario.

La Palabra clave let

ES6 introduce la nueva palabra clave let para declarar variables. Antes de ES6, la única forma de declarar una variable en JavaScript era la palabra clave var., Veamos cuál es la diferencia entre ellos.

Hay dos diferencias fundamentales entre el var y let. Las Variables declaradas con la palabra clave var tienen un ámbito de función y se elevan en la parte superior dentro de su ámbito, mientras que las variables declaradas con let tienen un ámbito de bloque ({}) y no se elevan.

el ámbito de bloque simplemente significa que se crea un nuevo ámbito entre un par de corchetes rizados, es decir, {}., Por lo tanto, si declara una variable con la palabra clave let dentro de un bucle, no existe fuera del bucle, como se demuestra en el siguiente ejemplo:

como puede ver en el ejemplo anterior, la variable i en el primer bloque no es accesible fuera del bucle for. Esto también nos permite reutilizar el mismo nombre de variable varias veces ya que su alcance está limitado al bloque ({}), lo que resulta en menos declaración de variables y más código más limpio.,

La Palabra clave const

la nueva palabra clave const permite definir constantes. Las constantes son de solo lectura, no se pueden reasignar nuevos valores a ellas. También son de ámbito de bloque como let.

const PI = 3.14;console.log(PI); // 3.14PI = 10; // error

sin Embargo, usted todavía puede cambiar las propiedades del objeto o los elementos de la matriz:

El para…de Loop

el nuevo for...of loop nos permite iterar sobre matrices u otros objetos iterables muy fácilmente., Además, el código dentro del bucle se ejecuta para cada elemento del objeto iterable. Este es un ejemplo:

el bucle for...of no funciona con objetos porque no son iterables. Si desea iterar sobre las propiedades de un objeto, puede usar el bucle for-in.

literales de plantilla

Los literales de plantilla proporcionan una forma fácil y limpia de crear cadenas de varias líneas y realizar interpolación de cadenas. Ahora podemos incrustar variables o expresiones en una cadena en cualquier lugar sin ningún problema.,

Los literales de plantilla se crean utilizando el carácter back-tick (` `) (acento grave) en lugar de las comillas dobles o simples habituales. Las Variables o expresiones se pueden colocar dentro de la cadena usando la sintaxis ${...}. Compare los siguientes ejemplos y vea lo útil que es:

mientras que en ES5, para lograr lo mismo tuvimos que escribir algo como esto:

valores predeterminados para los parámetros de la función

ahora, en ES6 puede especificar valores predeterminados para los parámetros de la función., Esto significa que si no se proporcionan argumentos a la función cuando se llama, se utilizarán estos valores de parámetros predeterminados. Esta es una de las características más esperadas en JavaScript. Aquí hay un ejemplo:

mientras que en ES5, para lograr lo mismo tuvimos que escribir algo como esto:

funciones de flecha

Las funciones de flecha son otra característica interesante en ES6. Proporciona una sintaxis más concisa para escribir expresiones de función al optar por las palabras clave function y return.,

Las funciones de flecha se definen utilizando una nueva sintaxis, la notación flecha fat (=>). Veamos cómo se ve:

como puede ver, no hay functiony return palabra clave en la declaración de la función arrow.

también puede omitir los paréntesis, es decir, () en caso de que haya exactamente un parámetro, pero siempre tendrá que usarlo cuando tenga cero o más de un parámetro.,

Además, si hay más de una expresión en el cuerpo de la función, debe envolverla entre llaves ({}). En este caso, también debe usar la instrucción return para devolver un valor.

Hay varias variaciones de cómo puede escribir funciones de flecha. Estos son los más utilizados:

hay una diferencia importante entre las funciones regulares y las funciones de flecha., A diferencia de una función normal, una función de flecha no tiene su propio this, toma this de la función externa donde está definida. En JavaScript, this es el contexto de ejecución actual de una función.,

para entender esto claramente, echemos un vistazo a los siguientes ejemplos:

reescribir el mismo ejemplo usando literales de plantilla ES6 y función de flecha:

como puede ver claramente, la palabra clave this en el ejemplo anterior se refiere al contexto de la función que encierra la función de flecha que es objeto Person (línea no-9), a diferencia del ejemplo anterior donde se refería a la ventana de objeto global (línea no-9).

Classes

en ECMAScript 5 y anteriores, las clases nunca existieron en JavaScript., Las clases se introducen en ES6 que se ve similar a las clases en otros lenguajes orientados a objetos, como Java, PHP, etc. sin embargo , no funcionan exactamente de la misma manera. Las clases ES6 facilitan la creación de objetos, la implementación de la herencia mediante el uso de la palabra clave extends y la reutilización del código.

en ES6 puede declarar una clase usando la nueva palabra clave class seguida de un nombre de clase. Por convención los nombres de las clases se escriben en TitleCase (es decir, mayúscula la primera letra de cada palabra).,

en el ejemplo anterior, la clase Square hereda de Rectangle usando la palabra clave extends. Las clases que heredan de otras clases se denominan clases derivadas o clases secundarias.

Además, debe llamar a super() en el constructor de clase hijo antes de acceder al contexto (this)., Por ejemplo, si omite el método super() y llama al método getArea() en el objeto cuadrado, se producirá un error, ya que el métodogetArea() requiere acceso a la palabra clavethis.

Módulos

Antes de ES6, no había soporte nativo para los módulos en JavaScript. Todo dentro de una aplicación JavaScript, Por ejemplo variables en diferentes archivos JavaScript, compartían el mismo alcance.

ES6 introduce un módulo basado en archivos, en el que cada módulo está representado por un archivo .js., Ahora, puede usar la instrucción export o import en un módulo para exportar o importar variables, funciones, clases o cualquier otra entidad a/desde otros módulos o archivos.

vamos a crear un módulo, es decir, un archivo JavaScript » main.js «y coloque el siguiente código en él:

ahora cree otro archivo JavaScript» aplicación.JS «con el siguiente código:

finalmente crear un archivo HTML» prueba.html » y con el siguiente código y abra este archivo HTML en su navegador utilizando el protocolo HTTP (o use localhost). También observe la etiqueta type="module" en el script.,

los parámetros Rest

ES6 introduce parámetros rest que nos permiten pasar un número arbitrario de parámetros a una función en forma de matriz. Esto es particularmente útil en situaciones en las que desea pasar parámetros a una función, pero no tiene idea de cuántos necesitará.

un parámetro rest se especifica prefijando un parámetro con nombre con operador rest (...), es decir, tres puntos. El parámetro Rest solo puede ser el último de la lista de parámetros, y solo puede haber un parámetro rest., Eche un vistazo al siguiente ejemplo, para ver cómo funciona:

Cuando el parámetro rest es el único parámetro en una función, obtiene todos los argumentos pasados a la función, de lo contrario obtiene el resto de los argumentos que excede el número de parámetros nombrados.