Spread operator: casos de uso

## Resumen de la clase El [spread operator o spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (`...`) nos permite, como su nombre lo indica, *esparcir* o expandir <u>objetos iterables</u>! > 💡 Si aún no sabes lo que es un **objeto iterable** y un objeto enumerable, te invito a que revises la explicación que te dejé en la clase del ciclo 📺 [for... of](https://platzi.com/home/clases/10266-javascript/70345-loop-for-of/) ### Usos del `...`: ```js // Copiar Arrays const newArray = [...oldArray]; // Combinar Arrays const mergedArray = [...array1, ...array2]; // Añadir Elementos existentArray = [...existentArray, item1, item2]; // Parámetros de funciones myFunction(...theArguments); ``` > También podemos utilizar esta sintaxis con objetos literales (`{}`)! Puedes aprender más sobre esto en [la documentación](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) 📃

### Notes  ***<u>S</u>***[***<u>pread operator</u>***](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) El [spread operator o spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (`...`) nos permite, como su nombre lo indica, *esparcir* o expandir \<u>objetos iterables\</u>! El operador de propagación (spread operator) en JavaScript, representado por tres puntos (`...`), es una herramienta poderosa que permite expandir elementos de un iterable (como un array o una cadena) ### Usos del `...`: 1. **Copiar Arrays** `const originalArray = [1, 2, 3];` `const copiedArray = [...originalArray];` `console.log(copiedArray); // [1, 2, 3]` 1. **Concatenar Arrays** `const array1 = [1, 2, 3];` `const array2 = [4, 5, 6];` `const concatenatedArray = [...array1, ...array2];` `console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]` 1. **Pasar Argumentos a Funciones** `function sum(a, b, c) {` ` return a + b + c;` `}` `const numbers = [1, 2, 3];` `console.log(sum(...numbers)); // 6` 1. Create array addtional elements `const baseArray=[1,2,3];` `const arrayWithAdditionalElements = [...baseArray,'hi',5,6];` `console.log(baseArray);` `console.log(arrayWithAdditionalElements);` 1. **Pasar Argumentos a Funciones** `function sum (a,b,c){` ` return a + b + c` `}` `const number = [1,2,3];` `const result = sum(...number);` `console.log(result);` 1. **Clonar Objetos** const originalObject = { a: 1, b: 2 }; const clonedObject = { ...originalObject }; console.log(clonedObject); // { a: 1, b: 2 } 1. **Combinar Objetos** `const obj1 = { a: 1, b: 2 };` `const obj2 = { c: 3, d: 4 };` `const combinedObject = { ...obj1, ...obj2 };` `console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }` ### Cómo se Utiliza El operador de propagación se utiliza colocando `...` antes de un iterable (como un array o un objeto) en el contexto donde se espera una lista de elementos o argumentos. Aquí tienes algunos ejemplos prácticos: * **En Arrays**: Para copiar o concatenar arrays. * **En Objetos**: Para clonar o combinar objetos. * **En Funciones**: Para pasar elementos de un array como argumentos individuales a una función.

 

**APUNTES:** 

<u>prueba</u>

![]()