¿Qué es la sintaxis de la propagación en JavaScript? Explicado con ejemplos

El operador de propagación se utiliza para expandir una instancia de matriz o una instancia de cadena en una lista de argumentos como elementos individuales, los argumentos también pueden ser cero o menores que la longitud de la matriz/cadena iterable.

JavaScript lanzó muchas características con el lanzamiento del ES6 JavaScript en 2015, una de las características que eran nuevas para JavaScript fue el operador sencillo; El operador de propagación tiene un identificador similar a los parámetros REST, que es el triple punto "..." Antes del nombre de la variable.

El operador de propagación (...)

El identificador de triple punto cuando se usa antes de un nombre de variable en un argumento se conoce como sintaxis de propagación o un argumento extendido. El argumento extendido rompe el objeto Iterer (matriz o una cadena) y los transfiere a los argumentos.

Sintaxis

(… nombre de la variable)

Para comprender la diferencia entre la salida variable normal y la variable de dispersión, eche un vistazo a la figura a continuación:

Cómo funciona la propagación con la consola.registro()

Para comprender la funcionalidad básica del operador de propagación, simplemente va a crear un objeto de cadena y pasarlo dentro del consola.registro() función. Después, use el operador de propagación para pasarlo dentro del consola.registro() Para examinar el comportamiento del operador de propagación:

String = "Google";
consola.log ("Resultado de sintaxis normal:"+ cadena)
consola.log ("Resultado de sintaxis extendido:");
consola.log (... cadena);

Obtendrá la siguiente salida cuando ejecute el fragmento de código anterior:

La flecha apunta a la salida de cadena normal y el rectángulo rojo está encerrando la salida de la sintaxis de propagación. Puede notar brechas entre cada carácter de la salida de sintaxis de propagación que se debe a que cada carácter se está tratando como un elemento diferente.

Pasando la sintaxis de propagación en argumentos de una función

Todo el propósito de la sintaxis de propagación y el operador de propagación es crear los argumentos propagados y pasarlos dentro de la función. Para demostrar esto, creará una función que tomará 5 argumentos e imprimirá el resultado de los valores aprobados dentro de los argumentos con las siguientes líneas de código:

función printsum (a, b, c, d, e)
consola.log (a+b+c+d+e);

Vas a crear una matriz con 5 valores enteros dentro de él usando la siguiente línea:

números = [1,2,3,4,5];

Para el último paso, llamará a esta función utilizando los argumentos de propagación y pasará en el números matriz usando la sintaxis de propagación como un solo argumento con la siguiente línea:

printsum (... números);

El fragmento completo sería:

función printsum (a, b, c, d, e)
consola.log (a + b + c + d + e);

números = [1, 2, 3, 4, 5, 6];
printsum (... números);

Después de ejecutar el código, obtendrá la siguiente salida:

Todos los elementos dentro de la matriz de números se pasaron como argumentos individuales a la función y luego se agregó cada argumento impreso en la consola.

Pero, ¿qué pasa si su matriz de números tiene más elementos que los argumentos de la función??; Bueno, en ese caso, solo se utilizarán los primeros 5 elementos de la matriz y otros se descartarán, evitando así cualquier error.

Para mostrar esto, tome la función mencionada anteriormente y pase en la siguiente matriz dentro de él:

Formación:

Números = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,1,2];

Al usar el siguiente comando:

printsum (... números);

Verá el siguiente resultado en la consola:

Puede ver, a pesar de que tuvimos más elementos dentro de la matriz que se transmitieron a la lista del argumento con la sintaxis de propagación, todos los elementos adicionales se descartaron y, por lo tanto, no recibimos ningún error.

Cómo concatenar matrices usando propagación?

Incluso podemos usar la sintaxis de propagación o el operador de propagación para concatenar elementos de matriz con otros elementos pasando por la matriz completa dentro de un solo elemento.

array1 = [2, 3, 4, 5, 6, 6, 7, 7];
array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
fininalArray = [... Array1, ... Array2];
consola.log (FinalArray);

Obtendrá la siguiente salida:

Puedes ver que el finaltarray tiene ambos matriz1 y matriz2 Concatenado en su interior y solo dimos dos elementos en el "FinalArray".

Eso es para la sintaxis de propagación en JavaScript.

Conclusión

La sintaxis de propagación se introdujo en JavaScript como una nueva característica con el lanzamiento de ES6. La sintaxis de propagación o comúnmente conocido como argumento de propagación se usa para expandir los elementos de un objeto iterable -: matriz o cadena - sobre una lista de argumentos de una función pasando individualmente cada elemento. Esta funcionalidad del lenguaje de programación JavaScript ES6 permite tratar ciertos escenarios en los que tiene más argumentos que los parámetros de la función. El operador de propagación también se puede utilizar para concatenar elementos de la matriz que examinamos con la ayuda de un ejemplo.