Buildtide
Author: Hussain Mir Ali

I am interested in web and mobile technologies.

If you have any questions or feedback then message me at devtips@Buildtide.com.

Memory Management in JavaScript Part-1



Fig 1.0 Overview of Memory Life Cycle

Like most languages JavaScript follows a three state memory life cycle which consists of memory allocation, memory usage and releasing allocated memory. But the monitoring and release of allocated memory varies by browser.

Allocation:

The allocation of memory in JavaScript is much more simpler compared to C. JavaScript does not require explicit allocation of memory. The memory is allocated during declaration of variables.

Variables:
let num1 = 5;
let num2 = 7;
let sum = num1 + num3;

let name = 'John'

Setting the variables 'num1' and  'num2' allocates memory for number type. The 'sum' variable is set to the mathematical sum of two numbers 'num1' and 'num2' which also allocates memory for a number. For the 'name' variable JavaScript allocates memory for a string. 

Arrays:
let number_Arry = [1,434,23,2,234234,343,233,27,45632];

let string_Arry = ['orange', 'banana', 'apple', 'strawberry'];

let combined_Arry = number_Arry.concat(string_Arry);

//combined_Arry : [1,434,23,2,234234,343,233,27,45632,"orange","banana","apple","strawberry"]


In the case of arrays JavaScript allocates memory for the array itself and for each of its items. For instance JavaScript will allocate memory for the array 'number_Arry' and also allocate memory for each of its items. Same goes with 'combined_Arry', JavaScript will allocate memory for the array and all the items resulting from the concatenation of two arrays. 

Functions:
let randomNumber = function(low, high){
return Math.floor(Math.random()*high+low);
}

For a function variable JavaScript will allocate memory for a function(callable object) and for each of its arguments. The function in this case is a random number generator which takes in two parameters for low and high range.
 
Object Literals:
let user = {
'firstName': 'John',
'lastName': 'Doe',
'score': 100,
'likes': 50,
'favourite_places': ['San Francisco', 'New York', 'Los Angeles', 'Montreal'],
'getLikes': function(){ return this.likes;}
}

Here the memory is allocated for an object literal and for its properties. So JavaScript allocates memory for two strings 'firstName' and 'lastName'. It also allocates memory for two numbers 'score' and 'likes'. For the 'getLikes' property JavaScript allocates memory for a function. Lastly it allocates memory for an array 'favourite_places' and also for each of its items.

Read/Write:

The read and write part of the process may involve accessing data or updating values. This is where the application logic utilizes the information stored in memory.

Releasing Memory:

Compared to C programming language JavaScript does not require developers to explicitly release memory. This is done automatically by the garbage collector which keeps track of memory allocation and the part of allocated memory that is not in use by the application. 

Current web browsers use Mark and Sweep algorithm for garbage collection. I have discussed these garbage collectors in detail in Part 2 of this post.