Hoy día existe un método global llamado structuredClone que hace una copia profunda de los objetos. El spread operator tiene un límite de copia solo hasta el primer nivel
0:00/16:04
Hoy día existe un método global llamado structuredClone que hace una copia profunda de los objetos. El spread operator tiene un límite de copia solo hasta el primer nivel
// Parámetro: number
function getDouble (number) {
return number * 2;
// Argumento: 10
getDouble(10);
// Parámetro por default:
function greet(person = 'extraño') {
console.log("Hola " + person);
}
greet("Carina"); // "Hola Carina"
greet(); // "Hola extraño"
//Rest Operator:
function add(x, y, ...args) {
console.log(args);
}
const numbersA = [1, 2, 3];
const clonedNumbers = [...numbersA];
console.log(clonedNumbers) // [1, 2, 3]
const numbersB = [4, 6, 8]
const totalNumbers = [...numbersA, ...numbersB];
console.log(totalNumbers);
Saludos!!! Algo para agregar seria que podemos tomar alguno de los elementos que necesitemos del operador rest, quizá no necesitamos clonar todo solo tomar algunos elementos que ocupemos, por lo tanto crearíamos esas variables independientes de la siguiente manera:
(
Una característica muy importante del ==spread operator== es que es inmutable, es decir, ==copia los valores y no la referencia== y devuelve un nuevo array que asignamos a una nueva variable o constante.
// En este ejemplo podemos ver que los arrays: numbersA, numbersB y numbersC no cambiaron y sí pudimos generar una copia de sus valores.
const numbersA = [1,2,3];
const numbersB = [4,5,6];
const numbersC = [7,8,9];
const newNumbers = [...numbersA, ...numbersB, ...numbersC];
console.log('numbersA', numbersA);
console.log('numbersB', numbersB);
console.log('numbersC', numbersC);
console.log('newNumbers', newNumbers);
Tienes que tener en cuenta que si tenemos un objeto anidado dentro de otro objeto y utilizamos el operador spread para clonar el objeto completo, es posible que se genere una copia superficial del objeto anidado y, por lo tanto, cualquier cambio en el objeto clonado también afectará al original.
const usuario1 = {
nombre: 'Juan',
edad: 25,
direccion: {
calle: 'Calle Falsa',
numero: 123,
ciudad: 'Buenos Aires'
}
};
const usuario2 = { ... usuario1 };
usuario2.direccion.calle = 'Otra Calle';
console.log (usuario1.direccion.calle);
Si te diste cuenta, aunque señalamos específicamente una modificación en la dirección del usuario2, terminamos modificando por igual la dirección del usuario1.
Existen otras soluciones como JSON.parse(JSON.stringify()), que podrían ayudarte a clonar un objeto de forma completa.
Por favor que el equipo de este curso haga un remake del curso profesional de JS... Son realmente buenos.
Solo para resaltar y terminar de entender, en el minuto 3:10 el profesor habla de llamar funciones con o sin parametro, el término correcto sería llamar funciones con o sin argumento???.
Las funciones se crean con parametros y se llaman con argumentos me pueden confirmar si estoy en lo correcto ???
function greet(person = 'strange'){ //--> Parametro de función es person por default es = 'strange'
console.log('Hello ' + person)
}
greet('Felipe') //--> Se llama a la función pasando 'Felipe como argumento'
manejas algun tema para vscode?
Spread operator o Parámetro Rest
Resumen de la clase
Cayo Legal
Hoy día existe un método global llamado structuredClone que hace una copia profunda de los objetos. El spread operator tiene un límite de copia solo hasta el primer nivel
Ariel Ezequiel Biazzo Genua
O... tambien podemos hacer un algoritmo de deepFreeze :)
Brandon Lee Aguero Fernandez
O... también podemos utilizar una fábrica de objetos
Carina Payleman
José Antonio Medina Sánchez
Buen resumen compañera, saludos!!!
José Antonio Medina Sánchez
Saludos!!! Algo para agregar seria que podemos tomar alguno de los elementos que necesitemos del operador rest, quizá no necesitamos clonar todo solo tomar algunos elementos que ocupemos, por lo tanto crearíamos esas variables independientes de la siguiente manera:
(
Santiago Andres Alvarez Cuadros
Markin Piero Pulache Guarniz
buen aporte
Elcira Ibarra
Arturo Malgor
La verdad, da gusto leer tus aportes, muy bien explicado todo. Sigue Así!!!
Luis Palomo
Super importante esto! gracias!
Francisco Ponce
Tienes que tener en cuenta que si tenemos un objeto anidado dentro de otro objeto y utilizamos el operador spread para clonar el objeto completo, es posible que se genere una copia superficial del objeto anidado y, por lo tanto, cualquier cambio en el objeto clonado también afectará al original.
const usuario1 = { nombre: 'Juan', edad: 25, direccion: { calle: 'Calle Falsa', numero: 123, ciudad: 'Buenos Aires' } }; const usuario2 = { ... usuario1 }; usuario2.direccion.calle = 'Otra Calle'; console.log (usuario1.direccion.calle);
Si te diste cuenta, aunque señalamos específicamente una modificación en la dirección del usuario2, terminamos modificando por igual la dirección del usuario1.
Existen otras soluciones como JSON.parse(JSON.stringify()), que podrían ayudarte a clonar un objeto de forma completa.
anderson buitron
Muy buen aporte Francisco!, si usamos el "spread operator" para clonar un objeto con objetos anidados, estariamos creando un "clon siames" (clones unidos por alguna estructura interna), y no un "clon independiente" del objeto original. Yo tambien uso normalmente "let obj_clon=JSON.parse(JSON.stringify(obj_original));" para crear clones independientes.
N40 M10
Por favor que el equipo de este curso haga un remake del curso profesional de JS... Son realmente buenos.
Markin Piero Pulache Guarniz
si
Felipe Toro C
Solo para resaltar y terminar de entender, en el minuto 3:10 el profesor habla de llamar funciones con o sin parametro, el término correcto sería llamar funciones con o sin argumento???.
Las funciones se crean con parametros y se llaman con argumentos me pueden confirmar si estoy en lo correcto ???
function greet(person = 'strange'){ //--> Parametro de función es person por default es = 'strange' console.log('Hello ' + person) } greet('Felipe') //--> Se llama a la función pasando 'Felipe como argumento'
Mauricio J Carrillo
Si, estás en lo correcto. Las funciones se declaran o expresan con parámetros y se llaman con argumentos.
Sebastián Bonilla
manejas algun tema para vscode?
Ana Rotela Cabrera
Spread operator o Parámetro Rest
Ana Rotela Cabrera
Resumen de la clase
Luis Eduardo Payano Villar
Luis Eduardo Payano Villar
function sum(...numbers){ return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1,2,3,4,5)); ```*function* *sum*(*...*numbers){ *return* *numbers*.*reduce*((acc, curr) *=>* acc *+* curr, 0);} *console*.*log*(*sum*(1,2,3,4,5));
Melisa Barrera
BinaryTreeCode
José manuel Sanchez Juarez
Está muy bueno el curso, pero creo que metieron demasiado contenido en los videos, algunos si son muy extenso, en mi caso en particular siento que solo ven algunos temas superficialmente.
Ulqernesh Karvenae
Hello undefined
Xavier Flores
en React esta clase es altamente usada para trabajar con estados y eventos.
John Andrey Serrano
Hay que tener cuidado con los parámetros default ya que solo tienen en cuenta si el valor es undefinedse asigna el value default, ejemplo:
function greet (name = 'Andrey') { console.log(`Hello ${name}`) } greet() // "Hello Andrey" greet('John') // "Hello John" greet(undefined) // "Hello Andrey" greet('') // "Hello " greet(false) // "Hello false" greet(null) // "Hello null"
Una posible solución a esto sería:
function greet (name = 'Andrey') { if (name) { console.log(`Hello ${name}`) } } greet() // "Hello Andrey" greet('John') // "Hello John" greet(undefined) // "Hello Andrey" // como el valor es "false" no se ejecuta el console.log() greet('') greet(false) greet(null)
Alejandro Brand
El spread operator y el rest operator no son lo mismo. El primero se usa para descomponer un iterable, también se puede usar para expandir sus elementos en otro iterable o en los argumentos de una funcion
El rest operator se utiliza en una lista de parámetros de una funcion para capturar un número variable de argumentos en forma de arreglo
Camilo Taborda
otra opcion a la hora de concatenar Arrays
const numbersA = [1, 2, 3]; const numbersB = [5, 6, 7]; const numbersC = numbersA.concat(numbersB); console.log(numbersC);
Argumentos VS Parámetros
// Parámetro: number function getDouble (number) { return number * 2; // Argumento: 10 getDouble(10);
// Parámetro por default: function greet(person = 'extraño') { console.log("Hola " + person); } greet("Carina"); // "Hola Carina" greet(); // "Hola extraño" //Rest Operator: function add(x, y, ...args) { console.log(args); }
const numbersA = [1, 2, 3]; const clonedNumbers = [...numbersA]; console.log(clonedNumbers) // [1, 2, 3] const numbersB = [4, 6, 8] const totalNumbers = [...numbersA, ...numbersB]; console.log(totalNumbers);
Lo que mencionas se conoce como sintaxis de desestructuración pero no está relacionado con el operador REST. Tu ejemplo se puede hacer también así:
const course = { title: 'Título de ejemplo', content: 'Contenido de ejemplo', tags: ['uno', 'dos', 'tres'] } const { title, tags } = course console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']
No es necesario utilizar spread operator en course porque éste de por sí ya es un objeto.
.
La sintaxis de desestructuración se utiliza para extraer valores de objetos o arreglos de una forma rápida y fácil de entender, creando variables con el mismo nombre que los valores del objeto a desestructurar. Lo de arriba sería lo mismo que hacer esto:
const course = { title: 'Título de ejemplo', content: 'Contenido de ejemplo', tags: ['uno', 'dos', 'tres'] } const title = course.title const tags = course.tags console.log(title, tags) // Título de ejemplo ['uno', 'dos', 'tres']
Incluso, puedes usar nombres distintos para las variables en caso de ser necesario:
const course = { title: 'Título de ejemplo', content: 'Contenido de ejemplo', tags: ['uno', 'dos', 'tres'] } const { title: courseTitle, tags: courseTags } = course console.log(courseTitle, courseTags) // Título de ejemplo ['uno', 'dos', 'tres']
Acá puedes leer más al respecto
Una característica muy importante del ==spread operator== es que es inmutable, es decir, ==copia los valores y no la referencia== y devuelve un nuevo array que asignamos a una nueva variable o constante.
// En este ejemplo podemos ver que los arrays: numbersA, numbersB y numbersC no cambiaron y sí pudimos generar una copia de sus valores. const numbersA = [1,2,3]; const numbersB = [4,5,6]; const numbersC = [7,8,9]; const newNumbers = [...numbersA, ...numbersB, ...numbersC]; console.log('numbersA', numbersA); console.log('numbersB', numbersB); console.log('numbersC', numbersC); console.log('newNumbers', newNumbers);
// spread operator arrays const numbers = [1,2,3,4,5]; const doubledNumbers = [...numbers, ...numbers.map(number => number * 2)]; const spreadCloneNumbers = [...numbers]; const cloneNumbers = numbers.slice(); console.log(doubledNumbers); console.log(cloneNumbers); console.log(spreadCloneNumbers); ```*// spread operator arrays* *const numbers = \[1,2,3,4,5]*;*const doubledNumbers = \[...*numbers*, ...numbers.map(*number *=>* number *\* 2)]*;*const spreadCloneNumbers = \[...*numbers*]*;*const cloneNumbers = numbers.slice()*;*console*.*log*(doubledNumbers);*console*.*log*(cloneNumbers);*console*.*log*(spreadCloneNumbers);