By Value VS By Reference: A Beginner's Perspective

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.