El operador de propagación spread de JavaScript ES6

3min

Spread, el nuevo operador de propagación que ofrece JavaScript ES6, nos resultará de ayuda para ahorrar líneas de código a la hora de crear tu proyecto web, ya que genera una lista de valores a partir de un array y es un excelente recurso para mejorar el código JavaScript. En este tutorial, explicamos cómo utilizarlo y combinarlo con el operador rest.

Al igual que el operador rest, del que ya hemos hablado, utiliza la misma sintaxis de los tres puntos seguidos.

Índice

Empezando con spread 

Utilizaremos la función min() de la clase Math de JavaScript para este ejemplo. Esta función recibe números y devuelve el de menor valor.

Math.min(3, 5, 7, 2, 9);

Esto nos devolverá el valor 2, que es el menor de los parámetros enviados.

Si hacemos uso del operador spread creamos un array y lo convertimos en una lista de parámetros, algo así:

let miArray = [3, 5, 7, 2, 9];
let minimo =Math.min(...miArray);

Es como el conocido operador rest, pero lo invocamos en una función.

Combinación rest y spread

Vamos a poner como ejemplo una función que admite cualquier cantidad de cadenas por parámetro y devuelve un array con esas mismas cadenas, eliminando los espacios vacios de antes y después.

Con el operador rest  sería así.

function EliminarEspacios(...cadenas) {
   for (let i=0; i<cadenas.length; i++) {
     cadenas[i] = cadenas[i].trim();
   }
   return cadenas;
 }

Se ha usado el operador «…» al invocar una función, y una lista de parámetros la convertirá en un array.

Lo podemos ver con este código:

let limpiandoCadenas = EliminarEspacios('aquí ', ' lados ', ' espacio');
 console.log(limpiandoCadenas);

Al ejecutarlo verás que limpiandoCadenas es un array de cadenas, que elimina los espacios.

Pero, ¿ y si las cadenas están en un array?:

const cadenasOriginales = ['aquí ', ' lados ', ' espacio'];
 let limpiandoCadenas = EliminarEspacios(cadenasOriginales);

Nos saldría un error, ya que dentro de la función se intentará hacer trim() sobre un array y JavaScript arrojará el mensaje de cadenas[i].trim is not a function.

Y es donde el operador spread puede hacer su función,  dejando convertir tal array en una lista de parámetros que pueda usarse en la invocación de la función.

const cadenasOriginales = ['aquí ', ' lados ', ' espacio'];
 let limpiandoCadenas = EliminarEspacios(...cadenasOriginales);

El array se convertirá en una lista de parámetros,  que es lo que requiere la función EliminarEspacios().

Otros usos de spread

También podemos utilizarlo para definir literales de array en base a otros arrays. Como ejemplo te mostramos el siguiente código.

let loquese = ['variables', 'operadores', 'estructuras de control', 'funciones'];
 let aprendido = ['rest operator', 'spread operator'];
 let loqueseMas= [...loquese, ...aprendido, 'otra cosa más'];

Para la creación del array loqueseMas, definido como un literal, se han usado un par de veces el operador de propagación. La primera para añadir todos los valores de loquese, como una lista, y la segunda para ponerla como otra lista de valores el array aprendido.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: