A los tres puntos “…” se llama operador de propagación (Spread operator), es una nueva implementación en ES6. Básicamente lo que hace es crear un duplicado de nuestro objeto para luego modificarlo según lo que necesitemos.
Introducción al curso
¡Alto! Tenemos una nueva versión de este curso para ti
Bienvenidos al Curso de Fundamentos de JavaScript
Repositorio de este curso de fundamentos de JS
Primeros pasos en JavaScript
Variables
Variables: Strings
Variables: Números
Funciones
El alcance de las funciones
Objetos
Desestructurar objetos
Parámetros como referencia o como valor
Comparaciones en JavaScript
Estructuras de Control y Funciones
Condicionales
Funciones que retornan valores
Arrow functions
Estructuras repetitivas: for
Estructuras repetitivas: while
Estructuras repetitivas: do-while
Condicional múltiple: switch
Arrays
Introducción a arrays
Filtrar un array
Transformar un array
Reducir un array a un valor
Programación Orientada a Objetos en JavaScript
Cómo funcionan las clases en JavaScript
Modificando un prototipo
El contexto de las funciones: quién es this
La verdad oculta sobre las clases en JavaScript
Clases en JavaScript
Asincronismo
Funciones como parámetros
Cómo funciona el asincronismo en JavaScript
Cómo funciona el tiempo en JavaScript
¿Qué pasó con swapi.co?
Callbacks
Haciendo múltiples requests
Manejando el Orden y el Asincronismo en JavaScript
Manejo de errores con callbacks
Promesas
Promesas Encadenadas
Múltiples promesas en paralelo
Async-await: lo último en asincronismo
Juego de HTML
Comenzando el juego
Generando una secuencia de números
Iluminando la secuencia de colores
Obteniendo el input del usuario
Agregando la verificación del color elegido
Agregando los estados finales del juego
Conclusiones del curso
Complementos
Diferencias entre var, let y const
Memoización: ahorrando cómputo
¿Hace cuántos días naciste?
Funciones recursivas
Entiende los closures de JavaScript
Estructuras de datos inmutables
Cambiando de contexto al llamar a una función
¿Cuándo hace falta poner el punto y coma al final de la línea?
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Javascript se comporta de manera distinta cuando le pasamos un objeto como parámetro.
Cuando los objetos se pasan como una referencia, estos se modifican fuera de la función. Para solucionar esto se puede crear un objeto diferente. Esto lo podemos hacer colocando tres puntos antes del nombre. Ej …persona.
Aportes 379
Preguntas 61
A los tres puntos “…” se llama operador de propagación (Spread operator), es una nueva implementación en ES6. Básicamente lo que hace es crear un duplicado de nuestro objeto para luego modificarlo según lo que necesitemos.

