Detailed explanation of the difference between value passing and reference passing in JS

This article will give you a detailed understanding of the difference between value and reference passing in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In JavaScript, you can pass by value and reference. The main difference between the two is that pass-by-value occurs when assigning a primitive type, whereas pass-by-reference occurs when assigning an object. Take a closer look below.

1. Understand basic types and objects

JavaScript provides 2 data types: Basic types and objects.

The basic types are number, boolean, string, symbol,null,undefined.

// 基本类型
const number = 10;

const bool = false;

const str = 'Hello!';

const missingObject = null;

const nothing = undefined;

The second category is objects, ordinary objects, arrays, functions, etc. are all objects.

// Objects
const plainObject = {
  prop: 'Value'
};

const array = [1, 5, 6];

const functionObject = (n1, n2) => {
  return n1 + n2;
};

In other words, any value that is not a primitive type is an object.

2. Pass by value

The simple rule of pass by value is that all basic types in JS are passed by value, it’s that simple.

Passing by value means that every time a value is assigned to a variable, a copy of the value is created, every time.

As an example, suppose we have two variables a and b:

let a = 1;
let b = a;

b = b + 2;

console.log(a); // 1
console.log(b); // 3

The first statement declares a variable a and assigns the value to 1.

The second statement declares a variable b and assigns the value of a to it.

Finally, b = b 2 increases by 2 and becomes 3. The b variable changes, and the change does not affect the value of a.

3. Pass by reference

The method of passing by reference is different from passing by value.

When an object is created, a reference to the object is obtained. If two variables hold the same reference, changes to the object will be reflected in both variables.

Please look at the following code:

let y = x;

y.push(2);

console.log(x); // [1, 2]
console.log(y); // [1, 2]

First statementlet x =[1]Create An array, define a variable x, and initialize the variable with a reference to the created array.

Then let y = xdefine a variable y and initialize y using the reference stored in the x variable , which is a pass-by-reference.

yChange the array through y.push(2). Because the x and y variables refer to the same array, this change is reflected in both variables.

Note: For simplicity, I say variables contain references to objects. But strictly speaking, the value contained in a variable in JavaScript is a reference to an object.

[Recommended learning: javascript advanced tutorial]

4. Comparison between value transfer and reference transfer

In comparing objects It is important to understand the difference between values ​​and references.

When using the strict comparison operator ===, two variables are equal if their values ​​are the same. All comparisons below are equal

const one = 1;
const oneCopy = 1;

console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

one and oneCopy have the same value 1. When both operands are 1, the operator === evaluates to true.

But the comparison operators === work differently when comparing references. 2 references are only equal if they refer to the exact same object.

ar1 and ar2 hold references to different array instances:

const ar1 = [1];
const ar2 = [1];

console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false

const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

ar1 and ar2References an array with the same structure, but the calculation result of ar1 === ar2 is false, because ar1 and ar2 refer to different array object.

The comparison operator returns true only when comparing references pointing to the same object: ar1 === ar11 or ar1 === ar1.

5. Summary

In JavaScript, primitive types are passed as values: meaning that every time a value is assigned, a copy of that value is created.

On the other hand, objects (including ordinary objects, arrays, functions, and class instances) are references. If an object is modified, all variables that reference it will see the changes.

Comparison operators distinguish between comparison values ​​and references. 2 variables holding a reference are equal only if they refer to the exact same object, however, 2 variables holding a value are equal as long as the variable has the same 2 values ​​(from a variable, a literal, etc.), no matter where the value comes from. The variables are equal.

Original address: https://dmitripavlutin.com/value-vs-reference-javascript/

Author: Ahmad shaded

Translation address: https:/ /segmentfault.com/a/1190000039761445

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Detailed explanation of the difference between value passing and reference passing in JS. For more information, please follow other related articles on the PHP Chinese website!