¿Qué es el spread operator?

En ES6, se introdujo un nuevo operador, que es: ...

Estos tres puntos seguidos, pueden cumplir dos funciones:

1. Rest parameter (parámetro rest)
2. Spread operator (operador spread)

¿Qué es el rest parameter?

El rest parameter es la utilización de ... para juntar a n elementos en un array único.

Ahora bien, la definición roza lo inentendible, veamoslo con un ejemplo:

Imaginemos que tenemos la siguiente función:

function suma(x, y) {
  return x + y;
}

suma(1, 2, 3, 4, 5) // devuelve 3 porque hace 1 + 2 y la función solamente espera dos argumentos: x e y

Utilizando ... como rest parameter, podemos hacer lo siguiente:

function suma(...args) {
  console.log(args); 
// en el primer llamado es [1] 
// en el segundo es [1, 2] 
// en el tercero [1, 2, 3, 4, 5]

  let result = 0;

  args.forEach((arg) => {
    result = result + arg;
  });

  return result;
}

//primer llamado
suma(1); // devuelve 1

//segundo llamado
suma(1, 2); // devuelve 3

//tercer llamado
suma(1, 2, 3, 4, 5); // devuelve 15

Esto significa que nosotros podemos transformar a los argumentos recibidos por la función, en un array de argumentos, y por lo tanto iterarlos con un forEach, map, reduce, o cualquier otro método de javascript para arrays.

sé que lo ideal hubiera sido utilizar reduce. A fines prácticos, y para no complicar aún más la explicación, usé un forEach.

¿Qué es el spread operator?

El operador spread, nos permite expandir elementos. Con el rest parameter podíamos transformar una lista de argumentos en un array único, el spread operator nos permite transformar un array en elementos únicos.

Devuelta, miremos los ejemplos:

Unir arrays:

const arr = [4, 5, 6];
const newArr = [1, 2, 3, ...arr];

console.log(newArr) //esto devuelve [1, 2, 3, 4, 5, 6]

Copiar arrays:

const arr = [1, 2, 3];
const arr2 = [...arr];

console.log(arr2) //esto devuelve [1, 2, 3]

Pasar los elementos de un array como argumentos únicos de una función (esto vendría a ser lo contrario al parámetro rest):

function suma(a, b, c) {
  return a + b + c ;
}

const args = [1, 2, 3];

suma(...args); //esto devuelve 6

//es lo mismo que hacer
suma(1, 2, 3) 

Mutar objetos:

const objeto = { name: "CourseIt" };

// si queremos agregar una nueva propiedad a nuestro objeto
//con el spread operator podemos hacer:

const nuevoObjeto = {
  ...objeto,
  description: "El mejor lugar para aprender a programar"
};

console.log(nuevoObjeto) 
//devuelve:
{
  name: "CourseIt",
  description: "El mejor lugar para aprender a programar"
};

//Supongamos que queremos modificar 
//la description de nuevoObjeto, podemos hacer:

const nuevaDescription = {
  ...nuevoObjeto,
  description: "Esto es una nueva descripción"
};

console.log(nuevaDescription) 
//devuelve:
{
  name: "CourseIt",
  description: "Esto es una nueva descripción"
};

Para los que saben React, el spread operator nos permite además mutar el estado en caso de que este sea un objeto:

import { useState } from "react";

function App() {
  //creamos un estado que es un objeto y va a guardar dos valores: name y lastName

  const [state, setState] = useState({ name: "", lastName: "" });

  function handleChange(e) {
    //esta función lee el name y el value del input
    const { name, value } = e.target;

    //y con el spread operator mutamos la propiedad del objeto correspondiente,
    // con su valor correspondiente
    setState({ ...state, [name]: value });
  }

  return (
    <div>
      <input name="name" value={state.name} onChange={handleChange} />
      <input name="lastName" value={state.lastName} onChange={handleChange} />
    </div>
  );
}

export default App;

Pero entonces, ¿... es el spread operator o el rest parameter?

La respuesta es: ambas. Dependiendo de cómo usemos ... cómo debemos llamarlo. La realidad es que todo el mundo siempre habla del operador spread, aunque se utilice como parámetro rest o operador spread.

Espero que les sirva, y si tienen dudas me pueden preguntar por twitter en @ncastrogarcia o hablarme al discord de CourseIt

Eso es todo folks.