We can make a function more readable by passing it a single object instead of independent parameters. Every time we call this function, we can see what each parameter means by its key on that object. Show
In this article, we are going to see how javascript pass by reference or value works and the difference between the two methods. Table of Contents
Introduction to javascript pass by reference and pass by valueBefore diving into javascript pass by reference or pass by value functions, it is important to understand the difference between primitives and objects. Primitive values: These are the most basic values one can think of, which includes, undefined, null, boolean, string, and numbers. Primitive values are passed by value in javascript Whereas all objects (including functions) are passed by reference in javascript. Let us understand what pass by reference and pass by value is before looking at examples. Javascript pass by reference:In Pass by Reference, a function is called by directly passing the reference/address of the variable as the argument. Changing the argument inside the function affects the variable passed from outside the function. In Javascript objects and arrays are passed by reference. //javascript pass by reference function callByReference(varObj) { console.log("Inside Call by Reference Method"); varObj.a = 100; console.log(varObj); } let varObj = { a: 1 }; console.log("Before Call by Reference Method"); console.log(varObj); callByReference(varObj) console.log("After Call by Reference Method"); console.log(varObj); }OutputBefore Call by Reference Method {a: 1} Inside Call by Reference Method {a: 100} After Call by Reference Method {a: 100}Javascript pass by value:In javascript pass by value, the function is called by directly passing the value of the variable as the argument. Therefore, even changing the argument inside the function doesn’t affect the variable passed from outside the function. It is important to note that in javascript, all function arguments are always passed by value. That is, JavaScript copies the values of the passing variables into arguments inside of the function. //javascript pass by value function square(x) { x = x * x; return x; } var y = 10; var result = square(y); console.log(y); // 10 -- no change console.log(result); // 100Code ExplanationAs you can see here,once we have passed the variable y to the function square, the value of y is copied to the variable x by javascript (hence pass by value). Note that passing a functional argument by value does not have an impact on the original variable itself, as when you create a new variable (y in this case) and assign it to the value of another variable (x), another spot in memory separate from the original variable is created and a copy of (x) is placed in the new variables spot in memory. So, by value copies the value of the original variable (a) into two separate spots in memory. On the other hand, in this case had we passed variable y by reference, then its value would have changed to 100, as in pass by reference, the function takes the original variable itself and uses it in the function rather than using a copy of the variable. Parting Words:On comparing both functions, namely javascript pass by reference, pass by value, we can see that ALL objects interact by reference in Javascript, so when setting equal to each other or passing to a function they all point to the same location so when you change one object you change them all. This is a stark difference compared to pass by value, wherein the pass by value function copies the value into two separate spots in memory effectively making them entirely separate entities despite one initially being set equal to the other. Each argument index can also be set or reassigned: arguments[1] = 'new value'; Non-strict functions that only has simple parameters (that is, no rest, default, or destructured parameters) will sync the new value of parameters with the arguments object, and vice versa: function func(a) { arguments[0] = 99; console.log(a); } func(10); function func2(a) { a = 99; console.log(arguments[0]); } func2(10); Non-strict functions that are passed rest, default, or destructured parameters will not sync new values assigned to parameters in the function body with the arguments object. Instead, the arguments object in non-strict functions with complex parameters will always reflect the values passed to the function when the function was called. function funcWithDefault(a = 55) { arguments[0] = 99; console.log(a); } funcWithDefault(10); function funcWithDefault2(a = 55) { a = 99; console.log(arguments[0]); } funcWithDefault2(10); function funcWithDefault3(a = 55) { console.log(arguments[0]); console.log(arguments.length); } funcWithDefault3(); This is the same behavior exhibited by all strict-mode functions, regardless of the type of parameters they are passed. That is, assigning new values to parameters in the body of the function never affects the arguments object, nor will assigning new values to the arguments indices affect the value of parameters, even when the function only has simple parameters.
Note: You cannot write a "use strict"; directive in the body of a function definition that accepts rest, default, or destructured parameters. Doing so will throw a syntax error. |