References vs Values in JavaScript
Tags: javascript, webdev, tutorial, beginners
Published: 2022-01-04 13:58:28

## Preface

Different data types are passed either by their value or by their reference. Today, we will look at what this means in JavaScript and how it affects our code. This can be a reason for a lot of bugs in JS and a deeper dive into this will let us understand how it can be avoided and used for our own good.

## Pass by value

In JavaScript, primitive data types are passed by copy of their value. These primitive types are, `Number`, `String`, `Boolean`, `null` and `undefined`. 

```jsx
let a = 10;
let b = a;

console.log(a);  // 10
console.log(b);  // 10
```

Here the value of variable `a` is copied and assigned to variable `b`. This means that these variables are separate with no relationship with each other. Due to this, changing one variable's value doesn't change the other.

```jsx
let a = 10;
let b = 20;

a = 30;

console.log(a);  // 30
console.log(b);  // 10
```

## Pass by reference

All the non-primitive types, that is, objects are passed by reference. In JavaScript, arrays and functions are also a type of object. Whenever we assign an object to a variable, the variable contains the address of that object and not the object itself. This address points to the object stored in the memory.

```jsx
const person = {
	'name': 'vaishnav',
	'age': 20
};

// variable 'person' contains the address of the object
```

Whenever a variable is assigned to another variable, both the variables will hold the same address and they will be pointing to the same object.

```jsx
const person1 = {
	'name': 'vaishnav',
	'age': 20
};

const person2 = person1;  // 'person2' contains the same address stored by 'person2'

console.log(person1 === person2);  // true, since they both have the same address
```

Since both these variables are pointing to the same object, any changes made from one object will be visible by the other object.

```jsx
const person1 = {
	'name': 'vaishnav',
	'age': 20
};

const person2 = person1; 
person1.age = 35;  // original object modified

console.log(person2.age);  // 35 

```

In the example below, the original variable `person1` will hold the address to the new object while the variable `person2` will hold the address to the original object. If there was no variable such as `person2`,  that is, if no variable is pointing to an object, then that object will be deleted from memory during [Garbage collection](https://www.geeksforgeeks.org/garbage-collection-in-javascript/).

```jsx
let person1 = {
	'name': 'vaishnav',
	'age': 20
};

let person2 = person1;
person1 = {
	'name': 'shyam',
	'age': 60
};

console.log(person1);  // {name: 'shyam', age: 60}
console.log(person2);  // {name: 'vaishnav', age: 20}
```

## Function arguments

Everything we discussed above applies for function arguments as well. Primitive data type variables will be passed by copy of their value and any changes made to the local variables inside the function will not affect the actual arguments.

```jsx
let val = 90;
increment(a);

function increment(a) { 
	a += 10;
	console.log(a);  // 100
}

console.log(val);  // 90
```

All objects will be passed by their references. In this case, any changes made to the local variable will change the actual variable as they are pointing to the same object. To avoid this, it is advised to use [pure functions](https://bit.ly/3qDHP5A).  Pure function is a function that returns the same result if the same arguments are passed.

```jsx
const person1 = {
	name: 'vaishnav',
	age: 20
};

alterData(person1);

function alterData(obj) {
	obj.name = "shyam";
	obj.age = 50;
}

console.log(person1); // {name: 'shyam', age: 50}
```

## Conclusion

Today we covered how pass by reference and pass by value works. Understanding this is vital when you are strengthening your fundamentals. If you have anything you’d like to add to this article or any questions, feel free to comment down below. 

I am currently posting articles on important JavaScript topics that you need to learn before moving to react. Follow me on [twitter](https://twitter.com/Vaishnav_sh) to get notified when I post them.