No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES6: spread operator

8/35
Recursos

El operador de propagaci贸n (spread operator), como su nombre lo dice, consiste en propagar los elementos de un iterable, ya sea un array o string utilizando tres puntos (...) dentro de un array.

// Para strings
const array = [ ..."Hola"]    // [ 'H', 'o', 'l', 'a' ]

// En arrays
const otherArray = [ ...array]   //[ 'H', 'o', 'l', 'a' ]

Tambi茅n se utiliza para objetos, pero esta caracter铆stica fue a帽adida en versiones posteriores de ECMAScript y es denominada propiedades de propagaci贸n.

C贸mo copiar arrays utilizando el operador de propagaci贸n

Para realizar una copia de un array, deber谩s tener cuidado de la referencia en memoria. Los arrays se guardan en una referencia en la memoria del computador, al crear una copia, este tendr谩 la misma referencia que el original. Debido a esto, si cambias algo en la copia, tambi茅n lo har谩s en el original.

const originalArray = [1,2,3,4,5]
const copyArray = originalArray
copyArray[0] = 0

originalArray // [0,2,3,4,5]
originalArray === copyArray  // true

Para evitar esto, utiliza el operador de propagaci贸n para crear una copia del array que utilice una referencia en memoria diferente al original.

const originalArray = [1,2,3,4,5]
const copyArray = [...originalArray]
copyArray[0] = 0

originalArray // [1,2,3,4,5]
copyArray // [0,2,3,4,5]
originalArray === copyArray  // false

C贸mo unir arrays y a帽adir elementos con el operador de propagaci贸n

Para unir dos arrays con el operador de propagaci贸n, simplemente debes separarlos por comas en un array.

const array1 = [1,2,3]
const number = 4
const array2 = [5,6,7]

const otherArray = [ ...array1, number, ...array2 ]

otherArray // [1,2,3,4,5,6,7]

Cuidado con la copia en diferentes niveles de profundidad

El operador de propagaci贸n sirve para producir una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro del array a copiar. Entonces los sub-elementos en cada nivel, tendr谩n la misma referencia de memoria en la copia y en el original.

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

originalArray[1] === copyArray[1] // true

La manera de solucionar es m谩s compleja, tendr铆as que emplear el operador de propagaci贸n para cada elemento en cada nivel de profundidad.

Sin embargo, recientemente sali贸 una forma de producir una copia profunda con StructuredClone, aunque es una caracter铆stica muy reciente, as铆 que revisa que navegadores tienen soporte.

const originalArray = [1, [2,3] ,4,5]
const copyArray = structuredClone(originalArray)

originalArray === copyArray  // false
originalArray[1] === copyArray[1] // false

Este comportamiento tambi茅n sucede para objetos dentro de otros objetos, u objetos dentro de arrays.

Par谩metro rest

El par谩metro rest consiste en agrupar el residuo de elementos mediante la sintaxis de tres puntos (...) seguido de una variable que contendr谩 los elementos en un array.

Esta caracter铆stica sirve para crear funciones que acepten cualquier n煤mero de argumentos para agruparlos en un array.

function hola (primero, segundo, ...resto) {
  console.log(primero, segundo)  // 1 2
  console.log(resto) // [3,4,5,6]
}

hola(1,2,3,4,5)

Tambi茅n sirve para obtener los elementos restantes de un array u objeto usando desestructuraci贸n.

const objeto = {
  nombre: "Andres",
  age: 23,
  plataforma: "Platzi"
}
const array = [0,1,2,3,4,5]

const {plataforma, ...usuario} = objeto
cons [cero, ...positivos] = array

usuario // { nombre: 'Andres', age: 23 }
positivos // [ 1, 2, 3, 4, 5 ]

Posici贸n del par谩metro rest

El par谩metro rest siempre deber谩 estar en la 煤ltima posici贸n de los par谩metros de la funci贸n, caso contrario existir谩 un error de sintaxis.

// 鉂 Mal
function hola (primero, ...rest, ultimo) { ... }
// SyntaxError: Rest element must be last element. 

Diferencias entre el par谩metro rest y el operador de propagaci贸n

