Front-end development: the difference between heap and stack in JS

foreword

In the actual development of the front end, the native heap and stack of JS are also very important points, and the mastery and use of the bottom layer and principles are very important, especially in terms of performance optimization. As we all know, JS variables are stored in memory, and the memory has opened up two areas for variables, namely the heap area and the stack area. In fact, the heap and stack are a structure of data storage. Therefore, in actual development, the heap and stack in JS are also relatively common and important knowledge points, and they are also frequently tested knowledge points during front-end job interviews, which can be said to be very important, so this article will make a summary for easy reference use.

JS data type

Before introducing the stack and heap, let's take a look at the JS data types first. Front-end developers should know that JS data types are divided into: basic data types and reference data types. The basic data type is actually a simple data segment stored in the stack memory, and the space occupied by each type of data is determined; the reference data type is an object stored in the heap memory, and the space occupied by each type of data The size of the space is uncertain.

1. Basic data types

• Number: Number type,
• Boolean: Boolean type,
• String: string type,
• null,
• undefined,
• symbol (newly added by ES6),

Note : Although null is a basic data type, the output result is Object because null is considered an empty object reference.

2. Reference data type

• array: array,
• Math: object,
• function: function,
• Date。

Note : The function is not a basic data type, but the function type will appear after calling typeof, that is because the function is an object. But there are also some special properties, so it is necessary to use typeof to distinguish functions and objects.

For details about JS data types, please refer to this article by the third shopkeeper, which contains detailed explanations: Front-end development: conversion of commonly used data types in JS and collection of usage scenarios_Front-end 2 Do I need to convert types every time data binding_3 Shopkeeper 666's blog - CSDN blog .

the stack

1. The concept of stack

Stack (stack): The stack is actually the abbreviation of stack memory. The stack is a relatively fixed-size memory space automatically allocated by the operating system and will be released automatically. It stores basic data type variables and reference variables of some objects, occupying a fixed-size memory space Space; and the stack data structure follows the principle of FILO (first in last out).

2. The representative of the stack

The classic representative of the stack is: the ping-pong box structure, the ping-pong balls put in first can only be taken out last. Here is a simple example to illustrate, as follows:

//先来定义变量

var a = 1000;

var b = true;

var c = 'hello world';

The order of execution is as follows

3. The characteristics of the stack

The main characteristics of the stack are: the opening is upward, the speed is fast, and the capacity is small.

heap

1. The concept of heap

Heap (heap): The heap is actually the abbreviation of the heap memory. The heap is the memory dynamically allocated by the operating system, and the memory size is not fixed, and it will not be released automatically. Generally, the developer allocates and releases the memory, and it can also be recycled by the garbage collection mechanism. Memory. The heap data structure is actually an unordered heap tree structure, and satisfies the storage method of key-value pairs (key-value). And the stack data structure follows the principle of FIFO (First in, first out).

2. The representative of the heap

The classic representative of the pile is: books are stored in the bookshelf, and readers can find the corresponding book on the bookshelf according to the name of the book.

Here is an example of a simple heap, the specific code is as follows:

var student1 = {

name: 'John',

age: 30,

phone: '13100002222'

}

var student2 = student1;

student2.name = 'Jason';

console.log(student1.name); // 输出结果为：Jason

3. The characteristics of the stack

The main characteristics of the stack are: slow speed and large capacity.

The difference between heap and stack

1. Stack : The basic data type variables are stored in the stack, while the reference data type variables are stored in the stack to point to the address of the array or object in the heap, which is why modifying the reference data type will always affect other pointers A reference variable for this address.

Advantages of stacks:

(1) The content in the stack is automatically created and recycled by the operating system, occupying a fixed size of memory space, so the memory can be recovered in time, and it is easier to manage the memory space than the heap;

(2) Compared with the heap, the access speed is faster, and the data in the stack memory can be shared.

Disadvantages of stacks:

The size and life cycle of the data stored in the stack must be determined, which lacks flexibility.

2. Heap: The object in the heap memory will not be destroyed due to the end of the method. Even if the method ends, the object may be referenced by other reference variables because of the transfer between parameters. The object is created for repeated use, and the object will be saved to the runtime data area, that is, the heap memory. Only when an object does not have any reference data type variables to refer to it, the system's garbage collection mechanism will recycle it during verification.

Advantages of heaps:

(1) The heap is a memory of variable size dynamically allocated by the operating system, so it is more convenient to store and open up memory space;

(2) The objects saved in the heap will not be released automatically. Generally, they are allocated and released by the developer, and can also be recycled by the garbage collection mechanism, so the life cycle is more flexible.

Disadvantages of heaps:

The size and life cycle of the data stored in the heap are uncertain, chaotic, disorganized, and easy to confuse.

3. Summary

(1) Among the data types of JS, the basic data types are stored in the stack, and the reference data types are stored in the heap;

(2) The basic data type has a fixed size and value, and is stored in the stack; the reference type is not fixed in size, but its reference address is fixed, and its address is stored in the stack, pointing to the object stored in the heap;

(3) The basic data type is automatically destroyed when the current environment is executed; the reference type will be recycled by the garbage collection mechanism only when the referenced variable does not exist;

(4) The basic data type is a deep copy, the reference data type is a shallow copy, and the copying of variables is actually the transfer of references;

(5) Basic data types cannot add attributes and methods, but reference data types can add attributes and methods;

(6) Basic data types can be directly compared with == or === when comparing equality; but for reference types, even if let s = {}; is the same as let s1 = {};, their memory The addresses are different, so the result of the comparison is still not equal.

(7) Pass by value and address: Copy the value of the reference data type from one variable to another variable. In fact, the pointer is copied, so the two variables eventually point to the same object, that is, the address in the stack is copied instead of the heap objects in . Copying a value of a primitive type from one variable to another creates a copy of the value.

Heap and stack overflow

Heap and stack overflow, as follows:

(1) If you want to overflow the heap, you can loop the created object or the outer object;

(2) If you want to overflow the stack, you can call the method recursively. As the stack depth increases, the virtual machine (JVM) will maintain a long method call track until the memory is not enough to allocate, resulting in stack overflow.

at last

Through this article's detailed introduction to the difference between heap and stack in JS in front-end development, the difference between heap and stack and their use are very key knowledge points in both actual front-end development work and front-end job interviews, so As a front-end developer, it is necessary to master its related content, especially for developers who have been engaged in front-end development for a short time. It is an article worth reading, and the importance will not be repeated. Welcome to pay attention, communicate and make progress together.