Built-in JS types

The JavaScript data types are shown below

Of these, the first seven are base types, and the last (Object) is the reference type, which you should focus on because it is the most frequently used data type in your daily work and requires the most technical attention

  • JavaScript has eight data types, including seven basic data types: Undefined, Null, Boolean, Number, String, Symbol (new in ES6 for unique values), and BigInt (new in ES10).

  • One reference data type — Object (which is essentially an unordered set of name-value pairs). Function, Array, Date, etc. JavaScript does not support any mechanism for creating custom types, and all values will ultimately be one of the eight data types mentioned above.

    Reference data types: Object (including ordinary Object -Object, Array Object -Array, regular Object -RegExp, Date Object -Date, Math Function -Math, Function Object -Function)

Here, I’d like you to focus on the following two points, because the various JavaScript data types end up in different memory after initialization, so the above data types can be roughly divided into two types of storage:

  • Primitive data types: Base data types are stored in stack memory, and when referenced or copied, an identical variable is created. The data occupies a small space and is fixed in size. It is frequently used data, so it is stored on the stack.

  • Reference data types: Reference types are stored in heap memory. They store addresses. Multiple references refer to the same address. Occupy large space, size is not fixed. The reference data type stores a pointer on the stack to the starting address of the entity in the heap. When the interpreter looks for a reference value, it first retrieves its address in the stack and then retrieves the entity from the heap.

How is data stored in JavaScript in memory?

In JavaScript, an assignment of a primitive type copies the value of a variable, while an assignment of a reference type copies the reference address.

During the execution of JavaScript, there are three main types of memory space: code space, stack space, and heap space. The code space is mainly used to store executable code. Data values of primitive types (Number, String, Null, Undefined, Boolean, Symbol, BigInt) are directly stored in the “stack”, and values of reference types (Object) are stored in the “heap”. So in the stack space (execution context), primitive types store the value of a variable, and reference types store its address in the “heap space”. When JavaScript needs to access that data, it accesses it through the reference address in the stack, which is equivalent to one more hand-passing process.

During compilation, if the JavaScript engine detects a closure, it also creates a “closure(fn)” object in the heap space (this is an internal object that JavaScript cannot access) to hold variables in the closure. So variables in closures are stored in “heap space.”

JavaScript engine needs to use the stack to maintain the state of the context during program execution. If the stack space is too large, all the data will be stored in the stack space, which will affect the efficiency of context switch, and then affect the efficiency of the entire program execution. In general, the stack space is not set too large and is mainly used to store small data of primitive types. Reference data takes up a lot of space, so this kind of data will be stored in the heap, the heap space is large, can store a lot of large data, but the disadvantage is that allocating memory and reclaim memory will take a certain amount of time. Hence the need for both “stack” and “heap” Spaces.

Title one: Fresh out of the woods

let a = { name: 'lee', age: 18 } let b = a; console.log(a.name); // First console b.name = 'son'; console.log(a.name); // Second console console.log(b.name); // The third consoleCopy the code

The name of the first console is Lee. There should be no doubt. B = son; b = son; b = son; b = son; b = son The other one is changing with it.

You can tap directly into the Chrome console to understand this part of the concept. Let’s look at another piece of code, which is a slightly more complex object property change problem.

Topic two: Getting on the good side

let a = { name: 'Julia', age: 20 } function change(o) { o.age = 24; o = { name: 'Kath', age: 30 } return o; } let b = change(a); Console. log(b.age); // Note that there is no new; console.log(b.age); // First console console.log(a.age); // The second consoleCopy the code

{name: “Kath”, age: 30}} {name: “Kath”, age: 30}} The result of the second console is 24, and the final print result of A is {name: “Julia”, age: 24}.

Is it a little different than you expected? The thing to notice here is that function and return bring something different.

The reason is that the function passes in o, passing the memory address of the object in the heap. Calling O.age = 24 (line 7) does change the age property of object A; But the return on line 12 turns o into another memory address, storing {name: “Kath”, age: 30}, and finally returning b as {name: “Kath”, age: 30}. If line 12 is removed, b returns undefined