El operador de propagación spread de JavaScript ES6


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Spread, el nuevo operador de propagación que ofrece JavaScript ES6, nos resultará de ayuda para ahorrar líneas de código, 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 restdel que hablamos hace poco en este artículo, utiliza la misma sintaxis de los tres puntos seguidos.

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.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *