In JavaScript we are presented with two types of data types. Primitive types and object types. One of the main distinctions between the two is that one is immutable and the other isn't. But another important distinction between them is that objects are passed by reference while for all practical purposes primitive data types are pass by value.
As far as basic concepts go this isn't too hard to grasp. Basically any time you're assigning a variable to another variable or even passing a variable as an argument to a function parameter. You're creating a new space in memory and then creating a copy of the value and assigning it to that space. But rather than explain it let's use some actual code:
function passValue(b) {
b++;
console.log(`Inside the function: b = ${b}`);
}
let a = 2;
console.log(`Before the function: a = ${a}`);
passValue(a);
console.log(`After the function: a =${a}`);
The Output:
Before the function: a = 2
Inside the function: b = 2
After the function: a = 2
But when it comes to assigning objects or passing them as arguments to functions things get a little more complex. Lets see a similar example but this time with two arrays:
function passReference(b) {
b[1] = 3;
console.log(`Inside the function: b = ${b`);
}
let a = [2, 0, 0];
console.log(`Before the function: a = ${a}`);
passValue(a);
console.log(`After the function: a =${a}`);
The Output:
Before the function: a = 2, 0, 0
Inside the function: b = 3, 0, 0
After the function: a = 3, 0, 0
So what exactly is happening here? Lets think of our variables as envelopes that hold a value, envelope 'A' and envelope 'B'. When we assign them a value lets think of it in terms of us taking out a sheet of paper writing a value on it and placing it into the envelope. So When we go 'A' = 10. We are writing the number 10 on some paper and placing it into envelope 'A'. When we write 'B' = 'A' we are looking at the paper inside 'A' that says 10 and then we are writing the number '10' on a new sheet of paper and placing it into 'B'. So while both are equal to 10, we can write what ever we want on the paper inside 'A' with out impacting the paper inside 'B'.
Now when it comes to Objects, if we decide to assign an array to envelope 'A'. Instead of writing '[2, 0, 0]' on the sheet of paper we put into envelope 'A', we are instead writing down the address to a P.0 Box where the object's value can be found and putting that inside 'A'. So that means when we go ahead and say 'A' = 'B', we aren't writing the value of the array '[2, 0, 0]' on the new sheet either. Instead we are taking out that sheet of paper inside 'A' and copying down that same P.0 Box address that's on it onto a new sheet of paper and placing it into 'B'.
What this means is that in order to access the elements of the array '[2, 0, 0]' we have to drive all the way to P.0 box and if we decide to modify one of the elements it modifies it for both 'A' and 'B' since they are both pointing towards the the same address. This is essentially what it means to pass a value by reference in javascript but instead of assigning both variables the value of a P.0 Box where the object can be find you're assigning them the value of a memory address on your computer where the object is.
Top comments (0)