Aunque el par谩metro rest y el operador de propagaci贸n utilicen la misma sintaxis, son diferentes.

El par谩metro rest agrupa el residuo de elementos y siempre debe estar en la 煤ltima posici贸n, mientras que el operador de propagaci贸n expande los elementos de un iterable en un array y no importa en que lugar est茅 situado.

const array = [1,2,3,4,5]

function hola (primero, segundo, ...resto) { // <- Par谩metro Rest
  console.log(primero, segundo)  // 1 2
  console.log(resto) // [3,4,5, "final"]
}

hola(...array, "final") //<- Operador de propagaci贸n
//Lo mismo que hacer -> hola(1,2,3,4,5, "final")

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 37

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Te dejo unos ejemplos bastante peculiares con spread operators
Copia y pega esto en la consola de tu browser, te volar谩 la cabeza.

let kissEmoji = [..."馃懇鈥嶁潳锔忊嶐煉嬧嶐煈"]
console.log(kissEmoji)

let familyEmoji = [..."馃懆鈥嶐煈┾嶐煈︹嶐煈"]
console.log(familyEmoji)

S煤per cool, no crees?
Tiene sentido si lo piensas al final ambos objetos son una composici贸n de otros objetos

Yo numerando los archivos para que coincidan con los de Oscar.

Una diferencia importante de ambos par谩metros, como dice la documentaci贸n, es que el spread syntax (鈥), lo que hace es desestructurar elementos de un objeto o array.
.
Sin embargo lo que hace la rest syntax (鈥 pero usada como par谩metro en una funci贸n), es 鈥渆mpaquetar鈥 o 鈥渃ondensar鈥 los valores enviados como un elemento, sea array u objeto.
.
Spread syntax: desestructura -> deconstruye
Rest syntax: empaqueta -> construye

Chic@s dejo el codigo

  • Spread Operator
let person = { name: "Alexa", age: 24 };
let country = "COL"

let data = { ...person, country };
console.log(data);
  • Rest
function sum(num, ...values) {
    console.log(values);
    console.log(num + values[0]);
    return num + values[0];
}

sum(1, 1, 2, 3)

Soy la 煤nica que se emocion贸 con esto? jaja, siento que este operador me va a quitar dolores de cabeza.

Llegu茅 demasiado tarde a este curso 馃槩. Hace poco estaba trabajando en un reto de otro curso y lo quise solucionar con un m茅todo de los arrays pero este modificaba el array original por lo cual necesitaba una copia del array original y dur茅 un buen de horas buscando en Google c贸mo hacer la copia, hasta que pregunte en Stack Overflow y ah铆 me ense帽aron este concepto.

C贸mo copiar arrays utilizando el spread operator

Para realizar una copia de un聽array, deber谩s tener cuidado de la聽referencia en memoria. Los聽arrays聽se guardan en una referencia en la memoria del computador, al crear una copia, este tendr谩 la misma referencia que el original. Debido a esto,聽si cambias algo en la copia, tambi茅n lo har谩s en el original.

const originalArray = [1,2,3,4,5]
const copyArray = originalArray
copyArray[0] = 0

originalArray // [0,2,3,4,5]
originalArray === copyArray  // true

Para evitar esto, utiliza el operador de propagaci贸n para crear una copia del聽array聽que utilice una聽referencia en memoria diferente al original.

const originalArray = [1,2,3,4,5]
const copyArray = [...originalArray]
copyArray[0] = 0

originalArray // [1,2,3,4,5]
copyArray // [0,2,3,4,5]
originalArray === copyArray  // false

Ojo, cuando manejen spread operator para objetos. Cuando existe el mismo parametro en dos objetos distintos y hacemos uso de esta funcion es posible perder propiedades del primer o segundo objeto entonces presten mucha atencion a en que parte del objeto estan haciendo la destructuracion.
Ejemplo:

const person1 = {
	name: 'Oscar',
	age: 32
}

