Rest/Spread
Rest (agrupación de valores)Spread (desagrupación de valores)

<< Arrays Desestructuración >>

Rest (agrupación de valores)

Rest es la acción de agrupar una serie de valores que se le pasan a una función/método bajo un único parámetro (de tipo array).

Para usar rest en los parámetros de una función, se declara siempre como último parámetro (no puede haber más de uno) y se le ponen tres puntos '...' delante del mismo. Este parámetro se transformará automáticamente en un array conteniendo todos los valores restantes que se le pasan a la función. Si por ejemplo, el parámetro rest está en la tercera posición, contendrá todos los parámetros que se le pasen a excepción del primero y del segundo (a partir del tercero).

function getMedia(...notas) {
    console.log(notas); // Imprime [5, 7, 8.5, 6.75, 9] (está en un array)
    let total = notas.reduce((total,notas) => total + notas, 0);
    return total / notas.length;
}

console.log(getMedia(5, 7, 8.5, 6.75, 9)); // Imprime 7.25

function imprimirUsuario(nombre, ...lenguajes) {
    console.log(nombre + " sabe " + lenguajes.length + " lenguajes: " + lenguajes.join(" - "));
}

// Imprime "Pedro sabe 3 lenguajes: Java - C# - Python"
imprimirUsuario("Pedro", "Java", "C#", "Python");
// Imprime "María sabe 5 lenguajes: JavaScript - Angular - PHP - HTML - CSS"
imprimirUsuario("María", "JavaScript", "Angular", "PHP", "HTML", "CSS");

Spread (desagrupación de valores)

Spread es lo “opuesto” de rest. Si tenemos una variable que contiene una colección (array por ejemplo), y ponemos los tres puntos '...' delante de esta, extraerá todos sus valores. Podríamos usar la propiedad, por ejemplo, para calcular el máximo valor numérico de un array utilizando el método Math.max, el cual recibe un número indeterminado de parámetros por separado y devuelve el mayor de todos.

let nums = [12, 32, 6, 8, 23];
console.log(Math.max(nums)); // Imprime NaN (array no es válido), deben ser valores independientes
console.log(Math.max(...nums)); // Imprime 32 -> equivale a Math.max(12, 32, 6 ,8 ,23)

Otra posibilidad del operador spread es la de clonar array fácilmente.

let a = [1, 2, 3, 4];
let b = a; // 'b' referencia el mismo array que 'a' (las modificaciones afectan a ambas variables).
let c = [...a]; // Nuevo array (copia de a) -> contiene [1, 2, 3, 4].

También nos permite crear un array con el contenido de otros arrays, es decir, concatenarlos. Se pueden intercalar valores sueltos en cualquier posición. En la práctica sería como poner todos los valores  del array individualmente en dicha posición.

let a = [1, 2, 3, 4];
let b = [5, 6, 7, 8];
let c = [...a,...b, 9, 10]; //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

<< Arrays Desestructuración >>