Cómo funciona la memoria en JavaScript

🎳 Las variables son referencias a un espacio en memoria.
🎩 Los navegadores web usan dos tipos de memorias: Stack y Heap.
📁 La memoria Stack es muy rápida, pero sin tanto espacio. Aquí se guardan los valores primitivos (booleanos, strings, números…).
🌪 La memoria Heap es más lenta, pero permite guardar enormes cantidades de información (son como los tornados: grandes, lentos y desordenados). En esta memoria guardamos los valores de los objetos ({...}).

.

Entender cómo funciona la memoria en JavaScript no solo será útil para aprender POO, sino también para programación funcional. 😉

Yo tengo entendido que a crear la variable se lo conoce como declarar.

const patito

y que inicializar variables es cuando le asignamos algún valor

patito='feo'

Las variables son una referencia a un espacio en memoria. Dependiendo del tipo de valor que sean serán ubicadas en alguna de las dos tipos de memoria:

• Stack - Mucho más rápida, pero sin tanto espacio
• Heap - Más lenta, pero con mucho más espacio

Las variables que no tienen un valor de tipo objeto, son almacenadas en la memoria stack. Las variables que tienen como valor un objeto, funcionan de una manera diferente:

• El valor (objeto) es guardada en la memoria heap
• En la memoria stack se guarda un apuntador (pointer) hacia la memoria heap

Es por esto que cuando nosotros asignamos una variable que tiene como valor un objeto, a una nueva variable, lo unico que hacemos es asignar el apuntador. Es así que al modificar el objeto, en cualquiera de las dos variables, los cambios se reflejan en las dos

const person = {
 name: 'Zajith',
 email: '[email protected]',
}

const person2 = person

person2.name = 'Juanito'

person2 // { name: 'Juanito', email: '[email protected]' }
person // { name: 'Juanito', email: '[email protected]' }

Estar en el curso de Manipulación de Arrays en Js y pasar acá para aclarar una duda sobre el método Map es…simplemente maravilloso

Este curso me está volando la cabeza de una forma increíbleeeeeeee

Les adjunto un articulo que explica como funcionan estos dos tipos de memoria, normalmente cuando yo conozco nuevos conceptos en algun lenguaje de programacion me gusta leer articulos por internet para ver diferentes formas de explicar, suerte!
https://levelup.gitconnected.com/understanding-call-stack-and-heap-memory-in-js-e34bf8d3c3a4

En esta clase se está explicando lo que en otros lenguajes explican como copia de valor y copia de referencia.

Cuando copias primitivos (int, string, boolean ) con el signo “=” copias el valor.
Cuando “copias” objetos con el signo “=” no copias el valor, sino la referencia a un lugar en el heap. Por ello al cambiar valores de propiedades del objeto el cambio se reflejará en las 2 variables apuntando al mismo objeto.

No se preocupen amigos, las variables estan a salvo 😃. Eso solo pasa con los objetos e arrays. pero hay solucion para eso.

Objetos en JavaScript:
Cuando decimos “objeto” nos estamos refiriendo a un objeto literal, un array o una función.
Cualquier otra cosa que no sea un valor primitivo.

Heap (Memoria Dinámica):
Es el área de memoria destinada para almacenar objetos.

Referencia:
La posición de memoria que se usa para acceder a un objeto.

Pero básicamente si el objeto que estás tratando de copiar tiene sólo valores primitivos, podés hacerlo de dos maneras:

let copiaPersona = Object.assign({}, persona);

Esto lo que hace es asignarle a un nuevo objeto vacío todas las propiedades enumerables del otro objeto con sus valores. Obviamente crea un nuevo objeto, una nueva referencia, pero sus propiedades son las mismas.

let otraPersona = { ...persona };

Esto hace básicamente lo mismo. Con el spread operator, estamos llenando un nuevo objeto vacío con todas las propiedades y valores del objeto persona.
Esta forma de copiar objetos se llama shallow copy (un copiado superficial).

jajajajajajajajaja, ya que esto quedo claro te espero en la próxima clase! En serio pensé que era el final.

Les recomiento este video del canal de YT de un profesor de aqui de platzi
https://www.youtube.com/watch?v=ygA5U7Wgsg8&ab_channel=LaCocinadelCódigo

Aqui explican como funciona la pila de ejecucion (callstack de javascript) es buena info para saber como JS procesa nuestro codigo.

El stack es la rom y el heap la ram👍

MEMORIA EN JAVASCRIPT
·
Los objetos sn referencia a un espacio en memoria, cuando copiamos un objeto, realmente copiamos su referencia en memoria. Por eso, cuando editamos la copia de un objeto original, editamos el objeto original.

·

declarar variables: inicializar variables;

let name = “Felipe”;
let age = 28;

El stack es dónde se guardan los valores de las variables. Cuando el valor es un objeto, se guarda un apuntador al objeto donde está guardado en memoria el objeto

Aprendiendo todas estas intimidades de JS es como entrar a un sótano oscuro en el que no sabes qué hay ni qué vas a encontrar!

🧠 Cómo funciona la memoria en JavaScript

Ideas/conceptos claves

Memory Stack es un mecanismo de uso de memoria que permite que la memoria del sistema se use como almacenamiento de datos temporal que se comporta como un búfer de tipo primero en entrar, último en salir (Pila)

Memory Heap es una ubicación en la memoria donde la memoria se puede asignar en acceso aleatorio

Apuntes