const person2 = {
	name: 'Emilano',
	job: 'Developer',
	...person1
}
console.log(person2) // Dara como output { name: 'Oscar', age: 32, job: 'Developer' }.
				  //  Esto gracias a que la destructuracion ocurre despues de la declaracion de
				  //  propiedades y esto reemplaza props con el mismo nombre.

const person3 = {
	...person1,
	name: 'Emiliano'
}
console.log(person3) // Dara como output { name: 'Emiliano', age: 32 } ya que la asignacion de la
				  // propiedad "name" ocurre despues de que el spread op asignara la prop del
				  // mismo nombre anteriormente

Recordemos que, a fin de cuentas, no todos los navegadores soportan las mismas caracteristicas de ECMAScript a pesar de existir como un estandar. Entonces muchas herramientas, como Babel, refactorizan las caracteristicas mas nuevas a sus implementaciones antiguas para homogeneizar la funcionalidad de js en todos los entornos.
Si quieren ver en vivo como se ve el codigo ECMAScript en js antiguo pueden acceder al siguiente sitio: https://babeljs.io

Hola!, quiero compartir este Art铆culo escrito por midudev C贸mo clonar un Array en JavaScript de forma correcta y sin problemas

Resumen!
Spread operator | Operador de Propagaci贸n
El operador de Propagaci贸n, nos va a permitir trabajar con una l贸gica que podamos propagar a otros elementos sin necesidad de volverla a escribir.
Es un operador que ayuda a crear nuevas variables utilizando elementos de otras variables, y/o elementos nuevos.

let person = {name: 'Julian', age:28}
let country = 'CO';
let data = {...person, country};
console.log(data);

PARAMETROS REST

traer elementos con rest parameter:

function sum(num, ...values){
console.log(values);
console.log(num + values[0]);
return num + values [0];
}
sum(2,3,4,5);

Shout out para @Andr茅s Guano, que sin esos aportes dentro de los recursos, seguro despu茅s me sentir铆a medio perdido.

Es importante que si deseas hacer uso del rest operator en los par谩metros de una funci贸n, lo establezcas como el 煤ltimo en la lista de par谩metros, si no te arrojara el siguiente error:

SyntaxError no detectado: el par谩metro Rest debe ser el 煤ltimo par谩metro formal

pero si no le pongo los 3 puntos que pasa

Cuidado con el ejercicio de desestructuraci贸n鈥

En los recursos de la clase hay un ejercicio de desestructuraci贸n con un error, se utiliza const en lugar de let y esto hace que el resultado no funcione como deber铆a ser.

Tener en cuenta a la hora de usar spread
let obj = { id: 1, nombre: 鈥淔ulano鈥 };
NO es lo mismo:
obj = { id: 2, 鈥bj}; // Esto devuelve { id: 1, nombre: 鈥淔ulano鈥 }

Que:
obj = {鈥bj, id: 2}; // Esto devuelve { id: 2, nombre: 鈥淔ulano鈥 }

Las keys que escribas antes del spread, seran reemplazadas con el spread si ya existen, por lo cual si se desea modificar un valor, el spread debe ir antes de colocar dicho valor

![](https://static.platzi.com/media/user_upload/code-376bd7b5-f638-479f-a6ff-97da24852d58.jpg)
En los par谩metros solo se puede agregar el spredad operator?

Spread Operator (Operador de Propagaci贸n)

El operador de propagaci贸n es una caracter铆stica introducida en ECMAScript 6 (ES6) que te permite desplegar los elementos de un iterable (como un arreglo, objeto o cadena) en varios lugares. Se denota con tres puntos ....

El operador de propagaci贸n es bastante vers谩til y tiene varios usos en la programaci贸n en JavaScript. Aqu铆 tienes algunas formas comunes de usar el operador de propagaci贸n:

  1. Arreglos:

    Puedes utilizar el operador de propagaci贸n para crear un nuevo arreglo al desplegar los elementos de un arreglo existente. Esto es 煤til cuando deseas clonar un arreglo o combinar varios arreglos en un solo arreglo.
const arreglo1 = [1, 2, 3];
const arreglo2 = [...arreglo1]; // Clona arreglo1
const arregloCombinado = [...arreglo1, 4, 5]; // Combina arreglo1 y elementos adicionales
  1. Argumentos de Funci贸n:

    El operador de propagaci贸n se puede usar para pasar elementos de un arreglo como argumentos a una funci贸n.
function sumar(a, b, c) {
  return a + b + c;
}

const numeros = [1, 2, 3];
const suma = sumar(...numeros); // Equivalente a sumar(1, 2, 3)
  1. Propiedades de Objetos:

    En ES6, el operador de propagaci贸n tambi茅n se puede usar para crear un nuevo objeto al desplegar las propiedades de un objeto existente.
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 }; // Crea un nuevo objeto con propiedades de obj1 y z
  1. Combinar Arreglos:

    Puedes combinar arreglos utilizando el operador de propagaci贸n en lugar de utilizar m茅todos como concat.
