Pass by Reference vs. Pass by Value Explained

Taken by Mickey during lunch break

Learning something new in Javascript for the first time can be challenging. Sometimes concepts click for me right away. Other times, it can take me a few days along with a number of questions, for the Ah ha moment to kick in. I realized through practice and repetition the difficult concepts become more familiar. Next time I come across a particular syntax or concept, I am able to access my long term memory to solve problems more effectively and efficiently.

The Role of Variables

When it comes to writing code, you will be defining, reading and modifying variables at some point. If you are not yet familiar, variables can be defined as descriptive words that hold information — primitive data types or objects . The most basic primitive data types include but are not limited to undefined, null, boolean, string, and numbers. Variables are powerful tools that can help your program execute code inside and outside of functions. You may recognize those as local and global scope variable. Most of the time, you do not need to know where your variables are stored. You can simply reference the variable by name where appropriate and the program knows exactly what to do with it.

However, there will be times when it is vital to know where a value is stored in memory. Having knowledge of how variables are passed around between functions and understanding the difference of passing by value and passing by reference can be beneficial.

Pass by Value

Passing by value is how your values are passed on most of the time. Passing by value indicates that we are working with primitive data types. Passing by value means that the value of the function parameter is copied into another location of your program memory, and when accessing or modifying the variable within your function, only the copy is accessed/modified and the original value is left untouched. The image below is meant to depict what is happening behind the scenes.

Anthony Alicea — Udemy.com

let a = 5
console.log(a) // => 5

let b = a 
console.log(b) // => 5 

a = 10 
console.log(b) // => 5 
console.log(a) // => 10 

• Let’s walk through the code above line by line. You can code along using Chrome DevTools. I created the variable (a) and assign it the value of (5). The equals operator denotes the value ito be primitive, creates a new location in memory, and points (a) to the address, and fills it with the value of (5).
• Now we console.log(a) to confirm that our output is indeed 5.
• I created the variable (b) and assign it the value of (a). The program recognizes its value to be primitive, creates a new location in memory, points (b) to the NEW address, and fills it with a copy of (a)’s value (5).
• Now we console.log(b)to confirm that our output is indeed 5.
• Check this out! First, I update the variable (a) and re-assign it the value of (10) then console.log(b) again. We can see variable (b) is still equal to the original value of (5). We I console.log(a) again, you will notice that the value has updated to (10).
• console.log(b) = 5
• console.log(a) = 10

Same works with strings…

let a = "The Original Value"
console.log(a) // => The Original Value
let b = a
console.log(b) // => The Original Value
a = "The Switch Up"
console.log(b) // => The Original Value
console.log(a) // => The Switch Up

Explanation:

As aforementioned, both variables (a) and (b) were assigned their own separate location in memory. When variable (b) was created, the equal operator made sure to assign it a NEW location of its own to fill, and not the same location as variable (a).

The best part about variables is that they can be re-assigned. Variable (a) was modified and did not need to notify variable (b) that it was looking to switch- up. Pass by value copies the value into two separate locations in the program memory effectively making them entirely separate entities despite one initially being set equal to the other.

Pass by Reference

Passing by reference relates to objects in Javascript (ALL objects including functions).

The image below is intended to depict what is actually happening when we pass by reference.

Anthony Alicea — Udemy.com

let a = {program: "Javascript"}
console.log(a) // => {program: "Javascript"}
let b = a
console.log(b) => {program: "Javascript"}
a.program = “React” ( mutating the object key value pair by using dot notation )
console.log(b) // => {program: "React"}
console.log(a) // => {program: "React"}

• Let’s walk through the code above line by line. I created the variable (a) and assigned it an object {program: “Javascript”}. The equals operator denotes the value to be an object, creates a new location in memory, and points (a) to the address, and fills it with the respected value.
• If we console.log(a), our output should be {program: “Javascript”}.
• I created the variable (b) and assigned it the value of (a). The equals operator recognizes this value is an object and points (b) to the same location in memory that (a) is pointed to. Unlike primitive data types, the program does not create a new location, rather both defined variables are pointing to the same location in memory.
• I mutuated the object’s key value pair by using dot notation or bracket notation. Calling the variable, chaining the objects key followed by the new value // a.program = “React”
• If we console.log(b) our output should be // => {program: “React”}
• Check this out! Since we modified the key in our object using dot notation when we console.log(a) again. We can see that the not only is the value of variable (b) is still {program: “React”} but the new output for console.log(a), is also {program: “React”}.

Explanation:

In sum, 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 in memory. Therefore, updating one object will also change them all.

References: Anthony Alicea — Udemy.com