[Javascript] Pass by Reference or Pass by Value?

Connection between variable, value and memory

A variable is just a pointer to a location in memory. When you create a variable, your program allocates a space in memory, remembers it so that you can assign value to it and retrieve the value when you want.

The 'reference' in 'pass-by-reference' refers to memory location.
The 'value' in 'pass-by-value' refers to the actual value in the memory location.

Why does this matter?

When you use pass-by-value, it means that any argument you pass to a function only have their values copied and transferred to parameters inside the function definition. In other words, the parameters inside the function are not the same as the variables you passed in as arguments. When I say the 'same', even though their value is same, if you change one of them, the other will not change (if it is pass-by-reference, the other will change).

Below is an example of pass-by-value:

// A pseudo-code example of pass-by-value
function funky(number) {
    number = 7;
}
num = 5;
funky(num);
print num; // 5

An example of pass-by-reference is:

// A pseudo-code example of pass-by-reference
function funky(number) {
    number = 7;
}
num = 5;
funky(num);
print num; // 7

When does JavaScript do pass-by-reference and pass-by-value?

  1. Pass-by-value if data type is primitive (string, boolean, numbers, null and undefined).
  2. Pass-by-reference if any sort of complex data type (objects & arrays)
// primitive values are pass-by-value
function funky(number) {
    number+= 7;
}
let num = 5;
funky(num);
console.log(num); // 5


// non-primitive values are pass-by-reference
function funky(arr, obj) {
    arr.push(4);
    obj.food = 'apple pie';
}
let myArr = [1,2,3];
let myObj = { name: 'Tony', food: 'pizza' };
funky(myArr, myObj);
console.log(myArr); // [1,2,3,4]
console.log(myObj); // { name: 'Tony', food: 'apple pie' }


So this is it? No. Memory Location problems.

Unfortunately no. Despite what I explained, you cannot just do anything you want to an object or array inside a function and expect the original passed-in variable to modified as well.

The reason is memory locations. If you manipulate the individual elements or properties of an array or object, then the reference to that variable does not change; meaning the connection between the argument and parameter stays intact since they both still point to the same location in memory. An example of a array manipulation is a push(..) method.

However, in JavaScript, if you assign a new value to a variable, a new memory location is assigned to that variable with the given value. Therefore, when you assign an entirely new array to an array parameter in a function, the parameter points to a new memory location, while the original array variable outside the function still points to the original memory location. Another way to think of this is that the link between outside argument and inside parameter is broken, so the changes inside the function will not affect the arguments outside the function. Examples of this include concat, map and filter method in array.

// example changing memory locations, thereby breaking reference link
function funky(arr, obj) {
    arr = [-1,-2,-3];
    obj = { age: 12 };
    console.log(arr); // [-1,-2,-3]
    console.log(obj); // { age: 12 }
}
let myArr = [1,2,3];
let myObj = { name: 'Tony', food: 'pizza' };
funky(myArr, myObj);
console.log(myArr); // [1,2,3]
console.log(myObj); // { name: 'Tony', food: 'pizza' }


Resources

https://medium.com/@TK_CodeBear/javascript-arrays-pass-by-value-and-thinking-about-memory-fffb7b0bf43


Comments

Popular posts from this blog

[Redis] Redis Cluster vs Redis Sentinel

[Unit Testing] Test Doubles (Stubs, Mocks....etc)

[Node.js] Pending HTTP requests lead to unresponsive nodeJS