const arreglo1 = [1, 2, 3];
const arreglo2 = [4, 5, 6];
const arregloCombinado = [...arreglo1, ...arreglo2]; // Resultado: [1, 2, 3, 4, 5, 6]
  1. Listas de Argumentos de Funci贸n:

    El operador de propagaci贸n se puede usar para convertir un objeto similar a un arreglo (como el objeto arguments) en un arreglo real.
function imprimirArgumentos(...args) {
  console.log(args);
}

imprimirArgumentos(1, 2, 3); // Salida: [1, 2, 3]
  1. Conversi贸n de Cadena a Arreglo:

    Puedes usar el operador de propagaci贸n para convertir una cadena en un arreglo de caracteres.
const cadena = "hola";
const arregloCaracteres = [...cadena]; // Resultado: ['h', 'o', 'l', 'a']

Recuerda que el operador de propagaci贸n crea copias superficiales de los elementos que despliega. Esto significa que si est谩s desplegando un arreglo u objeto que contiene arreglos u objetos anidados, los elementos anidados a煤n har谩n referencia a los mismos objetos en memoria.

Si necesitas una copia profunda, deber谩s utilizar otras t茅cnicas como la recursi贸n o bibliotecas que manejen la clonaci贸n profunda.


En resumen, el operador de propagaci贸n es una forma poderosa y concisa de trabajar con arreglos, objetos y otros iterables en JavaScript.



Espero les sirva. 馃懆鈥嶐煉

Operador de Propagaci贸n (Spread Operator)

El Operador de Propagaci贸n (Spread Operator), es una caracter铆stica que se utiliza para descomponer elementos de arrays, objetos y otros tipos de datos en lugares donde se esperan m煤ltiples elementos. En esencia, permite expandir una estructura en varios elementos individuales.
En JavaScript, el operador de propagaci贸n se denota mediante tres puntos consecutivos (鈥).

  • Uso con Arrays:
const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4, 5];
console.log(nuevosNumeros); // Resultado: [1, 2, 3, 4, 5]
  • Uso con Objetos:
const persona = { nombre: 'Ana', edad: 30 };
const nuevaPersona = { ...persona, ciudad: 'Madrid' };
console.log(nuevaPersona); // Resultado: { nombre: 'Ana', edad: 30, ciudad: 'Madrid' }
  • Uso para Pasar Argumentos en Funciones:
function sumar(a, b, c) {
  return a + b + c;
}
const numeros = [1, 2, 3];
const resultado = sumar(...numeros);
console.log(resultado); // Resultado: 6
  • Uso para Clonar Arrays u Objetos:
const originalArray = [1, 2, 3];
const copiaArray = [...originalArray];
const originalObjeto = { nombre: 'Elena', edad: 25 };
const copiaObjeto = { ...originalObjeto };
  • Combinando Arrays:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinado = [...array1, ...array2];
console.log(combinado); // Resultado: [1, 2, 3, 4, 5, 6]

Operador Rest (Rest Operator)

