Contenido del curso
Nombre y uso de las variables
Ámbito de las variables
Funciones
Clases
Optimizaciones
Cierre
Parámetros y argumentos
Cayo Legal
Estudiante
Ariel Ezequiel Biazzo Genua
Estudiante
Brandon Lee Aguero Fernandez
EstudianteContenido del curso
Parámetros y argumentos
Cayo Legal
EstudianteAriel Ezequiel Biazzo Genua
EstudianteBrandon Lee Aguero Fernandez
Estudiante
Carina Payleman
Estudiante
José Antonio Medina Sánchez
EstudianteJosé Antonio Medina Sánchez
Estudiante
Santiago Andres Alvarez Cuadros
Estudiante
Markin Piero Pulache Guarniz
Estudiante
Elcira Ibarra
Estudiante
Arturo Malgor
Estudiante
Luis Palomo
Estudiante
Francisco Ponce
Estudiante
anderson buitron
Estudiante
N40 M10
EstudianteMarkin Piero Pulache Guarniz
Estudiante
Felipe Toro C
Estudiante
Mauricio J Carrillo
Estudiante
Sebastián Bonilla
Estudiante
Ana Rotela Cabrera
EstudianteAna Rotela Cabrera
Estudiante
Luis Eduardo Payano Villar
EstudianteLuis Eduardo Payano Villar
Estudiante
Melisa Barrera
Estudiante
BinaryTreeCode
Estudiante
José manuel Sanchez Juarez
Estudiante
Ulqernesh Karvenae
Estudiante
Xavier Flores
Estudiante
John Andrey Serrano
Estudiante
Alejandro Brand
Estudiante
Camilo Taborda
EstudianteHoy 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);