Stack is widely used in daily life, such as the most familiar decimal to binary, maze solving and so on. At the same time, it is also very widely used in the front end, many friends will mistakenly think that the stack in the front end of the application is very little, but they do not know that every program we write, basically will use the stack data structure. For example, function call stacks, deep and shallow copies of data… .

Therefore, for a front-end engineer, stack structure is a must learn knowledge. In the following article, we will explain the use of the stack in the front end.

What is a stack

  • A stack is a linear table that can only be inserted and deleted at one end of the table (the top of the stack).
  • Operations can only be performed at the top of the stack, and nodes are accessed on LIFO or FILO basis.

Two, stack application scenarios

  • Last-in, first-out scenarios;
  • For example: decimal to binary, solving mazes, checkerboards, determining whether strings are valid, function call stacks… .

Front end and stack: deep copy and shallow copy

1. JS data type

Speaking of stacks, we need to take a look at the two data types of JS.

(1) Classification of JS data types

First, data types in JavaScript are divided into basic data types and reference data types.

After understanding the classification, I believe many partners have a question in mind: what are these two data types? Where is it stored in memory?

(2) The definition and storage method of JS data type

Basic data types:

The basic data type is Numer, Boolean, String, null, undefined, Symbol (ES6 new), BigInt (ES2020) equivalent, which are stored in memory stack. That is, directly accessing the variable can get the value of the corresponding variable stored on the stack.

If you assign the value of one variable to another variable, the two variables are independent in memory. Changing the value of either variable does not affect the other variable. That’s the basic data type.

Reference data types:

Reference data types are Object, Array, and Function equivalents, which exist in the stack and heap in memory. To access the value of a reference type, we need to access the variable’s address in the stack (the address refers to the value in the heap), and then pass through the address. Access data stored in the heap. This is the reference data type.

This may sound a little abstract, but let’s use a picture to understand it.

As you can see from the figure above, the name and age values are both basic data types, so they point to the stack position in the program. And like is an array type, which is a reference data type, so on the stack, it puts an address of like, and then it puts the value of like in the heap.

After learning about data types and how they are stored, you may also be asked in an interview how to determine what a particular data type is. What does that mean? For example, if you’re given the Number 7 and you need to figure out what it is, we all know that it’s type Number, but a lot of times it stops at figuring out what it is. The following sections detail three ways to determine data types.

(3) The judgment method of JS data type

Common identification methods: typeof, Instanceof, ===

1) typeof:

Definition: Returns a string representation of a data type (lowercase)

Usage: Typeof + variables

It can be judged that:

  • undefined/ Value/string/Boolean /function(returningundefined / number / string / boolean / function ）
  • null 与 object 、object 与 arrayNull, array, and Object are returnedobject ）

Here is a code demonstration:

<script type="text/javascript">
    console.log(typeof "Tony");                / / return a string
    console.log(typeof 5.01);                  / / return number
    console.log(typeof false);                 / / returns a Boolean
    console.log(typeof undefined);             / / returns undefined
    console.log(typeof null);                  / / return the object
    console.log(typeof [1.2.3.4]);             / / return the object
    console.log(typeof {name:'John'.age:34}); / / return the object
</script>
Copy the code

2) instanceof:

Definition: Determines the specific type of an object

B instanceof A → whether b is an instanceof A

It can be judged that:

  • It is used to determine the types of Object data: Object, Array and Function

  • String, Number, and Boolean values are set to false and created by calling the constructor to true

Here is a code demonstration:

<script type="text/javascript">
    let str = new String("hello world")     //console.log(str instanceof String); And true
    str = "hello world"                     //console.log(str instanceof String); - > false

    let num = new Number(44)                //console.log(num instanceof Number); And true
    num = 44                                //console.log(num instanceof Number); - > false

    let bool = new Boolean(true)            //console.log(bool instanceof Boolean); And true
    bool = true                             //console.log(bool instanceof Boolean); - > false

</script>
Copy the code
<script type="text/javascript">
    let items = []; 
    let object = {}; 
    
    function reflect(value) {
        return value; 
    } 
 
    console.log(items instanceof Array);        // true 
    console.log(items instanceof Object);       // true 
    console.log(object instanceof Object);      // true 
    console.log(object instanceof Array);       // false 
    console.log(reflect instanceof Function);   // true 
    console.log(reflect instanceof Object);     // true 
</script>
Copy the code

3) = = = :

Undefined, null

Here is a code demonstration:

<script type="text/javascript">
    let str;
    console.log(typeof str, str === undefined);   //'undefined', true

    let str2 = null;
    console.log(typeof str2, str2 === null); // 'object', true

</script>
Copy the code

At this point, we understand the two types of JS data, as well as the storage and judgment methods of the two data types. So, we’ll look at their common use in the front end, deep copy and shallow copy.

2. Delve into shallow and deep copies

(1) Shallow copy

1) define

The so-called shallow copy refers to the assignment of a variable to another variable. If the value of one variable changes, the values of the two variables change. That is, for the shallow copy, some data in the newly copied object will still change with the changes of the source object.

2) Code demonstration

