By Value VS By Reference: A Beginner's Perspective
Tags: beginners, javascript
Published: 2020-11-03 17:10:29

One of the most important concepts of programming is the distinction between passing by value and passing by reference. In this post, I will try my best to explain the concept as I understand it as a beginner.

### Passing by Value
Passing by value refers to a variable being stored as its literal value rather than some other method. Typically, in JavaScript, primitive types( numbers, strings, booleans, etc) are always stored by value. This means that altering their values within a function or after being passed to another variable doesn’t change the value of the original declaration. Take the block of code below for example;

```
let a = 5;   			//the integer value of 10 is stored in variable a
let c = “lovely article”;   // the string value is stored in variable c
let d = a;   			//this stores the value of 10 in variable d
```
Making a change to the *variable d* would not result to a change in the value stored in *variable a* as it is set to the value of 5 rather than the location *variable a* is stored. This is because in as much as the *variable d* points to the value stored in the *variable a*, it actually holds an entirely different value. 

```
d = d + 5;

console.log(a);	//logs 5
console.log(d);	//logs 10
```

### Passing by Reference
The other way by which variables can be stored is by Reference. This refers to when a variable been stored at a particular memory location on the local device. Arrays and objects are typically stored by reference to a particular memory location. A change made to the variable affects all other variables which point to that memory location. For example: 
```
let f = [1,2,3];  //0x00		
let g = f; 	//0x00		
```
Making a change to *variable g* also changes to the value of *variable f* because the *variable f* (and by extension *variable g* )holds a reference to the memory address(say *0x00*) rather than the array itself. The value of the array is however stored at this memory address, 0x00.

```
let f = [1,2,3];		//0x00
let g = f; 			//0x00

g.push(5)

console.log(f);		//logs [1,2,3,5]
console.log(g);	//logs [1,2,3,5]
```

If you however assign *variable g* to a different array of numbers, this array would be  stored in a new memory address(say 0x01). This allows you to overwrite the previous memory location set in the declaration( as in the previous block of code). The block of code below explains further:

```
let f = [1,2,3];	//0x00
let g = f;          //0x00


console.log(f);     //logs [1,2,3]
console.log(g); //logs [1,2,3]

g= [4,3,2,1]; 	//0x01

g.push(5)

console.log(f);     //logs [1,2,3]
console.log(g); //logs [4,3,2,1,5]

let i = [1,2,3];	//0x02 
```
It’s also worth noting that checking equality on two arrays which have the same exact values but do not reference the same memory locations returns *false*. Equality checks only return *true* if both arrays are stored at the same memory location.

```
let f = [1,2,3];        //0x00
let g = f;          //0x00

console.log(`f == g ${f==g}`);	//logs f == g true 
console.log(`f === g ${f===g}`);	//logs f === g true

let i = [3,4,5];    //0x01
let j = [3,4,5];    //0x02

console.log(`i == j ${i==j}`);		//logs f == g false
console.log(`i === j ${i===j}`);	//logs f === g false 
```

### Conclusion
The concepts of passing by values and passing by references in programming is important as it could lead to bugs which may be somewhat difficult to track down. Understanding this concept helps to save you time and effort when debugging your code.