No tienes acceso a esta clase

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

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
10M
27S

ES6: spread operator

9/38
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 16

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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 “empaquetar” o “condensar” los valores enviados como un elemento, sea array u objeto.
.
Spread syntax: desestructura -> deconstruye
Rest syntax: empaqueta -> construye

[email protected] 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

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);

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

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:

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.

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 …something 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.

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