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
Ariel Ezequiel Biazzo Genua
Brandon Lee Aguero Fernandez
Carina Payleman
José Antonio Medina Sánchez
José Antonio Medina Sánchez
Santiago Andres Alvarez Cuadros
Markin Piero Pulache Guarniz
Elcira Ibarra
Arturo Malgor
Luis Palomo
Francisco Ponce
anderson buitron
N40 M10
Markin Piero Pulache Guarniz
Felipe Toro C
Mauricio J Carrillo
Sebastián Bonilla
Ana Rotela Cabrera
Ana Rotela Cabrera
Luis Eduardo Payano Villar
Luis Eduardo Payano Villar
Melisa Barrera
BinaryTreeCode
José manuel Sanchez Juarez
Ulqernesh Karvenae
Xavier Flores
John Andrey Serrano
Alejandro Brand
Camilo Taborda
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
O... tambien podemos hacer un algoritmo de deepFreeze :)
O... también podemos utilizar una fábrica de objetos
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);
Buen resumen compañera, saludos!!!
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:
(
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
buen aporte
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);
La verdad, da gusto leer tus aportes, muy bien explicado todo. Sigue Así!!!
Super importante esto! gracias!
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.
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.
Por favor que el equipo de este curso haga un remake del curso profesional de JS... Son realmente buenos.
si
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'
Si, estás en lo correcto. Las funciones se declaran o expresan con parámetros y se llaman con argumentos.
manejas algun tema para vscode?
Spread operator o Parámetro Rest
Resumen de la clase
// 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);
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));
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.
Hello undefined
en React esta clase es altamente usada para trabajar con estados y eventos.
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)
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
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);