This content originally appeared on Level Up Coding - Medium and was authored by Ilkin Guluzada
In this post, we’ll look at the differences between passing by value and passing by reference in JavaScript.
0. Personal Point of View on the subject
These concepts were defined long before JavaScript was created, and therefore do not adequately represent the semantics of JavaScript. But, if you still want to apply them to JavaScript, I will try to explain the concepts in terms of JavaScript.
1. Some Definitions
Variable: A symbol with several meanings that refers to a value at a specific position in memory. In most cases, this phrase is far too laden to be used alone when addressing specifics.
Value: Specific bits stored in memory that are referred to by the variable’s symbol.
Memory Location: The place in memory where the value of a variable is kept.
Callee and Caller: A callee is a function that has been called by another function, while a caller is a function that calls another function (the callee).
Formal Parameter: Formal Parameters are the pre-setted values that the function receives when it is called.
Actual Parameter: Actual Parameters are the values that are provided in the function call.
Some Notes:
Variables are values’ pointers.
Reassigning a variable simply changes the value of the reference.
Because each variable has its own pointer, reassigning a variable has no effect on other variables that were pointing at the same object.
2. What is Pass by Value?
The term “pass by value” refers to the creation of a memory copy of the real parameter’s value. For example, the caller and callee have two independent variables with the same value. The consequence of the callee changing the parameter value is not evident to the caller. Don’t worry if you didn’t understand by definition, I will explain it with a code example in a little bit.
3. What is Pass by Reference?
The term “pass-by-reference” refers to passing the reference of an argument in the calling function to the called function’s corresponding formal parameter. Using the reference given in, the called function can change the value of the argument. Again, don’t worry if you didn’t understand by definition, I will give code examples a little later in this article.
4. Is JavaScript a Pass by Value or Pass by Reference?
We have functions in JavaScript and arguments that we feed into those functions. However, it’s not always apparent how JavaScript handles the data you’re giving in. In JavaScript, there is no such thing as “pass by reference” for any variable. All variables and arguments have a value given to them, however the value of an object’s variable is a reference. As a result, if you supply an object and alter its members inside the method, those changes will remain outside of the function. This makes it appear as if it’s a pass-by-reference system. Primitive values like integer, string, and boolean are provided by value, but objects and arrays, as previously stated, are passed by reference.
5. JavaScript Pass by Value example
Let’s say you have 2 integer (primitive data type) variables defined.
var num1 = 1;
var num2 = 2;
Then, let’s say that you define a 3rd integer, num3, and assign num1 to it. Then do a console.log of both num3 and num1. After you do the same thing by assigning num2 to num3.
var num3 = num1;
console.log(num1); //outputs 1
console.log(num3); //also outputs 1
num3 = num2;
console.log(num1); //outputs 2
console.log(num2); //also 2
So, in this code example, nothing is changed on num1 and num2 as we just assigned them to another variable, num3, in other word we passed their value to num3 and num3 has now new pointer value in the memory and it has nothing to do with num1 and num2. Let’s dive into more. Now, we will again assign num1 to num3 and change the value of num3 and console.log again.
num3 = num1;
num3 = 3;
console.log(num1); //outputs 1
console.log(num3); //outputs 3
So, here we see both num1 and num3 values are different while we only assigned num3 to num1 before. This shows that both variable are pointing to the different values in the memory, thus changing value in one of them doesn’t do anything to another.
6. JavaScript Pass by Reference example
Let’s say you have 2 objects defined:
var obj1 = {name: "Vəndam"};
var obj2 = {name: "Tofiy"};Then, let’s say that you define 3rd object, obj3 and assign obj1 to it. Then do a console.log of both obj3 and obj1. After you do same thing by assigning obj2 to obj3.
var obj3 = obj1;
console.log(obj1); //outputs {name: "Vəndam"}
console.log(obj3); //also outputs {name: "Vəndam"}
obj3 = obj2;
console.log(obj2); //outputs {name: "Tofiy"}
console.log(obj3); //also outputs {name: "Tofiy"}
So, in this code example, nothing is changed on obj1 and obj2 as we just assigned them to another variable, obj3, in other word we passed their reference in the memory to obj3. Let’s dive into more. Now, we will again assign obj1 to obj3 and change the object parameter of obj3 and console.log again.
obj3 = obj1;
obj3.name = "Mürşüd";
console.log(obj1); //outputs {name: "Mürşüd"}
console.log(obj3); //also outputs {name: "Mürşüd"}
So, here we see both obj1 and obj3 object parameter values are changed while we only changed the obj3.name value. This shows that both objects are pointing to the same reference in the memory, thus changing parameter in one of them reflects in another.
7. Conclusion
To conclude, in JavaScript, all variables and arguments have a value given to them, means they are pass by value (Primitive data types) however the value of an object’s variable is a reference, hence compound types in JavaScript are pass by reference.
Pass by Value vs. Pass by Reference | Advance JavaScript Series was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Ilkin Guluzada
Ilkin Guluzada | Sciencx (2021-09-23T16:13:55+00:00) Pass by Value vs. Pass by Reference | Advance JavaScript Series. Retrieved from https://www.scien.cx/2021/09/23/pass-by-value-vs-pass-by-reference-advance-javascript-series/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.