55

Entendiendo el "Spread Operator (...)" en Javascript.

Hola!

En este artículo vamos a ver el uso del spread operator para pasar un array a una lista de argumentos. Esto puede ser muy útil en casos donde tenemos que pasar una lista de argumentos (no un array) a un método/función.

Antes de comenzar es importante resaltar el spread operator fue incluido en la nueva versión de Javascript ES6 y ya funciona en todos los navegadores.

📍 Revisa la nueva escuela de JavaScript

Comencemos!

let numeros = [4, 16, 25, 2, 45, 8];

let numeroMayor = Math.max(numeros);

console.log(numeroMayor); // NaN

Observamos que el valor de la variable numeroMayor es NAN, esto es porque el método max() puede recibir una lista de argumentos y no le podemos pasar un array.

Entonces podríamos hacer los siguiente:

let numeroMayor = Math.max(4, 16, 25, 2, 45, 8);

console.log(numeroMayor); // 45 

Ahora sí podemos acceder al número más alto de la lista de argumentos. De todos modos podemos mejorar este código gracias al spread operator.

Veamos cómo hacerlo!

let numeros = [4, 16, 25, 2, 45, 8];

let numeroMayor = Math.max(...numeros);

console.log(numeroMayor); // 45

Al anteponer los tres puntos que representan al spread operator transformamos la variable numeros (que en el ejemplo representa un array con números) en una lista de argumentos, y es por ello que podemos acceder al número mayor del array numeros. Es como si le quitáramos los corchetes ( “[]” ) al array.

let numeros = [10, 4, 7, 15, 3, 25];

console.log(numeros); // Imprime un array.

console.log(...numeros); // Imprime una lista de argumentos.

En los próximos días estaré escribiendo otro artículo donde explico en uso del spread operator para concatenar múltiples arrays.

Espero que hayan comprendido este ejemplo y comiencen a implementar este nuevo feature de ES6 en sus proyectos!

Saludos!

Esta misma nota también la pueden encontrar en mi cuenta de medium.

www.leandrovidela.com

Escribe tu comentario
+ 2
Ordenar por:
5
10513Puntos
5 años
Que buen aporte👍😃
2
25Puntos
5 años

Gracias por el aporte, entendido la funcionalidad …

1
4009Puntos
2 años

Gracias me sirvió mucho tu aporte !!!

1
11653Puntos
5 años

tenia una problema con un array de objetos, me salia error key. use el spread operator y soluciono el problema. esta bien usarlo para evitar ese problema o deberia probar otro metodo?

1
11653Puntos
5 años

uhm al final no me funciono la funcion filter al usar este metodo de copiado de array of objects al final use:

letlist = JSON.parse(JSON.stringify(initialstate.video))
1
7294Puntos
4 años

Excelente explicacion justo lo que andaba buscando.

1
13867Puntos
3 años

Muchas Gracias, excelente aporte y explicaciòn.

1
9731Puntos
3 años

Esto tambien sirve para obtener las propiedades de un objeto?

1
13959Puntos
3 años

Por fin lo entiendo!! 😃

1
14239Puntos
3 años

Excelente aporte!, entendí su utilidad

1
9033Puntos
3 años

gracias por hacer el post

0
6421Puntos
4 años

super tu aporte después de tres años aun lo leo para una clase de vue me fue muy útil

0
10127Puntos
4 años

Muchas gracias!!!