Both heap and stack are an area of data allocated in runtime memory and are therefore also called heap and stack areas, but they store different types of data and are processed at different speeds. Heap is used to allocate space for complex data types (reference types), such as array objects and object objects. It allocates memory dynamically at runtime, so access is slow. The stack mainly stores references of some basic types of variables and objects. Its advantage is that the access speed is faster than the heap, and the data in the stack can be shared, but the disadvantage is that the size and lifetime of data in the stack must be determined, which lacks flexibility.

1. Stack usage rules

One of the most important aspects of the stack is that data in the stack can be shared. For example, the following code defines two variables whose values are numeric.

var a=3;
var b=3;
Copy the code

Var a=3; “, first creates a variable in the stack as a reference to a, then looks for a value of 3 in the stack, if not, puts it in, and then points a to 3. And then var b=3; After creating a reference variable as b, we look for the value 3 in the stack. Since 3 already exists in the stack, we point b directly to 3. So we have both a and B pointing to 3. At this point, if a=4, the JavaScript interpretation engine will search the stack again to see if there is a value of 4. If so, it will put 4 in the stack and set a to point to 4. If it already exists, point A directly to that address. So a change in the value of A doesn’t affect the value of B.

2. Rules for using heap

Let’s look at the heap behavior using Array, for example:

var fruit_1="apple";
var fruit_2="orange";
var fruit_3="banana";
var oArray=[fruit_1,fruit_2,fruit_3];
var newArray=oArray;
Copy the code

When an array is created, an array object is created in heap memory and a reference to the array is created in stack memory. The variables fruit_1, fruit_2 and fruit_3 are the basic data types, and their values are directly stored in the stack. NewArray and oArray are compound data types (reference types). Their reference variables are stored on the stack and refer to the actual objects stored in the heap. Note that the value of newArray is equal to the variable reference oArray, so it is also a compound data type (reference type). If you change the values of variables fruit_1, fruit_2 and fruit_3, you are actually changing the values in the stack. If you change the value of newArray or oArray, you are actually changing the actual object in the heap, so both variable references are affected. For example, first change the value of newArray and then look at the value of oArray as follows:

alert(oArray[1]); // Return orange newArray[1]="berry"; alert(oArray[1]); / / return berryCopy the code

Again, first change the value of oArray, then look at the value of newArray, code like this:

alert(newArray[1]); Orange oArray[1]='tomato'; alert(newArray[1]); / / returns the tomatoCopy the code

The JavaScript heap does not require program code to be explicitly released, because the heap is handled by automatic garbage collection. The JavaScript interpretation engine in each browser has different automatic garbage collection methods, but the basic principle is: If there is no reference to an object in the heap in the stack, the object is considered no longer needed and its footprint is cleared during garbage collection. Therefore, references to objects should be released when they are not needed in favor of garbage collection, which can improve program performance. The most common way to release a reference to an object is to assign it null. For example, the following code assigns newArray to NULL: newArray=null;

3. Easy mistakes

The most common mistake to make with stacks and heaps is to use strings, as in the following code:

var str=new String('abc');
var str='abc';
Copy the code

The first is to create a new String object using the new keyword. The object will be stored in the heap and a new object will be created each time. The second is in the stack, where the value ‘ABC’ and references to the value are stored. It is recommended to create multiple ‘ABC’ strings using the second method, which has only one value in memory to save space. At the same time, it can improve the running speed of the program to a certain extent, because the values are stored in the stack, can be shared, and because the stack access is faster, so the performance is greatly improved. The first creates a new String in the heap every time, regardless of whether the String values are equal and whether it is necessary to create a new object, thus increasing the program’s burden. And the access speed of the heap is slow, which has a great impact on the performance of the program. Also, for the sake of logical operations, there is a difference between using heap and stack storage when comparing two variables. Let’s take a look at logical equal and logical congruence operations to understand the heap and stack in more detail:

(1) For example, the following code actually compares only the values in the stack:

var str1='abc';
var str2='abc';
alert(str1==str2); // true
alert(str1===str2); // true
Copy the code

Both logical equal and logical congruence operations return true, so you can see that str1 and str2 refer to the same value.

(2) For example, the following code actually compares only the values in the heap:

var str1=new String('abc');
var str2=new String('abc');
alert(str1==str2); // false
alert(str1===str2); // false
Copy the code

Return false for both logical equal and logical congruence, indicating that str1 and str2 do not refer to the same object.

(3) For example, compare the values in the heap and stack:

var str1=new String('abc');
var str2='abc';
alert(str1==str2); // true
alert(str1===str2); // false
Copy the code

When performing logical equal and logical congruence operations, variables are first converted to the same data type and then compared. Str1 and str2 have different data types, but the comparison returns true. But the logical congruence operation differs from the logical equal operation in that it compares data types to see if the same data is referenced.