Objetos y Tipos de Memoria en JavaScript

Clase 7 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Resumen

Un objeto es una referencia a un espacio en memoria, cada vez que creamos un objeto, este se guarda en la memoria (no sabemos exactamente dónde) y podemos acceder a su valor gracias a las coordenadas.

Existen dos tipos de memoria: Stack y Heap.
La memoria Stack es mucho más rápida y nos permite almacenar los datos de forma ““ordenada”” y en JavaScript la utilizamos para guardar datos primitivos, como booleanos, números o strings. En cambio, los objetos utilizan la memoria Heap, una memoria que nos permite guardar grandes cantidades de información pero con un poco menos de velocidad.

Estos dos conceptos nos van a ayudar mucho a la hora de copiar objetos cuando utilizamos la programación funcional.

Julio J Yépez

student•

En otras palabras, las variables primitivas se almacenan y se acceden por valor, mientras que las variables de tipo objeto se almacenan y acceden por referencia.

Es por esta razón que al declarar una constante primitiva no podemos cambiar luego su valor, pero al declarar una constante de tipo objeto, si podemos cambiar en cualquier momento los atributos o propiedades que tiene definidos internamente.

Nathaly Stefani Riaño Bejarano

student•

Que buena observación! No había notado lo de los objetos y sus atributos… así sean declarados constantes

Bryan Estiven Silva Mercado

student•

Muy buen aporte , me queda claro agregado a otra definición que leí hace poco.

Juan Castro

teacher•

Notas de la clase:

🎳 Los objetos son referencias a un espacio en memoria.
🎩 La mayoría de lenguajes de programación utilizan dos tipos de memorias: Stack y Heap.
📁 La memoria Stack es muy rápida pero sin tanto espacio, aquí guardamos los valores primitivos de nuestras variables (true, false, ‘JuanDC’, 16, etc).
🌪 La memoria Heap es un poco más lenta y nos permite guardar grandes cantidades de información (son como los tornados: grandes, lentos y desordenados). En esta memoria guardamos los valores de los objetos ({...}).

Carlos Gómez Mont

student•

Super aporte, gracias!!

Juan Carlos Montilla Sánchez

student•

Excelente analogía con el tornado jejeje

Eliseo Geraldo González

student•

Los tipos de datos no primitivos, se referencian por memoria, es esta también la razón por la que comparar dos objetos diferentes, con las mismas caraterísticas obtenemos false, es decir, en (object1 === object2) no se compara el objeto, se compara si se encuentras en la misma posición de memoria.

const object1 = { value: 10 }
const object2 = object1
const object3 = { value: 10 }

console.log(object1 == object2);
// → true
console.log(object1 == object3);
// → false

Porque…

      +-----------------+------------------+------------------+
      |     object1     |      object2     |     object3      |
      +-----------------+------------------+------------------+
      |                 |         |        |                  |
      |   {value: 10} <-----------+        |   {value: 10}    |
      |                 |                  |                  |    
      +-----------------+------------------+------------------+

Carlos Gómez Mont

student•

Gracias por compartir, saludos!!

Juan Castro

teacher•

En este vídeo nuestro profe Javier Santaolalla del Curso de Matemáticas para Física nos explica muy sencillo qué son y para qué sirven las Matrices:

Matrices en el Curso de Matemáticas para Física

Marco Antonio Macedo Preciado

student•

¿Las funciones se guardan en stack o en heap? 🤔

Juan Castro

teacher•

¡Stack! :wink:

:point_right: https://medium.com/@muratcatal/understanding-javascript-heap-stack-event-loops-and-callback-queue-6fdec3cfe32e

Juan Castro

teacher•

Does JavaScript use stack or heap for memory allocation or both? 😬

Edward Fernandez

student•

Excelente aporte! Gracias.

Juan Esteban Galvis

student•

Respecto al tema de referencia recomiendo mucho este vídeo: https://www.youtube.com/watch?v=AvkyOrWkuQc

Y para entender cómo funciona el navegador e interpreta el código JavaScript este curso es genial: https://platzi.com/clases/javascript-navegador/

juan jose hernandez llamas

student•

El concepto de stack es más complejo...

"La pila de llamadas, pila de ejecución, pila de función, pila de control, pila de tiempo de ejecución o simplemente call stack es una estructura dinámica de datos que almacena la información sobre las subrutinas activas de un programa en ejecución. Cuando hacemos una llamada a una función, un bloque en el tope de la pila es reservado para guardar las variables locales junto con algunos datos necesarios para garantizar el funcionamiento adecuado de la estructura (como la dirección a la que tendrá que retornar el hilo de ejecución cuando termine la función). Después de retornar, el bloque de la pila que ocupaba el llamado, se libera para poder utilizarse más adelante de ser necesario.

Se llama pila de ejecución porque es una estructura de datos que funciona bajo el concepto de LIFO (last in first out). Esto hace que sea más sencillo mantener el control de los bloques que deben ser liberados, puesto que será aquel que esté en el tope de la pila."

No sé si lo retomes después, pero creo yo, que hubiera sido mejor dejarlo claro desde un inicio,o dejar todo el concepto hasta después y no dejarlo a medias

