El operador de extensión … nos permite trabajar con datos en Javascript de una manera concisa y flexible, simplificando operaciones complejas.

Permite concatenar arrays de forma concisa y limpia, clonar arrays y objetos, fusionar objetos, crear argumentos de función de forma dinámica, clonar objetos y arrays anidados complejos, etc...

A continuación se muestran varios ejemplos que muestran de lo que es capaz el operador de extensión.

Ejemplo concatenando arrays:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // Aquí se utiliza el operador de extensión para concatenar los dos arrays
console.log(arr3); // Devuelve: [1, 2, 3, 4, 5, 6]

Ejemplo extendiendo cadenas:

const str = "Hello";
// Extendiendo caracteres de string en un array
const charArray = [...str];
console.log(charArray); // Devuelve: ['H', 'e', 'l', 'l', 'o']

Ejemplo fusionando objetos:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // Devuelve: { a: 1, b: 3, c: 4 }

Ejemplo de clonando objetos:

const obj1 = { a: 1, b: 2 };
const clonedObj = { ...obj1 };
console.log(clonedObj); // Devuelve: { a: 1, b: 2 }

Ejemplo extendiendo Argumentos de Función:

Se suele utilizar para pasar valores de manera dinámica a una función o constructor.

const numbers = [1, 2, 3]; //Pasar array de elementos como argumentos de una función
const sum = (a, b, c) => a + b + c;
console.log(sum(...numbers)); // Devuelve: 6

Ejemplo combinación del operador Spread con el parámetro rest

El operador de extensión puede utilizarse junto con otras funciones modernas de JavaScript, como la deconstrucción de arrays y objetos, para habilitar potentes técnicas de programación funcional. Te permite extraer y manipular elementos de arrays o propiedades de objetos con una sintaxis concisa y expresiva.

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // Devuelve: 1
console.log(second); // Devuelve: 2
console.log(rest); // Devuelve: [3, 4, 5]

Ejemplo copias superficiales

NOTA: OJO!! Copias superficiales. A continuación explicamos el problema de las copias superficiales.

const originalArray = [[1, 2, 3, 4], 12];
const copiedArray = [...originalArray];

copiedArray[0].push(99);

console.log(originalArray); // Output: [[1, 2, 3, 4, 99], 12]
console.log(copiedArray); // Output: [[1, 2, 3, 4, 99], 12]

En este código, originalArray es una array con dos elementos. Utilizando el operador de extensión, creamos un nuevo array copiedArray y propagamos en él los elementos de originalArray. A continuación, modificamos el primer elemento de copiedArray añadiendo 99 con el método push.

Cuando obtengas la salida de copiedArray, la salida mostrará que se ha añadido 99 al array del primer elemento, pero hay un problema con la copia superficial que hace el operador de extensión. El cambio en copiedArray afecta a originalArray.

Esto se debe a que el operador de extensión no crea copias completamente nuevas de los elementos o propiedades, sino que comparte referencias a los elementos o propiedades originales. Esto puede tener implicaciones de rendimiento cuando se trabaja con arrays u objetos grandes.

📚REFERENCIAS:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

https://dev.to/alextomas80/el-operador-spread-en-javascript-12hc

https://www.w3schools.com/react/react_es6_spread.asp