JavaScript pass by value and ref

In this article, we will be covering all about pass-by-value references and how to use them in JavaScript. Before jumping directly to the pass-by-value references, we will learn about JavaScript and the basics of what exactly pass-by-reference is in this context. So if you are new to all these concepts, don’t worry, we will be covering it right from the fundamentals and will then move to differences. So keep reading.

Introduction

JavaScript is one of the most used languages when it comes to building web applications as it allows developers to wrap HTML and CSS code in it to make web apps interactive. It enables the interaction of users with the web application. It is also used for making animations on websites and has a large community on GitHub. JavaScript has tons of libraries, one of which is React which we will be covering in this article later. 

Applications:

• Building web server and its interactive functions
• Animations and graphics, adding special effects to web components
• Validating forms and exception errors
• Adding behavior and functionalities to web pages

In JavaScript, promises are used to handle asynchronous operations. When dealing with several asynchronous activities, where callbacks might cause callback hell and unmanageable code, they are simple to manage.

Important points to remember in JS:

• It is a scripting language
• It has unstructured code
• It is a programming language
• It is used both client-side and server-side to make web apps interactive
• It is built and maintained by Brendan Eich and the team
• Uses built-in browser DOM
• Extension of JavaScript file is .js

In this post, we’ll look at the differences between passing by value and passing by reference in JavaScript.

Pass by value and ref

Pass By Value: In pass-by-value, the function is called by passing the variable’s value as an argument directly. As a result, any changes made within the function have no impact on the initial value.

Parameters supplied as arguments in Pass by value produce their own copy. As a result, all modifications made within the function are applied to the cloned value rather than the original value.

To better understand, consider the following scenario:

function Passbyvalue(a, b) {
	let tmp;
	tmp = b;
	b = a;
	a = tmp;
	console.log(`Inside Pass by value
		function -> a = ${a} b = ${b}`);
}

let a = 1;
let b = 2;
console.log(`Before calling Pass by value
		Function -> a = ${a} b = ${b}`);

Passbyvalue(a, b);

console.log(`After calling Pass by value
	Function -> a =${a} b = ${b}`);
Code language: JavaScript (javascript)

Pass by Reference: When using Pass by Reference, the function is called by passing the variable’s reference/address as an argument. As a result, modifying the value within the function affects the original value. The pass-by-reference feature is used in JavaScript arrays and objects.

Parameters supplied as arguments in a pass-by-reference function do not make their own duplicate; instead, they refer to the original value, so changes made inside the function affect the original value.

Let’s look at an example to help you understand.

function PassbyReference(obj) {
	let tmp = obj.a;
	obj.a = obj.b;
	obj.b = tmp;

	console.log(`Inside Pass By Reference
		Function -> a = ${obj.a} b = ${obj.b}`);
}

let obj = {
	a: 10,
	b: 20

}
console.log(`Before calling Pass By Reference
	Function -> a = ${obj.a} b = ${obj.b}`);

PassbyReference(obj)

console.log(`After calling Pass By Reference
	Function -> a = ${obj.a} b = ${obj.b}`);
Code language: JavaScript (javascript)

Note that under Pass by Reference, the original value is mutated. When we give an object as an argument and then update its reference in the function’s context, the object value is unaffected. However, if we alter the object inside, it will have an impact.

Example 1: Updating the function’s object reference.

function PassbyReference(obj) {

	// Changing the reference of the object
	obj = {
		a: 10,
		b: 20,
		c: "Codedamn"
	}
	console.log(`Inside Pass by
		Reference Function -> obj `);
		
	console.log(obj);
}

let obj = {
	a: 10,
	b: 20

}
console.log(`Updating the object reference -> `)
console.log(`Before calling Pass By
		Reference Function -> obj`);
console.log(obj);

PassbyReference(obj)
console.log(`After calling Pass By
		Reference Function -> obj`);
console.log(obj);
Code language: JavaScript (javascript)

Example 2: Mutating the original Object.

function PassbyReference(obj) {

	// Mutating the original object
	obj.c = "Codedamn";
	console.log(`Inside Pass by
		Reference Function -> obj `);
	console.log(obj);
}

let obj = {
	a: 10,
	b: 20

}
console.log(`Mutating the original object -> `)
console.log(`Before calling Pass By
		Reference Function -> obj`);
console.log(obj);

PassbyReference(obj)
console.log(`After calling Pass By
		Reference Function -> obj`);
console.log(obj);
Code language: JavaScript (javascript)

Conclusion

This is the difference between pass-by-value and reference in JavaScript is used. If you have any feedback, do drop a text in the comment section. Do check out the website of codedamn and join our interactive community to learn and have fun while learning.

If you have any query related to React or JavaScript, do drop it down in the comment section also do check out codedamn courses if you want to learn more about JavaScript and React with its use cases and amazing projects. They also have an in-built playground for different programming languages and environment sets so do check that out and join codedamn’s community and get amazing discounts, join now! 

Hope you like it.