Discussion on whether values ​​in JavaScript are passed by value or by reference_javascript skills

I encountered an interesting question recently: "Are values ​​in JS passed by value or by reference?"

Before analyzing this problem, we need to understand what is call by value and what is call by reference. In computer science, this part is called Evaluation Strategy. It determines how values ​​are passed between variables and between actual parameters and formal parameters when calling functions.

Pass by value VS. Pass by reference

Call by value is the most commonly used evaluation strategy: the formal parameters of a function are copies of the actual parameters passed when called. Changing the value of the formal parameter does not affect the actual parameter.

When passing by reference (call by reference), the formal parameters of the function receive implicit references to the actual parameters, rather than copies. This means that if the values ​​of function parameters are modified, the actual parameters will also be modified. At the same time both point to the same value.

Passing by reference makes it more difficult to trace function calls and sometimes causes subtle bugs.

Passing by value requires a clone every time, so the performance is lower for some complex types. Both methods of passing values ​​have their own problems.

Let’s first look at a C example to understand the difference between passing by value and reference:

Copy code The code is as follows:

void Modify(int p, int * q)
{
p = 27; // Pass by value – p is a copy of the actual parameter a, only p is modified
*q = 27; // q is a reference to b, both q and b are modified
}
int main()
{
int a = 1;
int b = 1;
Modify(a, &b); // a is passed by value, b is passed by reference,
// a has not changed, b has changed
Return(0);
}

Here we can see:

a => When p is passed by value, modifying the value of formal parameter p does not affect the actual parameter a, which is just a copy of a.
b => q is passed by reference. Modifying the value of the formal parameter q also affects the value of the actual parameter b.
Explore how JS values ​​are passed
The basic types of JS are passed by value.

Copy code The code is as follows:

var a = 1;
function foo(x) {
x = 2;
}
foo(a);
console.log(a); // Still 1, not affected by x = 2 assignment

Let’s look at the object again:

Copy code The code is as follows:

var obj = {x : 1};
function foo(o) {
o.x = 3;
}
foo(obj);
console.log(obj.x); // 3, modified!

Explain that o and obj are the same object, and o is not a copy of obj. So it's not passed by value. But does this mean that JS objects are passed by reference? Let’s look at the following example:

Copy code The code is as follows:

var obj = {x : 1};
function foo(o) {
o = 100;
}
foo(obj);
console.log(obj.x); // Still 1, obj has not been modified to 100.

If it is passed by reference, modifying the value of formal parameter o should affect the actual parameter. But modifying the value of o here does not affect obj. Therefore objects in JS are not passed by reference. So how is the value of the object transferred in JS?

call by sharing

To be precise, basic types in JS are passed by value, and object types are passed by sharing (call by sharing, also called passing by object and passing by object sharing). It was first proposed by Barbara Liskov in the GLU language in 1974. This evaluation strategy is used in Python, Java, Ruby, JS and other languages.

The key point of this strategy is: when calling a function to pass parameters, the function accepts a copy of the object argument reference (neither a copy of the object passed by value, nor an implicit reference passed by reference). The difference between it and pass by reference is that the assignment of function parameters in shared transfer will not affect the value of the actual parameter. As in the following example, the value of obj cannot be modified by modifying the value of the formal parameter o.

Copy code The code is as follows:

var obj = {x : 1};
function foo(o) {
o = 100;
}
foo(obj);
console.log(obj.x); // Still 1, obj has not been modified to 100.

However, although the reference is a copy, the object referenced is the same. They share the same object, so modifying the property values ​​of the formal parameter object will also affect the property values ​​of the actual parameters.

Copy code The code is as follows:

var obj = {x : 1};
function foo(o) {
o.x = 3;
}
foo(obj);
console.log(obj.x); // 3, modified!

For object types, since the object is mutable, modifying the object itself will affect the references and reference copies that share the object. As for basic types, since they are all immutable, there is no difference between passing by sharing and passing by value (call by value). Therefore, JS basic types conform to both passing by value and passing by sharing.

Copy code The code is as follows:

var a = 1; // 1 is number type, immutable var b = a; b = 6;

According to the pass-by-share evaluation strategy, a and b are two different references (b is a reference copy of a), but refer to the same value. Since the basic type number 1 here is immutable, there is no difference between passing by value and passing by sharing.

Immutable nature of basic types

Basic types are immutable (immutable), only objects are mutable (mutable). For example, the numerical value 100, Boolean values ​​true, false, modify these values ​​(for example, change 1 to 3, change true to 100 ) has no meaning. What is easier to misunderstand is string in JS. Sometimes we try to "change" the contents of a string, but in JS, any operation that appears to "modify" a string value actually creates a new string value.

Copy code The code is as follows:

var str = "abc";
str[0]; // "a"
str[0] = “d”;
str; // Still "abc"; assignment is invalid. There is no way to modify the content of the string

But objects are different, objects are mutable.

Copy code The code is as follows:

var obj = {x : 1};
obj.x = 100;
var o = obj;
o.x = 1;
obj.x; // 1, modified
o = true;
obj.x; // 1, will not change due to o = true

Here we define the variable obj, the value is object, and then set the value of the obj.x attribute to 100. Then define another variable o, whose value is still the object object. At this time, the values ​​of the two variables obj and o point to the same object (share a reference to the same object). Therefore, modifying the content of the object will affect both obj and o. But the object is not passed by reference. The value of o is modified by o = true, which will not affect obj.