Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

In the world of JS, data types are divided into basic data types and reference data types, due to different data types in the initialization of JS, are stored in different memory, lead to many new to JS students will create some confusion, points not clear the difference between a pass by value and pass by reference and modify will be what kind of impact

Data type and storage mode

JS classifies data types into two categories:

Basic data types: Number, String, Boolean, Null, Undefined, Symbol, BigInt

Reference data types: There is only one Object type, but it is subdivided into Array, Date, Function, RegExp, and so on

Different data type storage methods:

The underlying data type is stored in stack memory, and when it is referenced or copied, an identical variable is created

The reference data type is stored in the heap memory and stores the pointer address. When it is referenced or copied, it creates a pointer to the same pointer address, which is equivalent to sharing the same data. When the data is modified, it is the same data, which is equivalent to all the data pointing to the pointer address are modified data

A lot of you will get confused when you first encounter this concept, so let’s look at two examples just to make sense of it

let str = 'nordon';
let newStr = str;

newStr = 'wy';
console.log(str); // nordon
console.log(newStr); // wy
Copy the code

The two output contents are inconsistent, and the subsequent modification does not affect the original data

The above process is equivalent to creating A file A with the content of Nordon, and then I make A copy of the file to generate A new file B with the same content of NRDON. Then I open the new file B and change its content to WY, and the contents of the two files are different

let obj = {
  name: 'nordon'.age: 18
};

let newObj = obj;
newObj.name = 'wy';
console.log(obj); // { name: 'wy', age: 18 }
console.log(newObj); // { name: 'wy', age: 18 }
Copy the code

Both prints are the same because obj and newObj point to the same memory address

I created A file called **{name: ‘nordon’, age: 18}, then create A quick access link A for file A(Windows all know 😂), then click the quick access link A to open file A, then copy A copy according to the quick access link A, generate A new quick access link B, then open the file through B, change the content to {name: ‘wy’, age: 18}**, since the same file A is opened regardless of the shortcut link, the modified content is shared

let obj = {
  name: 'nordon'.age: 18
};

const changeName = (_obj) = > {
  _obj.name = 'wy';
  _obj = { // _obj reassigns an object
    name: 'hellobike'.age: 5
  };
  return _obj;
}

const newObj = changeName(obj);
console.log(obj); // {name: 'wy', age: 18}
console.log(newObj) // {name: 'hellobike', age: 5}
Copy the code

The result of the two prints is different. According to the first response, the reference data type is passed, so obj should be consistent with newObj, because its pointer to the same address, is shared data

Because when _obj reassigns an object, it assigns a new pointer address to __obj, breaking the previous pointer and creating a new address for it so that it no longer shares the same data as obj passed through the function

If you are still confused by this, you can use the previous example of creating files and quick access links to apply this problem