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

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
42 Min
59 Seg

Spread operator: casos de uso

34/55
Recursos

¿Qué es el Spread Operator y cómo se utiliza?

El Spread Operator es una herramienta poderosa en JavaScript que te permite manipular arreglos y objetos de manera flexible y eficiente. Su representación se hace mediante tres puntos (...), y es utilizado en diversas acciones, como copiar arreglos, combinarlos, añadir elementos, o incluso, pasar parámetros a funciones. Su versatilidad lo ha convertido en un componente esencial en la programación moderna.

¿Cómo copiar un arreglo sin modificar el original?

Copiar un arreglo es una de las aplicaciones más básicas del Spread Operator. Supongamos que tienes un arreglo original del cual deseas crear una copia para no afectar el original al realizar modificaciones. El código para efectuar esta operación es sencillo:

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

console.log('Original:', originalArray);
console.log('Copiado:', copiedArray);

Este método es útil para preservar datos originales que podrían resultar afectados por cambios involuntarios en tu código.

¿Cómo combinar arreglos con Spread Operator?

El proceso de combinar arreglos es otro uso común del Spread Operator. Es posible fusionar múltiples arreglos en uno solo fácilmente:

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

console.log('Array combinado:', combinedArray);

Al utilizar el Spread Operator, es sencillo extender el contenido de varios arreglos para crear estructuras de datos compuestas, evitando operaciones más complejas y menos eficientes.

¿Cómo crear un nuevo arreglo con elementos adicionales?

El Spread Operator también es práctico para crear nuevos arreglos que incluyan elementos adicionales sin modificar los originales. Este enfoque es útil cuando necesitas construir un nuevo conjunto de datos con una base preestablecida:

const baseArray = [1, 2, 3];
const extendedArray = [...baseArray, 4, 5, 6];

console.log('Array extendido:', extendedArray);

Esta técnica permite agregar elementos de manera directa y sencilla, evitando alterar los datos originales.

¿Cómo pasar elementos de un arreglo a una función?

Al trabajar con funciones que requieren múltiples argumentos, el Spread Operator facilita el paso de los elementos de un arreglo como parámetros:

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

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log('Resultado de la suma:', result);

Este método reduce la complejidad al manejar funciones con varios parámetros, permitiendo pasar directamente arreglos que contienen todos los valores necesarios.

El Spread Operator es además compatible con objetos y puede ser empleado para realizar operaciones similares a las mencionadas con arreglos. Este operador es invaluable para cualquier desarrollador web que busque escribir código limpio y eficiente.

Recomendaciones para dominar el Spread Operator

  • Practica con ejemplos reales: Mientras más practiques, mejor comprenderás su flexibilidad y aplicaciones.
  • Explora combinaciones: Experimenta combinando arreglos y objetos para entender cómo se despliega su contenido.
  • Consulta la documentación: Mantente actualizado con la documentación oficial de JavaScript para descubrir nuevas funcionalidades y características.

Continuar explorando y aprendiendo nuevas técnicas con el Spread Operator y otras herramientas en JavaScript enriquecerá tu desarrollo profesional y te permitirá crear soluciones más robustas e innovadoras. ¡No dejes de practicar y mejorar tus habilidades en programación!

Aportes 15

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.
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)
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>
**APUNTES:** ![](https://static.platzi.com/media/user_upload/image-7c4f85a6-00b0-434c-a694-885df6c48289.jpg)
![](https://static.platzi.com/media/user_upload/image-43ae0529-5c4f-478d-a98c-11232a012cbc.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)