// Shallow copy - analysis
function shallowCopy(obj){
    let copyObj = {};
    for(let i in obj){
        copyObj[i] = obj[i];
    }
    return copyObj;
}

// Shallow copy - instance
let a = {
    name: 'Joe'.age: 19.like: ['Play basketball'.'singing'.'dancing']}// copy a to B
let b = shallowCopy(a);

a.name = 'bill';
a.like[0] = 'Play table tennis';
console.log(a);
/ * * {name: 'bill', age: 19, like: [' table tennis', 'sing', 'dancing']} * /
console.log(b);
/ * * {name: 'zhang' age: 19, like: [' table tennis', 'sing', 'dancing']} * /
Copy the code

3) legend

As can be seen from the above code, we clearly copied object A to B, but the final result printed by B has some data unchanged and some data changed. At this time many partners are very confused, this is why?

Like in b is an array, that is, a reference data type. We all know that references to data types are stored in stacks and heaps, so in the like array above, we think of it as an address, which is stored in the stack, and the data in that address is pointed to the heap. Let’s look at the legend.

As you can see from the figure above, when you change the data of like in A, its corresponding data changes in the heap. B’s copied like address points to the same location in the heap as A’s. In other words, the like addresses in A and B point to the same location in the heap, so after B copies the data, part of the data will change with a’s change. This is a shallow copy.

After shallow copy, let’s look at deep copy.

(2) Deep copy

1) Definition: Deep copy means that all data in the newly copied object exists independently and will not change with the change of the source object.

2) There are two ways of deep copy: recursive copy and deep copy using JSON functions.

  • The implementation principle of recursive copy is: to obtain each element in the variable, if the basic type value is encountered, directly obtain; If a reference type value is encountered, the fetch continues for each element inside the value.
  • JSON deep copy is implemented by converting the value of a variable to a string and then converting it to an object and assigning it to a new variable.

3) Limitations: The limitations of deep copy are that undefined is ignored, functions cannot be serialized, and objects cannot be looping referenced.

4) Code demonstration

// Deep copy - recursive function method analysis
function deepCopy(obj){
    // Check whether it is a reference data type
    if(typeof obj === 'object') {let result = obj.constructor === Array ? [] : {};

        for(let i in obj){
            result[i] =  typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
        }

        return result;
    }
    // It is a basic data type and returns directly from assignment
    else{
        returnobj; }}// Deep copy - recursive function method instance
let c = {
    name:'Joe'.age:12.like: ['Play basketball'.'Play badminton'.'Do Tai Chi']}let d = deepCopy(c);

c.name = 'bill';
c.like[0] = 'Play table tennis';
console.log(c);
/ * * {name: 'bill', age: 19, like: [' table tennis', 'to play badminton,' tai chi ']} * /
console.log(d);
/ * * {name: 'zhang' age: 19, like: [' play basketball, play badminton, 'tai chi']} * /
Copy the code
// deep copy -JSON function method instance
let c = {
    name: 'Joe'.age: 19.like: ['Play basketball'.'singing'.'dancing']}let d = JSON.parse(JSON.stringify(c));

// Note: JSON functions cannot copy regular expressions, dates, method functions, etc

c.name = 'bill';
c.like[0] = 'Play table tennis';

console.log(c);
/ * * {name: 'bill', age: 19, like: [' table tennis', 'sing', 'dancing']} * /
console.log(d);
/ * * {name: 'zhang' age: 19, like: [' basketball ', 'sing', 'dancing']} * /
Copy the code

As you can see from the code above, the deep-copy data is independent and does not change with the source object. This is a deep copy. However, it is worth noting that in our normal development, we use more recursive functions for deep copy, because recursive function methods are a little more flexible. However, the JSON function method has many limitations. Regular expressions, dates, and method functions cannot be copied in deep copy.

Front end and stack: function call stack

In our normal development, we often write a lot of functions, and that function is actually a call stack during execution. Let’s demonstrate this with a piece of code.

const func1 = () = > {
    func2();
    console.log(3);
}

const func2 = () = > {
    func3();
    console.log(4);
}

const func3 = () = > {
	console.log(5);
}

func1(); / / 5 4 3
Copy the code

By now, many of you are probably thinking about the order in which the entire code should be executed. Let me show you a picture.

As we all know, JavaScript execution environments are single-threaded. The so-called single thread means that only one task can be completed at a time. If there are multiple tasks, they must be queued. Only when the first task is completed can the next task be executed, and so on. As shown in the figure above, every time a function is called, if there is a new function in it, it is added to the call stack and executed after all the tasks are filled.

The function call stack is a typical stack data structure, following the last in, first out principle. When func1, func2, and func3 are placed on the call stack, following the last in, first out principle, the contents of func3 will be executed first, then func2, then func1. This is the function call stack.

Write at the end

So much for the use of the stack in the front end! The stack is ubiquitous in our normal development, and almost every program we write uses the function call stack. And in the front-end interview, the interviewer also likes to ask deep copy and shallow copy, we can review and practice this knowledge.

If you do not understand or wrong places, please also chat with me or add my wechat correction ~

  • Public id: Monday Laboratory
  • WeChat: MondayLaboratory

If this article is useful to you, please click Star