Passing by reference in javascript

Understanding JavaScript Pass-By-Value

Summary: this tutorial explains how JavaScript pass-by-value works and gives you some examples of passing primitive and reference values to a function.

Before going forward with this tutorial, you should have good knowledge of the primitive and reference values, and the differences between them.

JavaScript pass-by-value or pass-by-reference

In JavaScript, all function arguments are always passed by value. It means that JavaScript copies the values of the variables into the function arguments.

Any changes that you make to the arguments inside the function do not reflect the passing variables outside of the function. In other words, the changes made to the arguments are not reflected outside of the function.

If function arguments are passed by reference, the changes of variables that you pass into the function will be reflected outside the function. This is not possible in JavaScript.

Pass-by-value of primitives values

Let’s take a look at the following example.

function square(x) < x = x * x; return x; > let y = 10; let result = square(y); console.log(result); // 100 console.log(y); // 10 -- no changeCode language: JavaScript (javascript)

First, define a square() function that accepts an argument x . The function assigns the square of x to the x argument.

Next, declare the variable y and initialize its value to 10 :

Then, pass the y variable into the square() function. When passing the variable y to the square() function, JavaScript copies y value to the x variable.

After that, the square() function changes the x variable. However, it does not impact the value of the y variable because x and y are separate variables.

Finally, the value of the y variable does not change after the square() function completes.

If JavaScript used the pass-by-reference, the variable y would change to 100 after calling the function.

Pass-by-value of reference values

It’s not obvious to see that reference values are also passed by values. For example:

let person = < name: 'John', age: 25, >; function increaseAge(obj) < obj.age += 1; > increaseAge(person); console.log(person);Code language: JavaScript (javascript)

First, define the person variable that references an object with two properties name and age :

Next, define the increaseAge() function that accepts an object obj and increases the age property of the obj argument by one.

Then, pass the person object to the increaseAge() function:

Internally, the JavaScript engine creates the obj reference and make this variable reference the same object that the person variable references.

After that, increase the age property by one inside the increaseAge() function via the obj variable

Finally, accessing the object via the person reference:

It seems that JavaScript passes an object by reference because the change to the object is reflected outside the function. However, this is not the case.

In fact, when passing an object to a function, you are passing the reference of that object, not the actual object. Therefore, the function can modify the properties of the object via its reference.

However, you cannot change the reference passed into the function. For example:

let person = < name: 'John', age: 25, >; function increaseAge(obj) < obj.age += 1; // reference another object obj = < name: 'Jane', age: 22 >; > increaseAge(person); console.log(person); Code language: JavaScript (javascript)

< name: 'John', age: 26 >Code language: CSS (css)

In this example, the increaseAage() function changes the age property via the obj argument:

and makes the obj reference another object:

However, the person reference still refers to the original object whose the age property changes to 26 . In other words, the increaseAge() function doesn’t change the person reference.

If this concept still confuses you, you can consider function arguments as local variables.

Summary

• JavaScript passes all arguments to a function by values.
• Function arguments are local variables in JavaScript.

Источник

Javascript pass by reference or value

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 value

Before diving into javascript pass by reference or pass by value functions, it is important to understand the difference between primitives and objects.

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); > 

Output

Before Call by Reference Method Inside Call by Reference Method After Call by Reference Method

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); // 100 

Code Explanation

As 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.

Источник

Pass by Value and Pass by Reference in Javascript

In this tutorial let us learn the difference between Pass by Value and Pass by Reference in JavaScript. The primitive data types are passed by value, while objects are passed by reference.

Types in Javascript

There are seven primitive types in JavaScript. They are string, number, bigint, boolean, undefined, symbol, and null.

Everything else is Object in Javascript. Arrays, Objects, functions & classes etc are all Objects.

Primitive types are value types. While objects are Reference types.

How Value & Reference types store values

The primary difference between value types & Reference types is how they are stored in memory.

The variables of Value types or primitive types store the values in the variable itself.

But the reference type variables do not store the value. But they store the reference to the memory location where the value is stored.

Both variables num1 & obj1 gets a memory location reserved for them.

num1 is a value type. Its value 10 is directly stored in that location

But in the case of obj1 , the value is not stored in that location. It stores elsewhere in the memory and stores the address of that location in obj1’s memory location. The obj1 does not store the value.

This is the only difference between the value type & Reference types in Javascript. But this makes a crucial difference when we copy variables.

There are two memory locations. One is stack (on the left) & the other one he heap (on the right). Javascript stores the primitive value in a stack because its size is small and does not change. But the size of an object is dynamic and can change. Hence it stores it in a separate heap memory location

How Value Types are copied

Now, let us see what happens when we copy one value type variable to another variable.

Источник