Aprender a programar es mucho más que saber sobre los distintos elementos y lenguajes de programación, ya que también requiere entender cómo afectan a la web que estamos creando y a la máquina que nos permite visualizarla. Por ello, en este post, te enseñaremos cómo interactúan dos elementos importantes de este proceso: los arrays de JavaScript y la memoria RAM.
¿Cómo se almacena nuestro código?
Antes de enseñarte exactamente qué sucede entre los arrays de JavaScript y la memoria RAM de nuestra máquina, te invitamos a leer nuestros posts sobre cómo se almacenan los tipos de valores primitivos y los tipos no primitivos de JavaScript en la RAM de nuestro ordenador. Allí aprenderás cómo se diferencia el almacenamiento de estos dos tipos de elementos y por qué toma más espacio almacenar un tipo no primitivo, como un array, que un tipo primitivo, como un número.
En resumen, la diferencia es que los tipos de valores primitivos se almacenan directamente dentro de un slot bajo la etiqueta que le hemos dado a nuestras variables. Es decir. en un solo slot de nuestra memoria RAM se almacena el valor. En el caso de los elementos de tipos no primitivos, como lo son los arrays, la memoria RAM almacena primero una dirección hacia otro slot, en el que sí encontraremos los valores primitivos que conforman nuestro array. Esto se complica aún más cuando empezamos a hablar de almacenar una referencia a un array, pues esta, además, almacena una dirección al contenido original.
A continuación, te explicaremos de forma más específica cómo interactúan los arrays de JavaScript y la memoria RAM de nuestra máquina cuando utilizamos el spread operator de JavaScript.
¿Cómo interactúan los arrays de JavaScript y la memoria RAM?
Utilizar el spread operator para copiar los contenidos de nuestros elementos tiene una incidencia en cómo interactúan los arrays de JavaScript y la memoria RAM. Aunque un spread operator utiliza como referencia al array del que estamos copiando un contenido, este array es independiente del nuevo elemento creado. Esto quiere decir que los cambios que hagamos en el segundo elemento no afectan al array original, pues el segundo elemento copia e independiza los contenidos.
Por ejemplo, supongamos que tenemos el siguiente array:
let arr1 = [‘a’, ‘b’, ‘c’];
Y lo copiamos dentro de la siguiente variable:
let arr2 = […arr1]
Entonces, si decidimos agregar contenido a nuestro segundo elemento, el contenido original no será afectado.
arr2.push (d) // [‘a,’, ‘b’, ‘c’, ‘d’]
Esto es diferente a cuando se crea una asignación, pues en estas ambos elementos estarían apuntando a la misma referencia. Con un spread operator, cada elemento tiene un contenido independiente que se almacena en slots distintos. Entonces ¿cómo se ve esto en la memoria RAM? A continuación te presentamos un diagrama:
| Array | Contenido | Slot |
| arr1 | #002 | #001 |
| a,b | #002 | |
| arr2 | #004 | #003 |
| a, b | #004 |
Esta distribución sería diferente si tuviéramos la siguiente asignación:
arr3 = arr1
Entonces, esta asignación se almacenaría de la siguiente manera, usando como referencia arr1:
| arr3 | #006 | #005 |
| #001 | #006 |
En este orden de ideas, si agregamos un elemento al arr1, afectaremos el contenido de este y de arr3, pero el contenido de arr2 no se ve afectado, pues se ha escrito para ser independiente. Lo mismo sucede si generamos modificaciones en arr3, como este apunta al mismo punto de memoria, afectaríamos también a arr1.
Ya que sabes cómo se diferencian estos dos métodos de copiar contenido, te recomendamos ser consciente de qué variables estás o no afectando cuando modifiques tu código. Aunque la herramienta spread operator puede ser muy útil, también es un arma de doble filo al desenlazar los contenidos uno de otro.
Ahora que has aprendido cómo interactúan los arrays de JavaScript y la memoria RAM, puedes utilizar este conocimiento para escribir un código más eficiente con tu máquina y mejorar tus habilidades de programación. Si, además, quieres seguir aprendiendo a dominar este y muchos otros lenguajes de programación para la web, como CSS y HTML, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, con el que en pocos meses te convertirás en un experto del desarrollo web. ¡No te pierdas esta oportunidad e inscríbete ahora!
