Novedades ES6

Novedades ES6 - Operador Spread (operador de propagación)

JavaScript ES6 (ECMAScript 6) introdujo el operador de propagación. La sintaxis es de tres puntos (...) seguidos de la matriz (o iterable *). Expande la matriz en elementos individuales. Por lo tanto, se puede usar para expandir la matriz en lugares donde se esperan cero o más elementos.El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

El operador spread es una sintaxis útil y rápida para agregar elementos a matrices, combinar matrices u objetos y distribuir una matriz en los argumentos de una función.

El …operador spread es útil para muchas tareas de rutina diferentes en JavaScript, incluidas las siguientes:

  • Copiar una matriz
  • Concatenar o combinar arreglos
  • Usar funciones matemáticas
  • Usando una matriz como argumentos
  • Agregar un elemento a una lista
  • Añadiendo al estado en React
  • Combinar objetos
  • Conversión de NodeList en una matriz

En cada caso, la sintaxis de extensión expande un objeto iterable, generalmente una matriz, aunque puede usarse en cualquier interable, incluida una cadena.

El operador Spread permite descomponer una estructura de datos en elementos individuales. Es la operación inversa de los parámetros Rest.

La sintaxis se aplica anteponiendo al nombre de la variable tres puntos:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>

  function sumar(v,w,x,y,z) {
    return v+w+x+y+z;
  }

  const vec=[10,20,30,40,50];
  const s=sumar(...vec);
  document.write("El total es "+ s);

</script>

</body>
</html>


Es decir en la llamada a la función sumar le antecedemos tres puntos al nombre de la variable que vamos a pasar:

  const vec=[10,20,30,40,50];
  const s=sumar(...vec);

Luego el parámetro x recibe la primer componente, el parámetro y la segunda componente y finalmente el parámetro z recibe la tercer componente.

Esto anteriormente debíamos hacerlo indicando cada uno de los elementos del vector:

var s=sumar(vec[0], vec[1], vec[2], vec[3] , vec[4], vec[n]);