Deeply understand JavaScript's value passing and reference passing

JavaScript has 5 basic data types, namely: Boolean, null, undefined, String and Number. These basic types are passed through values ​​when assigning values. It is worth noting that there are three other types: Array, Function, and Object, which are passed by reference. From the underlying technical point of view, all three of them are objects.

Basic data types

If a basic data type is bound to a variable, we can assume that the variable contains the value of this basic data type.

var x = 10;
var y = 'abc';
var z = null;

When we use = to assign these variables to another variable, we actually copy the corresponding value and assign it to the new variable. We call it value pass.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
(x, y, a, b) // 10, 'abc', 10, 'abc'

a and x both contain 10, b and y both contain 'abc', and they are completely independent copies and do not interfere with each other. If we change the value of a, x will not be affected.

var x = 10;
var y = 'abc';
var a = x;
var b = y;
a = 5;
b = 'def';
(x, y, a, b); // 10, 'abc', 5, 'def'

Object

If a variable is bound to a non-base data type (Array, Function, Object), then it only records a memory address, which stores specific data. Note that variables pointing to basic data types are equivalent to containing data, while variables pointing to non-primary data types themselves do not contain data.

The object is created in memory, and when we declare arr = [], we create an array in memory. arr records the address of the memory.

var arr = []; // (a)
(1); // (b)

After (a), an empty array object is created in memory with the memory address #001 and arr points to this address.

After execution (b), there is an additional element in the array object, but the address of the array still does not change, and arr does not change either.

Reference pass

Objects are passed by reference, not by values. That is, variable assignment will only pass the address.

var reference = [1];
var refCopy = reference;

reference and refCopy point to the same array. If we update the reference, refCopy will also be affected.

(2);
(reference, refCopy); // [1, 2], [1, 2]

Re-assignment

If we reassign a variable that has been assigned, it will contain new data or reference address.

var obj = { first: ''};
obj = { second: ''};

obj changes from pointing to the first object to pointing to the second object.

If an object is not pointed to by any variable, just like the first object (address #001), the JavaScript engine's garbage collection mechanism will destroy the object and free memory.

== and ===

For variables of reference type, == and == will only determine whether the referenced address is the same, but will not determine whether the properties and values ​​in the object are the same. Therefore, if two variables point to the same object, true is returned.

var arrRef = ['Hi!'];
var arrRef2 = arrRef;
(arrRef === arrRef2); // true

If it is a different object, if the same attributes and values ​​are included in time, false will also be returned.

var arr1 = ["Hi!"];
var arr2 = ["Hi!"];
(arr1 === arr2); // false

If you want to tell if two different objects are really the same, an easy way is to convert them into strings and then judge.

var arr1str = (arr1);
var arr2str = (arr2);
(arr1str === arr2str); // true

Another method is to recursively judge the value of each property until the base type position, and then determine whether it is the same.

Function parameters

When we pass basic type data into a function, the function will copy and assign this data to the function's parameter variable.

var hundred = 100;
var two = 2;
function multiply(x, y) {
 return x * y;
}
var twoHundred = multiply(hundred, two);

The value of hundreds is copied to the variable x, and the value of two is copied to the variable y.

Pure functions

For a function, given an input, return a unique output. In addition, there will be no collateral impact on the external environment. We have the opportunity to call this function a pure function. All variables defined inside the function are garbage collected after the function returns.

However, if the input of the function is an object (Array, Function, Object), then the incoming is a reference. Operations on this variable will affect the original object. Such programming techniques will have collateral effects, and the logic of the code becomes less logical and readable.

Therefore, many array functions, such as sum, are implemented in the form of pure functions. Although their parameters are array variables, they prevent the original array from being changed by deep copying and assigning values ​​to a new variable and then operating on the new array.

Let's take a look at an example:

function changeAgeImpure(person) {
  = 25;
 return person;
}
var alex = {
 name: 'Alex',
 age: 30
};
var changedAlex = changeAgeImpure(alex);
(alex); // { name: 'Alex', age: 25 }
(changedAlex); // { name: 'Alex', age: 25 }

In the non-pure function changeAgeImpure, update the age of the object person and return it. The original alex object was also affected, and the age was updated to 25.

Let's see how to implement a pure function:

function changeAgePure(person) {
 var newPersonObj = ((person));
  = 25;
 return newPersonObj;
}
var alex = {
 name: 'Alex',
 age: 30
};
var alexChanged = changeAgePure(alex);
(alex); // { name: 'Alex', age: 30 }
(alexChanged); // { name: 'Alex', age: 25 }

We change the object to a string and then by converting the string back to the object. This operation will generate a new object.

A simple interview question

Value passing and reference passing are often asked in interviews, so let’s try to answer the following code how to output it:

function changeAgeAndReference(person) {
  = 25;
 person = {
 name: 'John',
 age: 50
 };
 return person;
}
var personObj1 = {
 name: 'Alex',
 age: 30
};
var personObj2 = changeAgeAndReference(personObj1);
(personObj1); // -> ?
(personObj2); // -> ?

Summarize

The above is the value transfer and reference transfer of JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!