• Los objetos son referencia a un espacio en memoria
  • Cuando copiamos un objeto, en realidad estamos copiando su referencia en la memoria
  • Por ese motivo al modificar la copia estamos modificando también el objeto original
• Cuando creamos variables en el lenguaje estamos realizando 2 procesos
  1. Inicialización ⇒ Indicamos al lenguaje que vamos a crear una nueva variable con un nombre
  2. Asignación ⇒ Decir el valor de la variable
• El nombre y la variable donde se guardan se llama el memory stack, si bien no se encuentran en el mismo lugar están en la misma memoria
  • Excepto cuando se trata de objetos
• Cuando el valor de las variables es un objeto no es en sí el objeto, sino que es un apuntador (pointer) apuntando donde está guardado el objeto (memory Heap)
• Memory Stack se caracteriza por ser rápido, pero tiene un límite corto a comparación del Memory Heap que es más lento, pero tiene mucha más memoria
  • Por este motivo los valores de los objetos se organizan en el memory Heap y para que se encuentre más rápido solo se guarda la dirección de donde se encuentran en el memory stack
• Para poder copiar un objeto se puede realizar de dos maneras
  1. Shallow copy
  2. Deep copy

📌 **RESUMEN:** Al utilizar la memoria en JavaScript en las variables se pueden realizar de dos formas dependiendo del tipo de dato. Si es un dato primitivo se lo pondrá el dato tal cual en el memory Stack, si es un dato de tipo Objeto se guardara la información en el memory Heap que cuenta con más espacio de memoria que el memory Stack. En este último estará la dirección de donde encontrar el objeto conjunto al nombre de la variable.

“Call Stack” => llamar.
“Memory Heap” => montón.

Lo que en resumen nos dice Juan pero en código muy practico y visible:

class Person{
    constructor(name){
        this.name=name;
    }
}

let danny=new Person('danny');
let copy=danny;
//Cuando creo la copia y el original
console.log(danny);
console.log(copy);
//cambiar original
danny.name='juan';
console.log(copy);
//cambiar copia
copy.name='copia';
console.log(danny);

Este es el mejor video que puedes ver para entender este concepto. Slds

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

Intentaré explicar la parte de los punteros de una manera resumida

Cuando se “Copia” un objeto con la siguiente sintaxis

ObjetoUno = ObjetoCopia 

Lo que en verdad estamos tomando es el ‘Puntero’, el puntero es un dato que como su nombre indica ‘Apunta’ a una dirección en la memoria exacta, en este caso la memoria Heap, donde esta guardado el contenido del objeto, así que, como ambos tienen el mismo puntero, están accediendo al mismo dato, por ende, toda modificación realizada en cualquiera de ambos, cambiará el otro.

No es por nada pero Juan David es un crack enseñando, que tremendo profesor!

Esta clase explica muchísimos bugs que he tenido en mis proyectos. 😄

2. Como funciona la memoria en Javascript

• Los objetos son referencias a un espacio en memoria. Cuando editamos la copia de un objeto, en realidad estamos copiando es su referencia en la memorí. Por eso cuando se edita la copia, se edita también la original.

let name ="juan";
let age = 18;

Cuando se crea variables en JavaScript. Se están ejecutando dos procesos:

1. Inicialización: Se crea una variable con nombre
2. Asignación: Se le asigna el valor a una variable

En la memoría la variable tiene dos variables. El nombre y el valor de la varible. Se guarda en lugares distintos en la memoria y una se vincula con la otra.
Esta memoría se llama STACK.

Cuando el valor de las variables es un objeto, se crea una referencia a ese objeto en la memoria. (un pointer), apunta a donde esta guardado nuestro objeto. A esto se le llama HEAP
En conclusión: La memoria STACK cuando solo usamos los nombres de nuestras variables y sus valores, pero cuando trabajamos con objetos usamos la memoria HEAP

Como funciona la memoria en js

js tiene 2 memorias, stack y heap, la memoria stack es muy rapida pero sin tanto espacio.

heap es un tornado, rapida pero no tan rapida como la del stack,caotica y muy poco ordenada

Los objetos son referencia a un espacio en memoria, cuando copiamos un objeto, lo que hacemos es copiar su referencia en la memoria, normalmente cuadno inicializo una variable y la decalro con (nombres) let name,

y (valores) juan, es decir let name = juan, todo esto es normal, y sucede dentro del stack, los nommbres y valores son en diferentes lugares del stack, pero aun asi, son dentro del stack, PEROOO en objetos, todo sucede diferente:

let patito se guarda en stack(nombres), pero ya en los valores no se guarda nada que no sea un apuntador, digamos este apuntador buchonea( o vuelve a apuntar ) a donde se guardo el objeto FUERA de el stack, y donde es eso? en una parte de la memoria llamada HEAP

por lo tanto, si yo quiero hacer un objeto que tenga los mismos datos que otr objeto, SI LOS IGUALO, en realidad no estoy solo copiando sus datos, sino que le copio a donde llega el apuntador(en los valores), eso hace que al hacer esto, tengo 2 objetos que puden tener acceso al mismo espacio de memoria, por lo tanto ambos CAMBIARAN ese espacio, si edito cualquiera de los objetos.

Conclusion: copiar un objeto de mamnera normal, es darle acceso a otros objetos a un espacio de memoria de el objeto principal, y eso es un problema.

les dejo un video del profesor sacha que explica bastante bien este tema de valores vs referencias