This is the 5th day of my participation in the August Challenge. Check out the details of the August Challenge

preface

Last time we looked at how variables in JavaScript are stored in memory, and there are two types of memory: stack memory and heap memory.

Let’s start with a question that leads to our topic “Basic data and reference Types” and begin our exploration.

Can strings be changed?

First, let’s review the basic and reference data types:

  • Basic data types: number, string, Boolean, NULL, undefined, and Symbol and BigInt in the new ES6 syntax specification
  • Reference data types: object (plain object, array object, re object, Date object, Math, Date), function

The primitive data types mentioned above are defined as Primitive values in the ECMAScript standard, which means that the values themselves are immutable.

Even though the standard says so, we should be curious and try to see, can strings be changed?

The way we call the action string is to see if we can change the string, and we can test that by running the following code

var str = 'Dream';
str.toLowerCase(1);
str[0] = 'd';
str.slice(1);
console.log(str); // Dream
Copy the code

The output result is “Dream”, which confirms that we call the string related method and do not modify the original string, but generate a new string based on the original string, which shows the immutability of string, that is, the value of the basic data type cannot be changed.

We continue to call the following code:

str += 'er';
console.log(str); // Dreamer
Copy the code

You notice that the value of STR has changed, does that mean that the standard string itself cannot be changed? Yes? Don’t panic.

Immutable, just to be clear, means that once they’re created, their values can’t change.

var str = 'Dream'; // When this line of code is executed, the entire process allocates a control large enough to hold five strings, and then populates
Copy the code

Let’s combine this picture to illustrate:

You can see that the value of STR is “Dreamer” and the “Dream” is crossed out. The concatenation of strings is the same as modifying the value of the string in the STR variable, so you have to destroy the original string and then save the new string into the STR variable.

Execute STR += ‘er’; After the operation “Dreamer”, you essentially open up another memory space on the stack for storing ‘Dreamer’ and point the variable STR to that space.

How do I understand primitive types versus reference types?

See an article, there said a metaphor, more appropriate to share with you

Think of it as “chain store” and “chain key.

Basic types of

The exchange of variables is equal to opening a new branch in a new place in accordance with the standard of chain stores (unified stores are understood as the same variable content), so that the new store is independent of other old stores and operates independently.

This is essentially access by value.

Reference types

The exchange of variables is equivalent to giving a copy of the key (variable reference address) of an existing store to another owner. At this time, two owners manage a store at the same time, and their behaviors may affect the operation of a store.

This is essentially access by reference. The key is the reference address of the variable.

If the variable

We have seen above that the values of primitive datatypes themselves cannot be changed, whereas the values of reference datatypes can be changed.

How do you understand that? For example, if you use arrays a lot in your work, you can add, delete, check and change arrays.

var arr = [];
arr.push('Joe');
arr.push('bill');
arr.pop();
console.log(arr); // [' zhang SAN ']
Copy the code

copy

When we copy the value of one variable to another, the effect of the base type and reference type is not the same.

Let’s start with the basic types:

var name = 'Dream Chasers';
var name2 = name;
name2 = 'experts';
console.log(name); // Dream chasers
Copy the code

The output is’ dream chaser ‘. Let’s use the picture below to understand

There is a variable name in memory that has a value of dream chasers. If we copy a variable named name2 from name, we will create a new space in stack memory, store the dream chasers, and assign a value to name2. Although the value is the same, we can see from the graph that the two points to the memory space is completely irrelevant. Manipulating the two variables will have no effect.

Reference data types. Let’s take a look at this code

var obj = { name: 'Dream Chasers' };
var obj2 = obj;
obj2.name = 'experts';
console.log(obj.name); / / brick house
Copy the code

When we copy a variable of a reference type, we are actually copying the address on the stack, so obj2 and obj actually point to the actual value of the same heap as obj. So we modify obj2, and the obj variable will be affected, and vice versa.

To compare

When we compare two variables, different types of variables behave differently.

// Basic data type
var name = 'Dream Chasers';
var name2 = 'Dream Chasers';
console.log(name === name2); // true

// Reference the data type
var obj = { name:'Dream Chasers' };
var obj2 = { name:'Dream Chasers' };
console.log(obj === obj2); // false
Copy the code

Comparison between primitive types is performed by comparing their values directly, returning true if the values are equal. The first string of name is the same as the first string of name2.

For reference types, their reference addresses are compared, and although the objects stored in the heap have the same attribute value, they are stored in different storage Spaces, so the comparison value is false.

How to understand the comparison of reference types? In plain English, the object obj, assuming that the memory address stored in the stack is 0x00FF, corresponds to a warehouse key, and the object obj2, assuming that the memory address stored in the stack is 0x11FF, corresponds to the key of another warehouse, which means that your two warehouse keys are different, So the result is false.

Refer to the article

  • JS basic types and reference types
  • Do you really understand variables and types
  • The JavaScript family contains space
  • What is the difference between basic types (values) and complex types (references) in JS?