Ahora vamos a crear un ejemplo similar
a lo que teníamos en el último video,
solo para que podamos ver que esto suceda en la práctica.
Y al igual que en un último video,
Empecemos mutando un valor primitivo.
Entonces, ahora usemos el apellido
y voy a ponerlo aquí a Williams.
Y ese es el valor inicial de este apellido.
Entonces, copiémoslo también,
y eso es porque digamos
que esta persona se casa
y decide cambiar su apellido.
Sin embargo, todavía queremos recordar el antiguo nombre.
Entonces, decimos oldLastName
es igual al apellido actual,
en esta posición del código.
Pero luego mutamos en realidad el apellido a Davis.
Básicamente, cuando esta persona se casa,
luego cambian su apellido a Davis.
Y, por supuesto, si ahora echamos un vistazo a ambos.
Entonces, primero el apellido y luego el antiguo apellido,
entonces vemos que en realidad son diferentes.
Entonces, Davis es el nuevo apellido.
Entonces, el que mutamos aquí,
y Williams es este antiguo apellido
que se copió aquí mismo en esta primera línea de código,
o en realidad la segunda línea de código.
Entonces, aquí, todo funciona.
como cabría esperar de forma intuitiva.
Ahora, recuerda, que funciona de esta manera.
porque cada valor primitivo simplemente se guardará
en su propia pieza de memoria en la pila, ¿de acuerdo?
Pero ahora, hagamos lo mismo con un objeto,
que como ya sabemos es un valor de referencia
porque se va a almacenar en el montón,
y la pila solo mantiene una referencia
a la posición de memoria
en el que el objeto se almacena en el montón.
Entonces, creemos un objeto llamado Jessica.
Y así, aquí tendremos un primer nombre,
de Jéssica,
y un apellido
de Williams.
Démosle también una edad de 27
solo para hacerlo más completo.
Y ahora, digamos de nuevo que Jessica se casará.
y por lo tanto cambiará su apellido.
Y esta vez, vamos a crear un nuevo objeto.
para la casada Jessica.
Entonces, casado con Jessica,
y debe ser igual
a Jessica.
Entonces, estamos copiando todo el objeto aquí.
Al menos eso es lo que parece, pero detrás de escena.
en realidad solo estamos copiando la referencia,
que luego apuntará al mismo objeto, ¿recuerdas eso?
Y ahora, mientras cambiamos el apellido en casadaJessica,
Entonces, el apellido, cambiémoslo a Davis,
pero como ya sabemos,
esto no nos dará el resultado que esperamos.
Entonces, antes del matrimonio,
registremos este objeto Jessica original, por así decirlo.
Y luego, después del matrimonio,
y luego aquí, el objeto de Jessica casada.
Dándole un guardado.
Y ahora como vemos,
tenemos antes del matrimonio y después del matrimonio,
tanto el apellido de Davis, ¿de acuerdo?
Entonces, el apellido Davis ahora también es
en el objeto Jessica original
y no solo en el que copiamos.
Y ahora en este punto, ya sabemos por qué sucedió esto.
Entonces, solo para recordar eso, sucedió porque
cuando intentamos copiar el objeto Jessica original,
de hecho, no creó un nuevo objeto en el montón.
Entonces, este de nuevo, no es un objeto nuevo en el montón.
Es simplemente otra variable en la pila,
que contiene la referencia al objeto original.
Entonces, estas dos variables simplemente apuntan
exactamente a la misma dirección de memoria en el montón.
Y eso es porque en la pila,
ambos tienen la misma referencia de dirección de memoria.
Y por supuesto, tiene sentido
que si cambiamos una propiedad en casadaJessica,
también cambiará en la propia Jessica.
Entonces, nuevamente, debido a que son esencialmente
sólo dos nombres diferentes para la misma cosa.
Ahora, esta es también la razón por la que podemos cambiar las propiedades
en el objeto Jessica casada,
que fue declarado usando un const aquí.
Y se supone que const es para constantes.
Entonces, para cosas que no podemos cambiar.
Sin embargo, lo que realmente necesita ser constante
es el valor en la pila.
Y en esta baraja, el valor solo tiene la referencia,
que en realidad no estamos cambiando.
Lo único que estamos cambiando es el objeto subyacente.
que se almacena en el montón.
Y eso está bien para cambiar,
eso no tiene nada que ver con const o let, ¿de acuerdo?
Eso es solo sobre el valor en la pila,
pero si cambiamos algo en el montón
eso no tiene nada que ver con const o let.
Ahora, lo que no podemos hacer
es asignar un objeto completamente diferente ahora
casarse con Jessica.
Entonces, por ejemplo, no podríamos decir casadoJessica
es igual a este nuevo objeto vacío, por lo que no funcionará.
Porque este nuevo objeto
se almacenará en una posición diferente en la memoria,
y por lo tanto la referencia a esa posición en la memoria
tendrá que cambiar aquí en esta variable.
Y por lo tanto, eso no funciona.
Porque eso está en la pila y, dado que es una constante,
no podemos cambiar ese valor en la pila.
Entonces, no podemos cambiar el valor a una nueva dirección de memoria,
y por lo tanto, esto no funciona.
Si fuera un alquiler aquí,
entonces podríamos hacer esto, lo que tenemos aquí.
Pero como es una constante, de nuevo, no está permitido.
Entonces, como conclusión, cambiando completamente el objeto,
entonces, asignándole un nuevo objeto
es completamente diferente a simplemente cambiar una propiedad
como hicimos aquí.
¿Bueno?
Entonces, es una diferencia fundamental.
Por lo tanto, asegúrese de entender realmente esto.
De todos modos, ¿qué pasaría si realmente quisiéramos copiar el objeto
para que luego podamos cambiar uno de ellos
sin cambiar el otro?
Entonces, déjame mostrarte una manera en la que podemos hacer eso.
Primero agreguemos algunos comentarios aquí una vez más.
Entonces, tipos primitivos,
tipos de referencia,
y luego,
digamos ahora,
proceso de copiar
objetos.
Está bien.
Y de hecho vamos a crear un nuevo objeto Jessica,
déjame, de hecho, copiarlo desde aquí.
Entonces, digamos, Jessica2.
Y ahora, si realmente quisiéramos copiar este objeto,
podríamos usar una función llamada object.assign.
Y lo que hace esta función
es esencialmente fusionar dos objetos
y luego devolver uno nuevo.
Entonces, podríamos hacer esto,
objeto.asignar.
Y, de nuevo, podemos usar esta función
para fusionar dos objetos.
Y entonces, lo que podemos hacer
es simplemente fusionar un nuevo objeto vacío
con Jessica2.
Y esto creará un objeto completamente nuevo.
donde todas las propiedades son realmente copiadas.
¿Está bien?
Entonces, el resultado de llamar a esta función aquí
con estos argumentos será un nuevo objeto.
Entonces, guardemos eso en
JessicaCopy.
Y ahora, digamos que JessicaCopy se casa.
Entonces, la misma situación que antes.
cambiando su apellido a Davis.
Y ahora, bloqueemos ambos en la consola como aquí.
Entonces, Jessica2,
y luego aquí está
JessicaCopy.
Entonces, veamos qué pasa ahora.
Entonces, son estos dos últimos aquí de la línea 222 y 223,
¿bien?
Y así ahora de hecho,
podemos conservar el apellido original Williams
después de que cambiemos el apellido en este otro objeto aquí.
Entonces, esta JessicaCopy.
Y lo que esto significa es que este objeto ahora
es de hecho una copia real del original.
Entonces, todas las propiedades fueron esencialmente copiadas
de un objeto al otro.
Y entonces, detrás de escena, lo que eso significa
es que, de hecho, se creó un nuevo objeto en el montón
y JessicaCopy ahora apunta a ese objeto.
Entonces, tiene una referencia a ese nuevo objeto.
Sin embargo, todavía hay un problema
porque usando esta técnica de object.assign
solo funciona en el primer nivel.
O dicho de otro modo, si tenemos un objeto dentro del objeto,
entonces este objeto interno seguirá siendo el mismo.
Por lo tanto, seguirá apuntando al mismo lugar en la memoria.
Y por eso decimos que este object.assign
solo crea una copia superficial
y no un clon profundo que es lo que nos gustaría tener.
Entonces, nuevamente, una copia superficial solo copiará las propiedades
en el primer nivel mientras que un clon profundo copiaría todo.
Y para ilustrar esto,
déjame mostrarte lo que quiero decir.
Entonces, agreguemos una matriz aquí en este objeto original.
Por lo tanto, una matriz de la familia.
Y esto va a funcionar como un ejemplo
porque una matriz es realmente solo un objeto detrás de escena.
Entonces, aquí puedo probarte mi punto con esto.
Entonces, ahora tenemos una matriz llamada familia, ¿de acuerdo?
Y así, verás que ahora esta matriz aquí
es de hecho en ambos objetos.
Entonces, está bien.
Hasta ahora, todo bien.
Pero ahora, cambiemos esa matriz en JessicaCopy.
Entonces, en este,
porque al casarse Jessica, también aumentó su familia.
Entonces, agreguemos ahora algunos miembros más de la familia allí.
Entonces, JessicaCopy.family,
y luego usemos el método push para agregar un nuevo elemento
hasta el final de la matriz.
Agreguemos a Mary y agreguemos también otra.
Entonces, family.push,
y agreguemos a John.
Entonces, recuerda que aquí estamos manipulando el objeto copiado,
que en realidad es una copia,
pero ahora aquí estamos manipulando un objeto
eso está dentro del objeto.
Entonces, ese es este objeto.
Y así, ahora que guardamos esto,
todavía se ve igual,
pero eso es porque necesitamos iniciar sesión, por supuesto,
después de que ocurra esta operación.
Y ahora, vemos que tanto los objetos
Ahora tenemos una familia de cuatro miembros.
Abramos esto un poco, démosle un poco más de espacio.
Y de hecho, ahora antes del matrimonio y después del matrimonio,
la familia tiene estos cuatro miembros, ¿de acuerdo?
Entonces, el apellido era, por supuesto,
como ya vimos conservado.
Entonces, el nombre antes del matrimonio es Williams,
y eso se conservó porque eso está en el primer nivel
y object.assign aquí se encargó de copiar esa propiedad.
Y entonces eso no se cambió como cambiamos el apellido.
en la copia.
Sin embargo, el objeto de familia es un objeto profundamente anidado.
Y por lo tanto, object.assign realmente no,
detrás de escena, cópielo en el nuevo objeto.
¿Está bien?
Entonces, en esencia, ambos objetos, Jessica2 y JessicaCopy
tener una propiedad llamada familia,
que apunta al mismo objeto en el montón de memoria,
y ese objeto es, por supuesto, esta matriz.
Y así, cuando cambiamos la matriz en uno de ellos,
también va a ser cambiado en el otro.
Ahora, un clon profundo es lo que necesitaríamos aquí,
pero no es fácil de lograr,
y en realidad estaría más allá del alcance de este video
para aprender a crear un clon profundo.
Por lo general, hacemos algo como esto.
que es como muy complejo
usando una biblioteca externa, por ejemplo, como Lo-Dash,
y esta biblioteca tiene un montón de herramientas útiles
y uno de ellos es para la clonación profunda.
Y de hecho, lo haremos en una sección posterior.
solo para que veas cómo podemos incluir una biblioteca externa
para hacer este tipo de cosas.
Está bien.
Y con esto, en realidad terminamos esta sección.
sobre cómo funciona JavaScript entre bastidores.
Y fue largo con tantas cosas
y tantos conceptos nuevos para aprender.
Y muchos de ellos fueron difíciles y probablemente confusos,
pero eso no es un problema.
Aunque siempre es parte del aprendizaje,
y aunque no entendiste el 100% de todo,
sigues siendo bueno para seguir adelante en el curso
a la siguiente sección ahora.
Pero llegando al final de esta sección
ya te dio una gran ventaja sobre muchos otros desarrolladores,
que no tienen idea de muchas de las cosas
que te mostré aquí en esta sección.
Entonces, felicidades por seguir con esto hasta el final.
y por aprender todo este valioso conocimiento.
Y ahora, te veo en la siguiente sección.