Header Ads Widget

Ticker

6/recent/ticker-posts

Sintaxis del operador JavaScript ES6 y Node Spread

 Gracias a ES6 ahora tenemos la sintaxis de Spread que, una vez que la conozca, cambiará la forma en que escribe su código JavaScript en navegadores y Node.js y lo hará más legible y menos complejo.

Todos los navegadores modernos y las versiones recientes de Node.js son compatibles con la sintaxis de Spread, por lo que si aún no ha comenzado a usarlo, ¡es mejor que comience ahora!

En esta publicación, aprenderá los conceptos básicos de la sintaxis de JavaScript Spread y cómo usarla.

¿Qué es el operador de propagación en JavaScript?

El operador Spread es un operador de JavaScript que le permite expandir un iterable en sus valores donde lo haya invocado. Sin embargo, tenga cuidado de que no puede expandir un iterable en cualquier lugar que desee, pero en lugares específicos donde se esperan los valores resultantes de expandir el iterable dependiendo de lo que esté difundiendo (literal de objeto, literal de matriz o una cadena, etc.).

¿Qué es la sintaxis de propagación?

La sintaxis de Spread es simplemente tres puntos (...)añadidos al nombre del iterable que desea extender. Puede utilizar el operador Spread para expandir iterables de JavaScript como objetos, matrices e incluso cadenas en los lugares donde se esperan. Por ejemplo, en argumentos de función, como elementos de matrices o como pares clave-valor en literales de objeto.

¿Cómo funciona el operador de propagación?

El operador Spread funciona reemplazando el iterable expandido por sus elementos. Por ejemplo, si el iterable es una matriz de JavaScript llamada foo = [1,2,3], cuando lo invoques ...foo, la expresión se expandirá, 1,2,3así que asegúrate de llamar al operador Spread donde sea conveniente.

Uso del operador de extensión de JavaScript para matrices por ejemplo

Puede usar el operador Spread para expandir matrices, lo que abre la puerta a muchos trucos para reemplazar formas antiguas y complejas de JavaScript que eran comunes entre los desarrolladores antes de que ES6 nos brindara la ...sintaxis. Pongamos un ejemplo.

Supongamos que tenemos la siguiente matriz:

const abc = ['a', 'b', 'c'];

const abcdef = [...abc, 'e', 'f'];

Después de ejecutar este código, la matriz abcdef será realmente ['a', 'b', 'c', 'e', 'f'].

En este ejemplo, el operador Spread (la ...sintaxis) extendió o expandió la matriz abc en sus valores y dado que esto sucede dentro de la matriz abcdef, JavaScript lo esperaba y, como tal, fusionó los valores en su nueva matriz.

Como puede notar, esto es simplemente una concatenación de matrices pero de una manera más elegante y fácil.

Lea cómo usar Array.find()yArray.findIndex() métodos para buscar en matrices.

Uso del operador de extensión de JavaScript para objetos por ejemplo

Puede utilizar el operador Spread para cualquier iterable, incluidos los objetos literales. Para los objetos, esto equivale a llamar a Object.assign()used para copiar los valores de un objeto en otro.

Tomemos un ejemplo simple:

const abc = {a: 'a', b: 'b', c: 'c'};
const abcef = {...abc, e: 'e', f: 'f'};
console.log(efd);

Después de ejecutar este código, el objeto abcef se convertirá en {a: "a", b: "b", c: "c", e: "e", f: "f"}.

Conclusión

El operador Spread introducido en ES6 es una poderosa adición a JavaScript que permite a los desarrolladores escribir código conciso y limpio que no hace que otros desarrolladores se rasquen la cabeza para leer su código.

La sintaxis de Spread se puede utilizar para reemplazar muchas técnicas antiguas utilizadas en la comunidad de JavaScript y, dado que ahora es totalmente compatible con todos los navegadores modernos y Node.js, la mayoría de los desarrolladores la están adoptando para escribir mejor código.

Publicar un comentario

0 Comentarios