El operador rest se utiliza en la declaraci贸n de funciones para capturar un n煤mero variable de argumentos en forma de un array. A diferencia del operador de propagaci贸n (spread operator), que se utiliza para descomponer estructuras en elementos individuales, el operador rest se usa para agrupar m煤ltiples elementos en un array.
En JavaScript, el operador rest se denota tambi茅n mediante tres puntos consecutivos (鈥), pero su uso es diferente.

  • Uso en Declaraci贸n de Funciones
    En el siguiente ejemplo, el operador rest (鈥umeros) en la declaraci贸n de la funci贸n 鈥渟umar鈥 permite que la funci贸n acepte cualquier n煤mero de argumentos y los agrupe en un array llamado numeros
function sumar(...numeros) {
  let total = 0;
  for (const numero of numeros) {
    total += numero;
  }
  return total;
}
console.log(sumar(1, 2, 3)); // Resultado: 6
console.log(sumar(4, 5, 6, 7)); // Resultado: 22
  • Uso en Destructuraci贸n
    El operador rest tambi茅n se puede utilizar en destructuraci贸n para capturar valores restantes en un array o en par谩metros de funciones.
const [primero, segundo, ...restantes] = [1, 2, 3, 4, 5];
console.log(primero); // Resultado: 1
console.log(segundo); // Resultado: 2
console.log(restantes); // Resultado: [3, 4, 5]
  • Uso en Par谩metros de Funciones
function mostrarDatos(nombre, edad, ...otros) {
  console.log(`Nombre: ${nombre}`);
  console.log(`Edad: ${edad}`);
  console.log(`Otros: ${otros}`);
}
mostrarDatos('Juan', 30, 'Madrid', 'Programador');

que pasa si no le pongo los 3 puntos

function sum (num, ...values) {
    console.log(values);
    console.log(num + values[2]);
    return num + values[0];
}

sum(1, 1, 2, 3, 4, 5, 6);
console.log(sum(1,2,3,4)); // here you can see the return of the function

馃摍 Archivos del Proyecto 馃摍


Pasos 馃搶

  • 鈥 Dentro de la carpeta es6, en el archivo llamado: 04-rest-spread.js
      • 鈼 El c贸digo de los ejercicios a partir de spread operator queda:
//Ejercicio #3
//Spread operator
let person = {name: 'Oscar', age: 28};
let country = 'MX';

let data = { ...person, country};
console.log(data);

/*output:
{ name: 'Oscar', age: 28, country: 'MX' }
*/

let data2 = { id: 1, ...person, country};
console.log(data2);

/*output:
{ id: 1, name: 'Oscar', age: 28, country: 'MX' }
*/

//Ejercicio #4
//rest
function sum(num, ...values){
	console.log(values);
	console.log(num + values[0]);
	return num + values[0];
}

sum(1, 1, 2, 3);

/*output:
[ 1, 2, 3 ]
2
*/

waos

Me pregunto si esto lo incorpora PHP/Java

Siempre ve铆a los trs puntitos en aportes de compa帽eros pero no entend铆a para que serv铆an. Ahora con esta clase y la descripci贸n de esta ya me quedo clar铆simo. Acotar que el spread operator solo funciona de array a array y object a object, no se pueden combinar porque saldr谩 error.

Dejo mi resumen.

8/35 ES6: spread operator

El operador de propagaci贸n y el par谩metro rest son caracter铆sticas muy 煤tiles en Javascript, pero puede ser un poco confusas al principio.

El operador de propagaci贸n o spread operator, se utiliza para 鈥減ropagar鈥 los elementos de un iterable (como array o un string) en otro array. Esto se hace utilizando la sintaxis de tres puntos (鈥) Ej:

const array = [... "Hola"] // El resultado es ['H', 'o', 'l', 'a']

Tambi茅n puedes usar el operador de propagaci贸n para crear una copia de un array, sin compartir la misma referencia en memoria que el original.

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

El par谩metro rest tambi茅n utiliza la sintaxis de tres puntos, pero se utiliza en una funci贸n para agrupar los argumentos restantes en un array. Por ejemplo:

function sumar (...numeros) {
	let resultado = 0;
	for (let numero of numeros) {
	resultado += numero;
	}
	return resultado;
}
console.log(sumar(1,2,3,4,5)); // R es 15

me llama la atencino qeu se pueces acomular tantos objetos se necesiten

