Understand JavaScript’s value passing and reference passing and pull out deep and shallow copies

Before we begin, let’s look at data types: primitive (also known as primitive data types) and reference types

  • Primitive type (undefined, Null, Boolean, Number, String)
  • Reference types (Array, Function, Object)

So, what’s the difference between a primitive type and a reference type?

Primitive types are assigned by value. A variable is assigned to another variable, in effect making a copy of the corresponding value, and then assigning the value to the new variable. We call this value passing

Reference type assignments are passed by reference. When a variable is assigned to another reference type, it records only one memory address where the specific data is stored. Note that variables pointing to primitive data types contain data, whereas variables pointing to non-primitive data types do not themselves contain data.

// Value type let a = 1 let b = a a = 5 console.log(b) // 1Copy the code

Completely independent copies, non-interference, we change the value of A, b is not affected.

Function change(person) {person. Age = 25 return person} let alex = {age: 30}; let changedAlex = change(alex) console.log(alex) // { age: 25 } console.log(changedAlex) // { age: 25 }Copy the code

Objects are passed by reference, not by value. That is, the variable assignment just passes the address, alex and changedAlex pointing to the same array. If we update alex, the changedAlex will also be affected.

variable address object
alex # 001 age: 30
changedAlex # 001
* * *

Reference reassignment

If we reassign an already assigned object, it will contain the new data or reference address.

var obj = { a: '111' }
obj = { b: '222' }
console.log(obj) // { b: '222' }
Copy the code

Obj changes from pointing to the first object to pointing to the second object

variable address object
obj # 001 a: ‘111’
# 002 b: ‘222’

If an object is not pointed to by any variable, like the first object (address #001), the JavaScript engine’s garbage collection mechanism destroys the object and frees memory.

In the reference type code above, Alex and changedAlex point to the same array. So how do we keep him from changing? This uses deep copy

function change(person) {
    var newPersonObj = JSON.parse(JSON.stringify(person));
    newPersonObj.age = 25;
    return newPersonObj;
}
var alex = {
    name: 'Alex',
    age: 30
};
var alexChanged = change(alex);
console.log(alex); // { name: 'Alex', age: 30 }
console.log(alexChanged); // { name: 'Alex', age: 25 }
Copy the code

Practice is the mother of wisdom

function changeAgeAndReference(person) { person.age = 25; person = { name: 'John', age: 50 }; return person; } var personObj1 = { name: 'Alex', age: 30 }; var personObj2 = changeAgeAndReference(personObj1); console.log(personObj1); // -> output? console.log(personObj2); // -> output?Copy the code

The answer is in the comments