Operador spread en JavaScript

El operador spread (...) permite expandir elementos de arrays y objetos obteniendo sus elementos individuales.

Introducido en ECMAScript6 (2015), el operador spread es extremadamente útil para trabajar con arrays, objetos y funciones, simplificando muchas tareas comunes.

En lugar de utilizar técnicas más complicadas para manipular datos, el operador spread proporciona una sintaxis más directa y legible (esto mejora la legibilidad del código, que nunca está de más 😉).

Sintaxis del operador spread

La sintaxis básica del operador spread es la siguiente:

const array = [1, 2, 3];
const nuevoArray = [...array, 4, 5];
console.log(nuevoArray); // [1, 2, 3, 4, 5]

Uso del operador spread con arrays

Expandir un array

Uno de los usos más comunes del operador spread es crear nuevos arrays a partir de arrays existentes. Esto es útil para copiar arrays o combinar varios arrays en uno solo:

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

console.log(array2); // Resultado: [1, 2, 3, 4, 5, 6]

Copiar arrays

El operador spread también permite crear copias superficiales de arrays, lo que es útil para evitar efectos secundarios en operaciones de manipulación de datos:

const original = [1, 2, 3];
const copia = [...original];

console.log(copia); // [1, 2, 3]

Agregar elementos a arrays

Puedes utilizar el operador spread para añadir elementos a un array existente sin mutar (sin modificar) el array original:

const numeros = [1, 2, 3];
const nuevoNumero = 4;
const actualizado = [...numeros, nuevoNumero];
console.log(actualizado); // [1, 2, 3, 4]

Concatenar arrays

De igual forma, podemos concatenar de forma sencilla dos arrays.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const arrayConcatenado = [...array1, ...array2];

console.log(arrayConcatenado); // Resultado: [1, 2, 3, 4, 5, 6]

Manipulación de arrays anidados

El operador spread también puede ser útil para trabajar con arrays anidados:

const matrices = [[1, 2], [3, 4]];
const combinada = [].concat(...matrices);
console.log(combinada); // [1, 2, 3, 4]

Uso del operador spread con objetos

Creación de nuevos objetos

El operador spread puede expandir propiedades de un objeto en otro objeto, permitiendo la creación de nuevos objetos basados en objetos existentes:

const persona = { nombre: 'Luis', edad: 30 };
const direccion = { calle: 'Calle Falsa', ciudad: 'Springfield' };

const personaCompleta = { ...persona, ...direccion };

console.log(personaCompleta); // { nombre: 'Luis', edad: 30, calle: 'Calle Falsa', ciudad: 'Springfield' }

Copiar objetos

Al igual que con los arrays, el operador spread permite hacer copias superficiales de objetos:

const original = { a: 1, b: 2 };

const copia = { ...original };

console.log(copia); // { a: 1, b: 2 }

Este enfoque es útil para crear versiones modificadas de objetos sin alterar el original.

Actualizar propiedades de objetos

Puedes utilizar el operador spread para actualizar propiedades de un objeto sin mutar el objeto original:

const usuario = { nombre: 'Ana', edad: 25 };

const actualizado = { ...usuario, edad: 26 };

console.log(actualizado); // { nombre: 'Ana', edad: 26 }

Pasar argumentos a una función

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

const numeros = [1, 2, 3];

const resultado = sumar(...numeros);

console.log(resultado); // Resultado: 6

Desestructuración y spread

En combinación con la desestructuración, el operador spread permite extraer parte de un objeto y combinarlo con otros valores:

const persona = { nombre: 'Luis', edad: 28, profesion: 'Ingeniero' };

const { nombre, ...resto } = persona;

console.log(nombre); // 'Luis'
console.log(resto); // { edad: 28, profesion: 'Ingeniero' }