let user = { username: "fernando", age: 30 };
let carrera = { nameC: "TC", status: "finished" };
let { username, age } = user;
console.log(username, user.age);

///spred operator
let person = { name: "espiritu", age: 30 };
let conuntry = "MX";

let data = { id: 1, ...person, conuntry, ...carrera };
console.log(data);

Como podr铆a quedar la funci贸n de sumar:

// rest
function sumar(a = 0, ...elements) 
{
    console.log({
        a, elements
    });
    
    let suma = a;
    elements.map( e => {
        suma = suma + e;
        return suma;
    } );

    let suma2 = a;
    let total = elements.reduce( (a, b) =>  a + b );
    suma2 += total;

    console.log({ suma, suma2 });
}

sumar(1, 2, 3, 4);

// Resultado
// { a: 1, elements: [ 2, 3, 4 ] }
// { suma: 10, suma2: 10 }

馃殌El soporte en navegadores de StructuredClone, a la hora de escribir esto es del 87,71% Soporte en navegadores de structuredClone

le quiero poner like a esta clase

Hola! Mis apuntes en Notion

APUNTES

Este feature si est谩 incre铆ble. mi favorito hasta el momento. Gracias profe.

Hola a todos.
Tengan en cuanta que el spread operator no copia las capas m谩s profundas de un array u objeto, lo hacer por referencia. Para evitar este problema es mejor usar deep copy.
Les comparto el c贸digo para poder realizar deep copy, el mismo es del Curso Intermedio de Programaci贸n Orientada a Objetos en JavaScript, clase Deep copy con recursividad.

function isObjectOrArray (element) {
	const ELEMENT_IS = {
		'[object Object]' : 'object',
		'[object Array]'  : 'array'
	};
	const TYPE_ELEMENT = Object.prototype.toString.call(element);
	const IS_ELEMENT_ANY = TYPE_ELEMENT !== '[object Object]' && TYPE_ELEMENT !== '[object Array]';
	const RESULT = (IS_ELEMENT_ANY)
		? 'any'
		: ELEMENT_IS[TYPE_ELEMENT];

	return RESULT;
}

function deepCopy (subject) {
	const SUBJECT_IS = isObjectOrArray(subject);

	if (SUBJECT_IS === 'any')
		return subject;
	const COPY_SUBJECT = (SUBJECT_IS === 'array')
		? []
		: {};

	for (const KEY in subject) {
		const IS_KEY_ANY = isObjectOrArray(subject[KEY]) === 'any';

		COPY_SUBJECT[KEY] = (IS_KEY_ANY)
			? subject[KEY]
			: deepCopy(subject[KEY]);
	}

	return COPY_SUBJECT;
}

Repositorio github del profe 鈫 Archivo manejado en la clase:

let sumar = (...values) => values.reduce((a,b) => a+b);
let res=sumar(1/10,1/12,1/25,1/15);
function inverso(invertidoRt){
    rt=1/invertidoRt;
    console.log(rt);
}
inverso(res); //resultado de la suma de las resistencias en paralelo.

la suma de un arreglo de resistencias en paralelo es igual a el inverso de la suma de las resistencias. desde r1 hasta rn.
1/rt=1/r1+1/r2+1/r3+鈥+1/rn
Con lo cual hacer esta suma no esta cool despu茅s de r3, jaja xp pero pufff, con esto, bien f谩cil. Obvio el c贸digo se puede optimizar pero, pero鈥 que f谩cil se ve la estructura, eso hace este c贸digo.
PD:
Por cierto el array que resulta de el par谩metro rest recibe el nombre que usas para declarar el rest, 贸sea 鈥omething con lo que el array se llama something

jeje nice
Esto sireve bastante para matematicas, esta cool. los arrays con esa destructuracion se ven mas entendibles si los usamos para matrices de algebra lineal de nxn y eso del rest, puff hermoso, digamos para sacar la resistecia total de un arreglo de resitencias en paralelo. nombreeeee. chulada鈥

Wow es sorprendente!!, no sabes la cantidad de dolores de cabeza que esto me hubiera ahorrado en proyectos pasados.

Excelente clase.