Destructuring y spread en JavaScript: sacar y copiar datos rápido

Ya sabes sacar un dato de un objeto con jugador.nombre. Si necesitas varios a la vez, el destructuring te ahorra repetir el nombre del objeto una y otra vez.

<script>
  const jugador = { nombre: "Joaco", nivel: 5, vidas: 3 };

  // La forma larga, que ya conoces
  const nombre1 = jugador.nombre;
  const nivel1 = jugador.nivel;

  // Lo mismo, con destructuring
  const { nombre, nivel, vidas } = jugador;
  console.log(nombre, nivel, vidas);
</script>

Con un array funciona parecido, pero acá sí importa el orden: se asigna por posición, con corchetes en vez de llaves.

<script>
  const colores = ["rojo", "verde", "azul"];
  const [primero, segundo, tercero] = colores;
  console.log(primero, segundo, tercero);

  // Truco clásico: intercambiar dos variables sin una tercera
  let a = 1, b = 2;
  [a, b] = [b, a];
  console.log(a, b);
</script>

Los tres puntos ... son el operador spread: toma todos los elementos de un array u objeto y los "desparrama" sueltos. Sirve para copiar o combinar sin bucles.

<script>
  const base = [1, 2, 3];
  const copia = [...base];          // copia real, no la misma lista
  copia.push(4);
  console.log("original:", base);
  console.log("copia:   ", copia);

  const combinada = [...base, 4, 5, 6];
  console.log("combinada:", combinada);

  // Lo mismo con objetos
  const jugador = { nombre: "Joaco", nivel: 5 };
  const actualizado = { ...jugador, nivel: 6 };   // copia y cambia solo nivel
  console.log(actualizado);
</script>

Los mismos tres puntos, usados al revés, se llaman rest: juntan "todo lo que sobra" en un array. Es lo opuesto a spread.

<script>
  const [primero, ...resto] = [10, 20, 30, 40];
  console.log("primero:", primero);
  console.log("resto:  ", resto);

  // También sirve para funciones con cantidad variable de argumentos
  function sumarTodo(...numeros) {
    return numeros.reduce((total, n) => total + n, 0);
  }
  console.log(sumarTodo(1, 2, 3));
  console.log(sumarTodo(1, 2, 3, 4, 5));
</script>

Sacar varios valores de un objeto o array con destructuring, copiar y combinar con spread sin mutar el original, y juntar argumentos sueltos con rest.

Ahora un tema que confunde bastante al principio: cómo escriben las funciones flecha, y qué es eso de "this".

Destructuring y spread

Destructuring and spread