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]

En este ejemplo,

• Hemos creado un array
• El operador spread ...array se utiliza para “explotar” el array original
• A sus elementos, la añadimos 4 y 5
• Usamos esto para generar un nuevoArray con los elementos del array original, añadiendo nuevos elementos al final.

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]

En este ejemplo,

• El operador spread ...array1 expande los elementos del array1 dentro del array2, creando un nuevo array combinando ambos.

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: 'Juan', edad: 30 };
const direccion = { calle: 'Calle Falsa', ciudad: 'Springfield' };

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

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

En este ejemplo, personaCompleta combina las propiedades de persona y direccion.

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 }

Aquí, el operador spread se utiliza para crear un nuevo objeto con una propiedad actualizada.

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

Aquí, el operador spread se utiliza para pasar los elementos del array numeros como argumentos individuales a la función sumar.

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' }

Aquí, resto contiene todas las propiedades de persona excepto nombre.