Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿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

Parámetros como referencia o como valor

11/55
Recursos

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

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

![](

Saludos por acá dejo esta info. para que esclarezcamos dudas:

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.

Fuente: https://es.stackoverflow.com/questions/1493/cuál-es-la-diferencia-entre-paso-de-variables-por-valor-y-por-referencia

Espero les sirva de ayuda. Bendiciones 😉

NOTA:
la forma de crear una copia de un OBJETO
(y no afecte por referencia al original)
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

También si quiere copiar un objeto por completo a otra variable, pueden usar el método assign() de la clase Object

Ej:

var personaA = {nombre: 'Pepito', apellido: 'TV'};
var personaB = Object.assign({}, personaA);

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!.

https://www.youtube.com/watch?v=AvkyOrWkuQc

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.

Un poco de informacion acerca del operador de propagacion (los tres puntos)

Enlace


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

// 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!

la función regresa una copia del objeto, puede ser tal cual es el primer objeto o se pueden modificar sus atributos

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.

/**

  • 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
    */

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)