fuente: https://codingornot.com/diferencias-entre-heap-y-stack

Alfonso Camp

student•

y porque estas en el curso? si lo sabes? jaja xd o es solo para validar tu conocimiento y persona??¿?

Alison Báez

student•

Honestamente, siento que el concepto se explicó de manera sumamente superficial. Es verdad que así se hace más sencillo de entender, pero bien se pudo dar una explicación un poco más detallada para ayudar a la comprensión del concepto. Les comparto un artículo muy bueno con el que yo comprendí: https://academind.com/tutorials/reference-vs-primitive-values

Usuario anónimo

user•

Para entender el funcionamiento de memoria en javascript, ver el curso de javascript engine V8 y el navegador.

Edward Fernandez

student•

Hola chicos, les dejo un resumen que hice (con lo visto en clase y complementando con lecturas que conseguí):

Stack

Una Stack es una región de memoria que opera en modo First-In-Last-Out.
Cuando se crea un nuevo thread, puede ser por un programa, se crea una nueva pila.
Es pequeña y puede usarse para almacenar de manera rápida y obtener data temporal.
La memoria Stack es mucho más rápida y nos permite almacenar los datos de manera "organizada" y en JS la utilizamos para almacena datos primitivos.

Heap

También es llamado 'free store'.
Es una región grande de memoria que puede ser usado para almacenar data de manera desorganizada y arbitraria.
Es usada para estructuras de datos.
La información se obtiene a través de referencias.

Guadalupe Monge Barale

student•

Acá les dejo dos clases muy buenas para profundizar esto Son del Curso de V8 .

Memory Heap

Call Stack

Alex hernandez mitre

student•

me gusta cómo va éste curso.

José Alberto Ramírez Quiroz

student•

Apuntadores(¿Variables?)

Todas las variables o constantes de cualquier lenguaje tienen una referencia unica dentro de memoria esta se genera de manera aleatoria por parte del mismo gestor de memoria esta referencia se puede interpretar como un ID por ejemplo (21d2sfs151) → esto es conocido como apuntador

Las variables y objetos tienen un comportamiento diferente ¿?

Veamos primero las variables...

Todos los apuntadores generados en el codigo son letras escritas de forma aleatoria! NO es que el gestor de memoria los escirba así

```jsx
let a = 1
let b = a
/*Dentro de este ejemplo a esta guardado en un apuntador aleatorio recordar ejemplo    (fd2sqw1sf) y b es una copia de a al ser una copia del valor se guarda en otro apuntado  ej(1fsd5fs2)*/
console.log(a,b) 
// IMPRIME  1 1
/*Al hacer una modificación para a solo     afectara al apuntador (fd2sqw1sf) como b     esta en otro apuntador no se vera           modificado para nada*/
a = 5
console.log(a,b)
// IMPRIME 5 1

Carlos Eduardo Gomez García

teacher•

Vale, aunque una forma más fácil de ver a los objetos son como listas, aunque no abía esto de stack y heap...

elvis rosario

student•

no tego nigun tipo de experiencia en este mundo,de hecho, primera vez que tomo clases de programacion.

mi pregunta es,como sinsigo el prorama de JS para empesar a practicar?

Angelo Zambrano

student•

@elvisrosario JavaScript corre nativamente en tu navegador, no es nesesario installar nada aparte de un editor de texto y, por supuesto, tu navegador. Si estás comenzando, este curso te puede abrumar un poco, te recomendaría comenzar primero con html y css para que le puedas sacar más provecho a JavaScript.

Carlos Enrique Ramírez Flores

student•

Tipos de memoria! Ojo esto es un marcador!

Carlos Enrique Ramírez Flores

student•

Interesante nunca había visto cómo se almacenan los datos! [Stack] y [Heap]

Francisco Garcia [C6]

student•

Ever Alfredo Sorto Ayala

student•

solo quiero saber si entendí bien: Las funciones al crear un bloque deben paginarse por lo tanto no caben en una sola celda de memoria como las variables, entonces el sistema operativo loq ue hace es la gestión de la función por su nombre de variable de esta manera se añade al stack su referencia pero el cuerpo de la función sigue en el heap ?

Carlos Eduardo Gomez García

teacher•

Así es, aunque realmente aquí se habla más sobre objetos, pero con las funciones es similar, algo que no me queda claro del todo es si los datos primitivos (como numeros o strings) igual se guardan en el memory heap, aunque según Diego De Granda, sí.

Te lo explicaré a como yo lo veo, el memory heap es básicamente una estantería donde puedes guardar cosas de manera random, pero cada espacio tiene asignado un identificador, el call stack es ese mapa que te dice en qué lugar de la estantería está guardado ese valor, realmente el callstack es la lista de tareas que JavaScript va cumpliendo , es eso, un Stack (o pila), son estructuras de datos, si quieres profundizar en ello puedes tomar el Curso de Estructuras de Datos con JavaScript , aunque también lo puedes complementar con este video de Platzi donde explican una parte del Call Stack:

@youtube

Adicionalmente te recomiendo mirar el Curso de JavaScript Engine (V8) y el Navegador para que puedas entender más sobre el Stack y el Heap