es con un operador de propagacion
ó Spread Operator
----------------------
Este link a youtube me sirvió para comprender mejor este tema
Spread Operator’
----------------------
Esos … puntitos que utilizo para crear un nuevo objeto se llama spread operator, se los digo por que yo no sabia jeje
En Javascript cuando le pasamos un objeto a una función como una referencia(Parámetro). Esto le da permiso de modificar al objeto de forma global.
Para solucionarlo lo que hacemos es: crear un nuevo objeto a partir de la función donde especificamos el cambio del atributo que deseamos modificar.
Les comparto mi resumen de la clase, espero les sea de utilidad para conservar lo aprendido en la clase:
En JavaScript los Objetos se comportan distinto cuando son pasados como parametro a una funcion, pues JS los toma como parametros por referencia. Esto significa que modifica al objeto tal cual como si se tratara de una variable global, afectando su contenido en base a lo que tenga el cuerpo de la funcion.
La otra manera que tenemos de que el Objeto no se vea modificado por la funcion es pasarle al Objeto como parametro como valor, que seria solo pasarle ciertos atributos del Objeto y no todo el Objeto, como en los siguientes ejemplos:
// Objeto
var aaron = {
nombre: "Aaron",
apellido: "Vegu",
edad: 21
};
// Objeto pasado como Referencia
function cumpleanios(persona)
{
persona.edad += 1;
}
cumpleanios(aaron);
// Output
aaron = {nombre: "Aaron", apellido: "Vegu", edad: 22};
// ===================================== //
// Objeto pasado como Valor
function cumpleanios(edad)
{
edad += 1;
}
cumpleanios(aaron.edad);
// Output
aaron = {nombre: "Aaron", apellido: "Vegu", edad: 21};
Otro caso posible que tendriamos seria retornar un nuevo Objeto como resultado de la funcion, que aqui entraria el uso del operador de propagacion (…Objeto):
<h3>Operador de Propagacion</h3>Una de las funcionalidades de este Operador es desglosar el objeto que recibe a su derecha, lo cual nos puede ser util para traer su contenido, que es el uso que le daremos a continuacion para crear un nuevo Objeto en base al pasado por el parametro. Lo cual evita que el Objeto pasado como referencia se vea afectado en sus atributos.
function cumpleanios(persona)
{
return
{
...persona, // Operador de propagacion que nos desglosa al objeto persona
edad: persona.edad += 1; // Editamos el Atributo edad
}
}
// Con esto obtenemos un nuevo objeto con la edad aumentada en 1
personaVieja = function cumpleanios(aaron);
// Output
personaVieja = {nombre: "Aaron", apellido: "Vegu", edad: 22};
// Sin embargo, el objeto aaron sigue conservando sus mismos Atributos
me explotó una neurona en este video.
En caso de que quieran retornar solo la edad y no todos los atributos del objeto puede especificar en persona el que buscan.
function cumpleaños(persona){
return {
...persona['edad'],
edad: persona.edad + 1
};
}
podría servirles como utilidad para mas adelante :3
La notacion de los 3 puntos se llama spread operator y es usado tambien en arrays
Al pasar un objeto como parámetro de una función, javascript pasa la referencia del mismo.
Esto implica que si se realiza alguna operación con uno de los atributos del objeto, como en el ejemplo de abajo, el valor de dicho atributo se estará modificando.
A diferencia de pasar una variable, la cual no sufrirá modificación por fuera del scope de la función ya que lo que se pasa es su valor.
let persona = { edad: 36 }
function modificarEdad(persona) {
persona.edad += 1 //esto modifica el valor del atributo 'edad' del objeto 'persona'
}
console.log(persona.edad) //37
Si no es lo que se busca se puede hacer una copia del objeto.
function personaMasVieja(persona) {
return {
...persona, //spread operator que entrega una copia del objeto
edad: persona.edad + 1 //sobreescribe el atributo 'edad' en el nuevo objeto
}
}
Cuando decimos “parámetros por referencia”, estamos diciendo que le estamos pasando la referencia en memoria de ese objeto, es decir, ese identificador que JavaScript pone en la memoria de nuestro PC, por tanto, al tener la misma referencia en dos variables, al modificar una también se modifica la otra. Esto se explica mucho mejor en el curso de programación funcional por Bedu.
Una alternativa es usar Object.assign() el problema es que, si tu objeto tiene más niveles, el mismo problema se presentará en esos objetos de más niveles, por eso, la forma más segura de copiar un objeto es:
var objetoCopiado = JSON.parse(JSON.stringify(objetoACopiar))
Así nos aseguramos de que sea objetos totalmente distintos ^^
Creo que esta clase no hace honor a su título. No queda bien explicado la diferencia de concepto de pasar un parámetro por valor o pasarlo por referencia. No me queda claro si pasar un objeto por valor es entregarle el objeto a la función y pasarlo por referencia es solamente pasar un atributo del objeto a la función o es otra cosa el concepto.
Los objetos en JS se pasan de manera predeterminada por referencia, aqui hay un gif explica la diferencia entre pasar por referencia y pasar por valor:
qué es el efecto de helado?
esta clase es muy complicada de entender. creo que deben explicarla mejor
</*Los objetos se comportan de manera diferente en funciones
Si se le pasa un objeto como parámetro a una función, está forma una referencia
¿ Qué es una referencia ?
Es un conector a la misma variable, si se modifica el conector, se modifica la variable original.
para solucionar esto se puede crear un objeto diferente.
Esto se hace colocando tres puntos antes del nombre. Ej ...persona.*/
var juan= {
nombre: 'Juan',
apellido: 'Ponce',
edad: 25,
}
/* 1er ejemplo
paso el objeto juan por parámetro, lo que hace es modificarme la edad dentro de la funcion y afuera */
function cumpleanios(persona){
//persona.edad= persona.edad +1;
persona.edad += 1;
}
cumpleanios(juan);
/* 2do ejemplo
paso solo la edad por parámetro, me modifica solamente la edad dentro de la función
(no modifica el atributo del objeto fuera de la función)*/
function cumpleanio(edad){
edad+=1;
}
cumpleanio (juan.edad)
var juancho = function cumpleanio(persona){
return {
...persona,
edad:persona.edad + 1
}
}
/* sacando la variable juancho, se iguala a cumpleanio y se pasa el objeto(juan)
var juanMasViejo=cumpleanio(juan)*/
var juanMasViejo=juancho(juan);
/*Cuando es por valor, la información de la variable se almacenan en una
dirección de memoria diferente al recibirla en la funcion, por lo tanto si el
valor de esa variable cambia no afecta la variable original, solo se modifica dentro del
contexto de la función.
Cuando es por referencia, la variable que se recibe como parámetro en la función apunta
exactamente a la misma dirección de memoria que la variable original por lo que si dentro
de la función se modifica su valor también se modifica la variable original. */>
Mis apuntes de esta clase
// Los objetos en JS, son pasados por a una función por referencia de forma predeterminada.
var persona = {
nombre: 'Alejandro',
apellidos: 'González Reyes',
edad: 34,
ciudad: 'Santiago Tianguistenco',
codigoPostal: '52710'
}
function incrementarEdadPersona(persona) {
// persona es un objeto pasado a esta funcion. Los objetos en JS son pasados por referencia
persona.edad += 1
console.log(persona)
}
console.log('Tu edad original es', persona.edad)
// El pasar un objeto como parámetro a una funcion en JS por defecto se hace por referencia. Es decir, el objeto como tal es modificado internamente en el cuerpo de la función.
incrementarEdadPersona(persona)
incrementarEdadPersona(persona)
// Si queremos pasar un objeto como parametro por valor, es necesario no modificar internamente ese objeto, solo hacer uso de su data interna, y retornar un nuevo objeto con los nuevos datos
function incrementarEdadPorValor(persona) {
// Retorno un nuevo objeto
return {
// Spread Operator: permite propagar la información del objeto hacia un nuevo destino (se crea una copia). Es decir, todas sus propiedades y valores ahora forman parte de este nuevo objeto
... persona,
// Pisamos la propiedad edad de este nuevo objeto y la modificamos
edad: persona.edad + 1
}
}
// Estos objetos son pasados por valor, ya que la función no altera su contenido, solo hace una lectura para generar un nuevo objeto a partir de dicho contenido, con algunos cambios en dicha copia
console.warn( incrementarEdadPorValor(persona) )
console.warn( incrementarEdadPorValor(persona) )
console.warn( incrementarEdadPorValor(persona) )
console.log( persona )
No lo tengo claro: que funcion cumple el ‘return’ y los ‘…persona’ ?
Este NO es un comportamiento único de los objetos, de igual manera los arrays se comportan así ya que los arrays y objetos son tipos de datos compuestos; en el momento de pasar un array u objeto como argumento de una función lo que se está pasando es la referencia en sí y no el valor. Esto funciona de manera distinta en los datos de tipo primitivo. Cuando pasamos un dato primitivo ya sea un string, boolean, undefined etc… El valor pasado es una copia de ese valor, por eso en el momento de modificar ese valor dentro de la función, no afecta al valor original.
Ejemplo de como funciona la asignación por valor…
let a = 5;
let b = a; //Aquí igualo mi variable “b” al VALOR que tiene mi variable “a”
//Ahora si cambio el valor de b
b = 10 //Como es un dato primitivo el valor de “a” quedará intacto, “a” seguirá valiendo 5 mientra que “b” ahora vale 10
Ejemplo de como funciona la asignación por referencia…
let n1= [1,2,3]
let n2 = n1
//n2 no contiene el valor de n1, n2 contiene la referencia de n1, esto quiere
//decir que si yo modifico el array que contiene n2 también estaría modificando a n1 Ej:
n2[1] = 500;//Por consola n2 sería igual a esto [1,500,3] y n1 de la misma manera se vería afectado
Hola comunidad.
.
El profe Sacha hace una pequeña observación sobre el paso por referencia que se utiliza al pasar un objeto a una función.
.
Este es un concepto muy (MUY) importante en programación que todos deberíamos conocer. Quería escribir aquí mi aporte pero haciendo una búsqueda encontré este thread donde algunos usuarios de SO lo explican demasiado bien.
.
Me gustó sobre todo un comentario donde dejan un GIF que lo explica visualmente:
.
.
No sé si los mensajes de Platzi soportan imágenes animadas, de todas maneras en el enlace se encuentra detallado.
.
Espero les sirva.
.
¡Saludos!
Asi quedo mas claro…
JS se comporta diferente con los objetos , los objetos que pasamos por parámetro a una función, ** se pasan por referencia** , esto quiere decir que si modificamos al objeto dentro del cuerpo de la función su valor se verá modificado fuera de ésta, produciéndose un Side Effect .
Return en Javascript se usa en dos casos:
Cuando literalmente queremos devolver el valor de la función.
Cuando queremos que la función deje de ejecutarse.
Me di cuenta que al darle += 1 me modificaba el objeto principal
function cumpleanios(persona){
return{
...persona,
edad: persona.edad += 1
}
}
El efecto de lado es cuando un objeto es modificado directamente al pasar por una función. Por ejemplo:
Un objeto llamado pepe pasa por una función llamada cambiarNombre y este lo modifica directamente, cambiando su nombre de Pepe a José. Este es un ejemplo del efecto de lado al que se refiere el prof. Sacha
var pepe = {
nombre: 'Pepe',
edad: 30
}
function cambiarNombre(persona){
persona.nombre = 'José';
}
cambiarNombre(pepe);
Buena explicacion aunque un poco confusa
Existen dos tipos de parámetros: referencia y valor.
Referencia
Son los objetos que se pasan en el parámetro de una función, pero, cuyos valores son modificados directamente. Se asemeja al comportamiento de una variable global.
De valor
Son los objetos que se pasan en el parámetro de una función pero que, en lugar de ser modificados directamente, se crea una copia del mismo y entonces se modifica.
Aqui el maestro Sacha nos explica mas a detalle valores vs referencias https://www.youtube.com/watch?v=AvkyOrWkuQc
Si quisiéramos trabajar con todo el objecto podríamos hacer esto:
function cumpleaños2(persona) {
var p1 = {
...persona
}
p1.edad +=1
return p1
}
https://dev.to/sagar/three-dots---in-javascript-26ci
Encontré esto para complementar la información sobre el uso de los 3 puntos en Javascript.
Algo que vi por error, si en la funcion en ve de dejar +1 colocamos +=1 el objeto se modifica de ahi en adelante, a diferencia de lo mostrado, al llamarlo va a tener el valor nuevo:
var diana = {
name: 'Diana',
lastName: 'Pena',
age: 27
}
function birthday(person) {
return {
// t clone the object and only change the age parameter
...person,
age: person.age += 1
}
}```
Si ejecutas birthday(diana) muestra
{name: “Diana”, lastName: “Pena”, age: 28}
y si ejecutas solo diana, tambien muestra
{name: “Diana”, lastName: “Pena”, age: 28}```
Resumen de la clase
// RESUMEN DE LA CLASE : 'PARAMETROS COMO REFERENCIA O COMO VALOR'
// - Tomamos como inicio al codigo hecho en la clase anterior
var fernando = {
nombre:'Fernando',
apellido:'Huaman',
edad:18
}
var miguel = {
nombre: 'Miguel',
apellido: 'Garcia',
edad: 19
}
// - La clase de hoy trata de cual seria la consecuencia si declaramos , en
// una funcion, un "parametro como referencia", es decir, se declara como
// parametro a un objeto. Y un " parametro como valor ", es decir , se
// declara como parametro a un atributo que le pertenece a un objeto.
//
//
// - Tenemos a dos objetos cuyos nombres son 'fernando' y 'Miguel'
//
// ----> PARAMETRO COMO REFERENCIA
function parametroComoReferencia(persona){
persona.edad = persona.edad + 1 // o tambien persona.edad += 1
console.log(persona.edad)
}
// - En este caso ,el parametro 'persona' va a recibir el nombre de un
// objeto
// - Dentro de la funcion el atributo 'edad' que le pertenece a cierto
// objeto sera alterado tando dentro de la funcion como fuera de la
// funcion , es decir , tambien alterara al objeto.
//
// ----> PARAMETRO COMO VALOR
function parametroComoValor(edad){
edad = edad + 1 // o tambien persona.edad += 1
console.log(edad)
}
// - En este caso, el parametro 'edad' va a recibir el valor del
// atributo de un objeto por lo que a pesar de que se altere el
// valor , no se alterara el objeto.
//
//
// ----> CASO ESPECIAL
// - Pero si queremos crear un nuevo objeto y que tenga los mismos
// atributos que el original pero alterando ciertos valores, lo que
// se hace es retornar ('return') dentro de la funcion el
// desglosamiento del objeto
// EJEMPLO:
// return {
// ...persona, ------> Se desglosa el objeto 'persona'
// edad: persona.edad + 1 ---->estamos alterando el
// valor del atributo 'edad'.
// }
// OJO: Tambien a la hora de crear un nuevo objeto , tambien se le
// puede añadir nuevos atributos. Ejemplo:
// return {
// ...persona,
// edad: persona.edad + 1,
// sexo: 'Masculino' ----> Agregamos el atributo 'sexo'
//
// }
function cumpleanos(persona){
return {
...persona,
edad: persona.edad + 1,
sexo:'Masculino'
}
}
var fernadoViejo = cumpleanos(fernando) // Los almaceno en
var miguelViejo = cumpleanos(miguel) // una variable
Como cuando quieres investigar un poco mas en youtube, y te encuentras con un video explicando el tema… y al final me di cuenta que era el mismo profesor. LMAO!.
eso de los 3 puntos para copiar un objeto en otro puso mi mente a volar! no tenía idea de estoo XD
Bastante interesante, me confundí un poco por que estaba tratando de relacionarlo con el paso por referencia en C++
bien es confuso utilizar los parametros pero son bastante utiles
Interesante este punto, yo lo comparo con C#. por ejemplo y se comporta totalmente distinto cuando pasamos un argumento a un método. Independientemente si es un objeto o una propiedad del mismo, hay que declarar ** explicitamente** que dicho argumento se pasa como referencia.
Esto es lo que me encanta de la programación, que aunque son los mismos conceptos, el fin por el que fueron creados ambos lenguajes son totalmente distintos.
Los objetos que pasamos como parámetro de función, se comportan como referencia.
A lo que me dio a entender es que si no pasamos el objeto dentro de la funcion, si lo modificamos, solo se modifica dentro de la funcion, pero de forma global no le pasa nada, en cambio si si pasamos la referencia, al final si se hacen cambios tanto en la funcion como de forma global.
Como se le llaman a los tres puntos que utilizo para copiar lo que tenia el objeto anterior
Me está gustando el curso! Sin embargo, javascript se me hace más complejo que los lenguajes de programación que ya conocía anteriormente
Porque si se deja =+ en lugar de solo +, el objeto SI se modifica?
function cumpleanos (persona) {
return {
...persona,
edad: persona.edad =+ 1
}
}```
quede algo perdido en pasar objetos como parametros, a estudiar mas 😃
Boom!! me ha gustado mucho.
Viajar al futuro y modificar la realdiad nunca fue tan facil y divertido
Un ejemplo para entender esto podría ser cuando guardamos un archivo: podemos usar ‘Guardar’, que guarda los cambios en nuestro archivo y los mantiene en el mismo archivo; o ‘Guardar Como’, que guarda los cambios pero creando un archivo distinto, independiente ya del anterior.
viniendo de java, o viniendo de donde sea, estoy encantadisimo con java script, no se que ostias estuve haciendo todo este puto tiempo, perdiendoló…
En la clase de hoy vimos los “…”. Este amiguito tiene varias funcionalidades y la que vimos hoy fue la del “spread operator”, el cuál nos permite clonar un objeto (también sirve para arreglos).
var featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
var specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];
var pizzas = [...featured, 'veg pizza', ...specialty];
// 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13
**PARAMETROS **
JS se comporta de manera distinta con objetos como parámetro de una función y con **claves de objeto **
Objeto como parámetro : en este caso el objeto será modificado de manera global.
Clave de Objeto como parametro : aquí el objeto y sus claves sólo se modifican dentro de la función y lo que esta dure.
Retornar un nuevo objeto : en este caso el objeto que se pasa como parametro servirá como referencia para crear uno nuevo que sólo durará lo que dure la función, más sin embargo es posible crear una variable que aloje este nuevo objeto
Espero les haya quedado un poco más claro 😄
//De esta manera se afecta directamnete al obj
function cumpleanos(persona){
persona.edad+=1;
}
//De esta manera no se afecta al obj
function cumpleanos (persona){
//Devuelve un mismo obj con una persona más vieja
return{
...persona,
edad: persona.edad+1
}
}
Excelente clase.
No sabía que el “…” servía para desglosar un objeto
¿Por qué no funciona aumentando la edad con el operador ++? Alguien me puede explicar
var Alx = {
nombre: 'Alx',
apellido: 'Z',
edad: 37
}
function nuevoObjeto(persona) {
return {
...persona,
edad: persona.edad++
}
console.log(persona);
}
Gracias
Les dejo este articulo de Valor vs Referencia
https://medium.com/laboratoria-developers/por-valor-vs-por-referencia-en-javascript-de3daf53a8b9
// CLASE 8
// Parametros como referencia o como valor
//// Esta funcion devuelve el objeto person nuevo y su cambia es de manera en un block scoupe si quiero mantenerlo debo almacenarlo en una nueva variable.
function birthday(person) {
return {
...person,
age: person.age + 1
}
}
// Esta funcion devuelve el objeto person nuevo y su cambia es de manera en un global scoupe.
function birthday(person) {
return {
...person,
age: person.age += 1
}
}```
¡Excelente Profesor! 😄
Este es un buen profesor…
Que buen curso, hasta ahora me parece que Sacha es el mejor profesor.
( ̄y▽, ̄)╭ algo curioso que te puede servir para entender la referencia vs valor es que cuando insertas un valor de objeto y este pasa como referencia, la función en si actúa como un apuntador que esta mirando hacia el objeto, mientras que cuando se asigna un valor simple la función va a aislar su contenido…
referencia = global 🪐
valor = local 🏠
Resumen:
var sasha = {
edad: 28,
};
var dario = {
edad: 35,
};
// AQUI MODIFICAMOS EL MISMO OBJETO
function cumpleanos(persona) {
persona.edad += 1;
}
// cumpleanos(sasha);
// cumpleanos(dario);
// ---------------------------------------
// AQUI CREAMOS UN DUPLICADO DEL OBJETO Y LO MODIFICAMOS A NUESTRO GUSTO
// NO TOCAMOS EL OBJETO ORIGINAL
function cumpleanos(persona) {
// '...' Crea un duplicado de nuestro objeto para luego modificarlo según lo que necesitemos.
return {
...persona,
edad: persona.edad + 1,
};
}
// Guardamos el duplicado del objeto en una nueva variable
// var SashaUnAnoMasVieja = cumpleanos(sasha);
// var DarioUnAnoMasViejo = cumpleanos(dario);
// ---------------------------------------
// El value no se modifica porque no se hace referencia en la funcion
function cumpleanos(edad) {
edad += 1;
}
// cumpleanos(sasha.edad);
// cumpleanos(dario.edad);
en a funcion cumpleaños(persona){}
se le colocan tres pintos porque esea es la cantidad de claves que tiene el objeto o siempre es asi, con los tres puntos?
Mi resumen!
var gustavo = {
nombre: "Gustavo",
apellido: "Tiseira",
edad: 30
};
/* Funcion que si le paso al objeto
me modifica la edad aunmentandola a 1 */
function cumpleanos(persona) {
persona.edad += 1;
}
/* JS se comporta distinto con los objetos.
Los objetos que pasamos por parametos, se pasan por
refencia (si lo modificamos en el cuerpo de una funcion,
se va ver modificado fuera de la funcion) */
/* Otra alternativa es crear una funcion
que me retorne un nuevo objeto */
function cumpleanosNuevoObejo(persona) {
return {
...persona /* Esta linea me desglosa los atributo del objeto */,
edad: persona.edad + 1
};
}
/* Este nuevo objeto lo guardo en una Var */
var gustavoMasVIejo = cumpleanosNuevoObejo(gustavo);
JavaScript se comporta distinto con los objetos, los objetos que pasamos por parámetros, se pasan por una referencia.
Saludos compañeros 💚 si querían profundizar un poquito más sobre este tema, deberían leer Este articulo 😁 a seguir aprendiendo!
explicacion de los 3 puntos
la función regresa una copia del objeto, puede ser tal cual es el primer objeto o se pueden modificar sus atributos
Les anexo unos sitios web donde explican que son los parametros por referencia y valor.
https://codingornot.com/cuando-se-utiliza-paso-por-referencia-y-cuando-paso-por-valor
https://es.stackoverflow.com/questions/1493/cuál-es-la-diferencia-entre-paso-de-variables-por-valor-y-por-referencia
Muy buena clase.
/*
En el navegador el objeto global donde esta mi variable es en
window.miVariable
Existen parametros como valor y parametros como referencia
*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");
var daniel = {
nombre: "Daniel",
apellido: "Páez",
edad: 18
}
function cumpleanos (persona) {
return {
//aqui estamos desglosando el objeto persona
...persona,
edad: persona.edad + 1
//aqui hacemos que el objeto no se modifique
//si lo quitamos los efectos de la funcion se mantendran
}
persona.edad = persona.edad + 1;
console.log(`Cumplirás ${persona.edad} años el próximo año`)
}
//cumpleanos(daniel);
function cumpleanosBeta (edad) {
edad = edad + 1;
console.log(`Cumplirás ${edad} años el próximo año`)
}
cumpleanosBeta(daniel.edad);
/*
Su esperanza es que insistiendo yo cambie mi conducta
pero no, si estoy haciendo algo concreto no existo
algo concreto importante para mi
javascript se comporta distinto con los objetos
javascript acumula valores dentro y fuera del alcance de una funcion
*/
Parámetros como Referencia o Valor
var sacha = {
nombre: 'Sacha',
apellido: 'Lifszyc',
edad: 28
}
function cumpleanos(persona) {
persona.edad += 1
} // esta función modifica el objeto
// la siguiente función copia el objeto (en la línea ...persona) y genera uno nuevo
function cumpleanosOtro(persona) {
return {
...persona,
edad: persona.edad + 1
}
}
// se invoca así:
cumpleanosOtro(sacha) // resultado: { nombre: 'Sacha', apellido: 'Lifszyc', edad: 29 }
Este es el código que escribí, pero si lo ejecuto en consola no me incrementa en 1 la edad sino me agregar un uno al final, ¿Podrían apoyarme explicándome el porque?
var edwin = {
nombre: ‘Edwin’,
apellido: ‘Garcia’,
edad: ‘28’
}
var dario = {
nombre: ‘Dario’,
apellido: ‘Hernandez’,
edad: ‘23’
}
function cumple(personas){
personas.edad+=1
}
Estos son los resultados:
dario
{nombre: “Dario”, apellido: “Hernandez”, edad: “23”}
cumple(dario)
undefined
dario
{nombre: “Dario”, apellido: “Hernandez”, edad: “231”}
Solo me incrementa si mi función cumple la escribo de la siguiente manera:
function cumple(personas){
personas.edad++
}
En la function cumpleano me estaba dando error y era por lo siguiente
habia escrito el return de la siguiente forma
return
{
//codigo
}
y no me funcionaba el codigo, resulta que en el return no le puedes colocar el { en la parte de abajo si no al lado, si lo colocas abajo no te funciona el codigo.
forma correcta de usar { en el return es
return{
//codigo
}
Salidos.
function imprimirEdad(persona){
console.log(`yo soy ${persona.nombre} y tengo ${persona.edad} años `)
}```
este es una manera mas secilla
Años en el Futuro
var sujeto =
{
nombre: "Anacleata",
nacimiento: 2005,
años: 14
}
function futuro(persona,año)
{
return{
...persona,
años: año - persona.nacimiento
}
}
var raul = {
nombre: 'Raul',
apellido: 'Borda',
edad: 42
}
var dario = {
nombre: 'Dario',
apellido: 'Lalala',
edad: 40
}
function imprimirNombreYEdad(persona){
var { nombre } = persona
var { edad } = persona
console.log(`Hola, me llamo ${nombre} y tengo ${edad} años`)
}
imprimirNombreYEdad(raul)
imprimirNombreYEdad(dario)
nice! En este no tengo nada que aportar el profe lo dejo muy claro saludos!!!
estoy muy emocionada
const cumple = persona => `${persona.nombre} tiene ${persona.edad += 1} años`
c(cumple(david)) // La edad va a aumentar porque se le está pasando por referencia dentro de la función cumple
c(cumple(david))
c(cumple(david))
const cumpleanos = (nombre, edad) => `${nombre} tiene ${edad += 1} años`
c(cumpleanos(valentina.nombre, valentina.edad)) // la edad va a aumentar solo una vez porque se le está pasando por valor
c(cumpleanos(valentina.nombre, valentina.edad))
c(cumpleanos(valentina.nombre, valentina.edad))
Como dijo @ErnestoJoseGrabriel, si es cierto que el objeto sí se modifica de ahí en adelante. Se evidencia cuando se vuelve a llamr/se imprime de nuevo. Aquí algunos apuntes:
Cuando los objetos se pasan como una referencia, estos se modifican fuera de la función. Para solucionar esto se puede crear un objeto diferente. Esto lo podemos hacer colocando tres puntos antes del nombre. Ej …persona.
/**
let arrayOriginal = [1,2,3];
let arrayReferencia = arrayOriginal;
arrayReferencia.pop();
console.log(arrayOriginal); // imprime [1,2]
// Para enviar esto se debe crear una copia del array o crear una nuevo
voy a complementar esto con un enlace, si no lo practico se me olvida,
muy buena clase
Excelente clase, aprendí que podemos, a partir del objeto de referencia que entra en la función, devolver un objeto nuevo sin afectar los datos de la referencia. Dejo un pedacito de código que realice:
function cumpleaños(persona){
return{ //devuelve un nuevo objeto persona
...persona, //trae los datos de la #ref
edad: persona.edad + 1, //modificamos un atributo
telefono: 3624227229 //agregamos un atributo
}
}
Les comparto este código. Aquí podemos anexar un segundo nombre o apellido y cambiar la edad
//Datos iniciales
var alberto = {
nombre: 'Alberto',
apellido: 'Morales',
edad: 38
}
//Aqui podemos agregar un segundo nombre o segundo apellido
var newName = prompt('Corrige tu nombre')
var newLastName = prompt('Corrige tu apellido')
var newAge = prompt('Corrige tu Edad')
//creamos un nuevo objeto
function newData(persona){
return{
...persona,
nombre: persona.nombre + ' ' + newName,
apellido: persona.apellido + ' ' + newLastName,
edad: newAge
}
}
//Guardamos todo en nueva variable
var albNewData = newData(alberto)
//Imprimimos cambio
console.log(`Tu nuevo nombre es: ${albNewData.nombre} ${albNewData.apellido} y tu edad es: ${albNewData.edad}`)
//Imprimimos datos iniciales
console.log(alberto)```
function cumpleanos(persona) {
return {
...persona,
edad: persona.edad + 1
}
}
Oh muy buen dato para crear objetos desde objetos!
var elon = {
nombre: 'Elon',
apellido: 'Musk',
fechaNacimiento: new Date('1971/06/28')
};
var nicole = {
nombre: 'Alison',
apellido: 'Rojas',
fechaNacimiento: new Date('2013/09/16')
};
function imprimirNombreMayusculas({ nombre }) {
console.log(nombre.toUpperCase());
}
function imprimirElon() {
imprimirNombreMayusculas(diego);
}
function addYear({ fechaNacimiento }) {
return new Date(fechaNacimiento.getFullYear() - 1, fechaNacimiento.getMonth(), fechaNacimiento.getDate())
}
function birthday(persona) {
return {
...persona,
fechaNacimiento: addYear(persona)
}
}```
Retorna la fecha de nacimiento con el año disminuido en 1.
var brayhan = {
name: "Brayhan",
firstname: "Jaramillo",
age: 25
}
function birthDay(person) {
return {
...person,
age: person.age + 1
}
console.log(person.age)
}
birthDay(brayhan)
var andres =
{
nombre : "Andres",
apellido : "Ramirez",
edad : 32,
}
var david =
{
nombre : "David",
apellido : "Ramirez",
edad : 27,
}
function cumpleanos(persona)
{
let nuevoObjeto =
{
...persona,
edad: persona.edad + 1
}
console.log(nuevoObjeto)
}
cumpleanos(andres)
// De esta manera la funcion modifica los objetos al pasarlos por paramentros creando un objeto nuevo sin alterar el original
RESUMEN:
En esta clase vimos lo que sucede al pasar un objeto como parámetro de una función. JS se comporta diferente con los objetos. Los objetos pasados por parámetro se pasan por referencia, si los modificamos dentro del cuerpo de una función, su valor se verá modificado fuera de la función.
En el siguiente código comentariado pongo el resumen de esta clase en un contexto difetente.
var carbono ={
//Key______________//Value
nombre_elemento: "Carbono",
numero_atomico:12,
configuracion_electronica: '4p-6',
categoria: "Sólido",
usos:"la vida misma como la conocemos."
}
console.log(carbono.numero_atomico)// El numero de protones será 12
añadirProtones(carbono) // Invoco la función para el elemento deseado
console.log(carbono.numero_atomico)// El nuevo número de protones será 13
function añadirProtones (elemento) {
elemento.numero_atomico+=1;
console.log(elemento.numero_atomico) // Me sumará el protón y lo conservará
}
function añadirProtonesYConservar (elemento) {
//Podemos retornar un objeto nuevo+el cambio que hacemos del objeto d ela siguiente manera:
return{
...elemento,//desglozamos el elemento
numero_atomico:elemento.numero_atomico+=1,
}
}
var elementoProtonesExtra = añadirProtonesYConservar(carbono) // Este me guardará los atributos modificados en una variable
console.log(elementoProtonesExtra) //Me mostrará el conjunto de atributos. Del elemento modificado con más protones
el … operador de propagación 🤯🤯🤯 …
Excelente!!
Interesante todo esto, excelente explicación
function cumpleannios(persona){
return {
…persona,
edad: persona.edad + 1
}
};
esto es como hacer un push en un array verdad?
<var personita = {
nombre: 'cristina',
apellido: 'berrio' ,
edad:27
}
var hombre ={
nombre: 'federico',
apellido:'gonzalez',
edad: 35
}
function imprimirnombreenmayusculas(persona){
//var nombre = persona.nombre y desestruturado se escribe asi
var { nombre } = persona
console.log(nombre.toUpperCase())
}
imprimirnombreenmayusculas(personita)
imprimirnombreenmayusculas(hombre)
//cuando ponemos como parametro edad el valor de personita y hombre no se va ver afectado
/*function cumpleanos(edad){
edad += 1*/
//}
//cuando ponemos en el pparametro persona y persona.edad se va a ver y se va incrementar el valor de personita se va sumar la edad
/*function cumpleaños(persona){
persona.edad += 1
}*/
//entonces que podemos hacer con esto 1 opcion o dejarlo asi que el objecto que le pasamos sea modificado 0 tambien podemos devolver un nuevo objecto y que tenga todo lo mismo de esa persona excepto la edad hacemos un return ejemplo con este return nos devuelve una persona mas vieja se va sumar la edad
//la edad se suma una vez no varias veces como el otro ejemplo
function cumpleanos(persona){
return {
...persona,
edad: persona.edad + 1
}
}>
Mis apuntes:
Los objetos que pasamos a una función como parámetros se pasan por referencia, lo que quiere decir que sus atributos se ven afectados fuera de la función para solucionarlo se crea nuevo objeto dentro de la función que solo vive en ella y afecta el objeto (digamos global)
//Parámetros como referencia o como valor
var Natanael = {
nombre: 'Natanael',
apellido: 'León',
edad: 30
}
var Liam = {
nombre: 'Liam',
apellido: 'León',
edad: 3
}
function imprimirNombreYEdad(NE){
var { nombre } = NE
var { edad } = NE
console.log(`Hola me llamo: ${nombre} y tengo ${edad} años`)
}
imprimirNombreYEdad(Liam)
imprimirNombreYEdad(Natanael)
function cumpleanios(persona){
/*podemos devolver un nuevo objeto, el cual se puede ver modificado añadiendo mas atributos, y para copiar lo que tiene el objeto anterior usamos "...", creamos el objeto nuevo que solo vive en esta funcion y no altera el objeto global, devuelve un nuevo objeto
*/
return{
...persona,
edad: persona.edad + 1
}
}
var NatanaelMasViejo = cumpleanios(Natanael)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?