Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Spread operator: casos de uso

34/55
Recursos

Aportes 14

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

## 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) 📃
La diferencia principal entre el Spread Operator y la concatenación de arrays es su funcionalidad. El Spread Operator (`...`) permite copiar, combinar o extender arrays sin modificar el original, mientras que la concatenación (usando `concat()`) crea un nuevo array combinando los elementos de dos o más arrays. Ejemplo: ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; // Usando Spread Operator const combinedWithSpread = [...array1, ...array2]; // Usando concatenación const combinedWithConcat = array1.concat(array2); ``` Ambos métodos logran el mismo resultado, pero el Spread Operator es más versátil y más conciso.
Sí, el Spread Operator en JavaScript se puede considerar similar a concatenar arrays. Al usarlo, puedes combinar múltiples arrays en uno solo de manera sencilla, similar a cómo lo harías con la concatenación. Por ejemplo: ```javascript const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const combinedArray = [...array1, ...array2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] ``` Esto permite una manipulación más flexible y concisa de los arrays.
<u>prueba</u>
Se puede convertir un string en un array de caracteres utilizando spread operator. ![](https://static.platzi.com/media/user_upload/string_array-b66ab788-d409-4014-bbc4-bcc748c02eb6.jpg)
**APUNTES:** ![](https://static.platzi.com/media/user_upload/image-7c4f85a6-00b0-434c-a694-885df6c48289.jpg)
no sé si es el caso, pero el detalle de usar spread para functions me pareció muy útil e interesante
estos estudios están super pero creo que le hace falta una ejercicio de un proyecto real que nervios pero bueno primer aprender y repasar y luego practicar y practicar const arreglo1 = \[ 1,2,3,4,5 ];const arreglo2 = \[ 6,7,8,9,10]; console.log(arreglo1);console.log(arreglo2);console.log (  ... arreglo1, ... arreglo2); // conbina nuestros arreglos console.log (  ... arreglo1, ... arreglo2 , 11 ,12, 13 ); // agreca elementos a nustro arreglo console.log(arreglo1 + "," + arreglo2);  function sum (a,b,c) {   // creo una funcio donde defino sin valor suma   return a + b + c }  const nuevosNumeros = \[1,2,3]; // creo una arreglo  const resultado = sum( ...nuevosNumeros);  // paso nuestro nuevos valores del el arreglo a sum  console.log(resultado);
No sé si alguien ya lo hizo o algo asi, pero hasta aquí me reporte Joaquin.const nombres = \['Haru','Susy','Aramis','Ulises']function greetingPerson(...People) {     for (name of People) {        console.log(`Hola ${name}`)    }    } greetingPerson(...nombres) function sum(...numbers){    const rere = numbers.reduce((accumulator, currentValue)  => accumulator + currentValue, 0)    return rere} const arrayNumber = \[1,2,3,4]const result = sum(...arrayNumber)console.log(result)![](https://static.platzi.com/media/user_upload/image-3e9eecfe-549a-4bc1-9338-d9c88b64fc8e.jpg) ```js const nombres = ['Haru','Susy','Aramis','Ulises'] function greetingPerson(...People) { for (name of People) { console.log(`Hola ${name}`) } } greetingPerson(...nombres) function sum(...numbers){ const rere = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0) return rere } const arrayNumber = [1,2,3,4] const result = sum(...arrayNumber) console.log(result) ```
## Uso del Spread Operator en Arrays * El Spread Operator (`...`) permite realizar diversas operaciones con arrays, como la copia y combinación de arrays. * Es especialmente útil para mantener la inmutabilidad de los datos. ## Copiar un Array * Utilizar el Spread Operator para copiar un array sin modificar el original. * Ejemplo de código: const originalArray = \[1, 2, 3, 4, 5]; const copiedArray = \[...originalArray]; console.log(originalArray); // \[1, 2, 3, 4, 5] console.log(copiedArray); // \[1, 2, 3, 4, 5] ## Combinar Arrays * El Spread Operator permite combinar varios arrays en uno solo. * Ejemplo de código: const array1 = \[1, 2, 3]; const array2 = \[4, 5, 6]; const combinedArray = \[...array1, ...array2]; console.log(array1); // \[1, 2, 3] console.log(array2); // \[4, 5, 6] console.log(combinedArray); // \[1, 2, 3, 4, 5, 6] ## Crear Arrays con Elementos Adicionales * Es posible crear un nuevo array basado en uno existente y agregarle nuevos elementos. * Ejemplo de código: const baseArray = \[1, 2, 3]; const arrayWithAdditionalElements = \[...baseArray, 4, 5, 6]; console.log(baseArray); // \[1, 2, 3] console.log(arrayWithAdditionalElements); // \[1, 2, 3, 4, 5, 6] ## Pasar Elementos a Funciones * El Spread Operator puede ser usado para pasar elementos de un array como argumentos a una función. * Ejemplo de código: function sum(a, b, c) { return a + b + c; } const numbers = \[1, 2, 3]; const result = sum(...numbers); console.log(result); // 6 ## Próximos pasos * Practicar el uso del Spread Operator en diferentes contextos para afianzar su comprensión. * Experimentar con combinaciones más complejas de arrays y funciones. * Investigar más sobre otras características avanzadas del Spread Operator y cómo se pueden aplicar en proyectos de desarrollo de software.
El spread operator, representado por tres puntos (`...`), se utiliza en JavaScript para expandir elementos de un array o un objeto. Permite copiar arrays, combinar varios arrays en uno nuevo y pasar elementos de arrays como parámetros a funciones. Es útil para evitar mutaciones en el array original y mejorar la legibilidad del código. Por ejemplo: ```javascript const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // Combina arr1 con nuevos elementos console.log(arr2); // [1, 2, 3, 4, 5] ``` Con esto, puedes gestionar arrays de forma más eficiente en tus proyectos de JavaScript.
### Notes ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1a670d57-e7b5-4b48-93bb-e9cebde572e7/16624161-22e0-463d-bb4a-466159fe4deb/image.png) ***<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.
![](https://static.platzi.com/media/user_upload/image-e089950f-16cf-4da6-823e-8f6670874fcd.jpg) ![](https://static.platzi.com/media/user_upload/image-974eb298-082e-49e3-a6e7-67fd08cbe7a8.jpg)
![]()![](https://static.platzi.com/media/user_upload/image-4f27f779-d381-4517-b62b-01009594c3b5.jpg)