JS: Funciones

Teoría: Operador Spread (desempaquetar argumentos)

El operador spread en las llamadas de funciones es sintácticamente idéntico al operador rest en las definiciones, pero realiza la acción opuesta. Veamos un ejemplo con la función sum():

const sum = (...numbers) => {
  let result = 0;
  for (let num of numbers) {
    result += num;
  }
  return result;
};

Llamamos a sum() aplicando el operador spread a un array de argumentos:

const numbers = [1, 7, 4];
sum(...numbers); // 12

El operador spread descompone el array en argumentos. La cantidad de argumentos obtenidos con el operador spread es igual a la cantidad de elementos del array. En esencia, el código anterior se convierte en la siguiente llamada:

sum(numbers[0], numbers[1], numbers[2]);
// sum(1, 7, 4);

Al igual que en el caso de las definiciones de funciones, el operador spread se puede usar junto con argumentos posicionales:

const numbers = [1, 7, 4];
sum(8, ...numbers); // 20

sum(8, 10, ...numbers);     // 30
sum(8, 10, 70, ...numbers); // 100

A diferencia del operador rest en las definiciones de funciones, el operador spread no tiene que ser el último, puede estar en cualquier posición:

const numbers = [1, 7, 4];

sum(8, 10, ...numbers); // 30
sum(8, ...numbers, 10); // 30
sum(...numbers, 8, 10); // 30

Además, puede haber cualquier cantidad de operadores spread y en cualquier orden:

const numbers1 = [1, 7, 4];
const numbers2 = [5, 5];

// sum(1, 7, 4, 5, 5);
sum(...numbers1, ...numbers2); // 22

// sum(5, 5, 1, 7, 4);
sum(...numbers2, ...numbers1); // 22

// sum(8, 1, 7, 4, 10, 5, 5);
sum(8, ...numbers1, 10, ...numbers2); // 40

En resumen, ambos operadores rest y spread se representan con el símbolo .... Para no confundirlos al trabajar con funciones, debes seguir los siguientes principios:

  • El operador rest se utiliza al crear funciones. Permite recopilar los parámetros restantes de la función en un array.
  • El operador spread se utiliza al llamar a funciones. Extrae los elementos del array y los utiliza para llenar los parámetros de la función al llamarla.

Completado

0 / 16