45

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.

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:
4
9525Puntos
Que buen aporte👍😃
2
25Puntos

Gracias por el aporte, entendido la funcionalidad …

1
13048Puntos

Muchas Gracias, excelente aporte y explicaciòn.

1
5132Puntos

Esto tambien sirve para obtener las propiedades de un objeto?

1
5417Puntos

Por fin lo entiendo!! 😃

1
12458Puntos

Excelente aporte!, entendí su utilidad

1
7245Puntos

gracias por hacer el post

1
11652Puntos

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
11652Puntos
2 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
7180Puntos
2 años

Excelente explicacion justo lo que andaba buscando.

0
5180Puntos

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