Reference Passing in JavaScript

Before we talk about Pass by Value and Pass by Reference, we have to talk about variables. Variables are bindings that hold values. Often times we want to change or store that value somewhere, and when we assign a value to a variable our computer stores that data in the computer’s memory. Memory is stored in one of two places: the Stack or the Heap. A Stack is a data structure that is used to store elements in Last-in First-out (LIFO) order, which I will explain in more detail later. A Heap is a data structure where objects are stored. Heaps are slower to access but are better suited for long term storage. You can think of “Stack” as plates being placed upon each other one by one, making a stack of plates. And you can think of “Heap” as the cupboard that holds a set of many different unordered plates.

When variables are declared or functions are called, they are placed on the stack.
Here’s an example:

const multiplyByTwo = (number) => {
    let calculator = number * 2;
    return calculator;
}

let salary =  25000;
multiplyByTwo(salary); // 50000
console.log(salary); // 25000


salary = multiplyByTwo(salary); // 50000
console.log(salary); // 50000

On line 5, we declared a variable, salary, and assigned it a value of 25,000. Here, Javascript stores your variable on the Stack part of the memory. If we go back to our model of the stack of plates, you can envision that when the function on line 6 is executed, it returns the variable value that was last placed on top. Ultimately, that plate then falls off of the stack first because it was last placed there.

When you store variables on the stack, it is faster to access. Large objects that have large data values that will take longer to access are stored on the heap rather than the stack.

Let’s go back to my first example to explore pass by value and pass by reference. Pass by value refers to copying the value of a variable and passing that value to a function as an argument. For example, on line 5, we defined salary and assigned it a number value 25,000 and we passed that number value on line 6 when we execute our function: multiplyByTwo. We are passing the number value 25,000 as an argument to our function and our function is performing our code and returning 50,000. Note when we run line 7, our value is still 25,000, meaning we are just passing the value. To visualize this, imagine a blue cup filled with coffee. To pass by value, we would grab another blue cup and fill it with coffee. Ultimately, what we do with the second cup doesn’t affect the first cup, they simply have the same properties (blue cup and coffee.)

When a variable is passed by reference, the function receives a pointer to an address in the memory block of your computer. When a variable is passed to a function by reference, the function is able to mutate the original value of the variable. To visualize this, in the coffee example, pass by reference assumes that, instead of just passing our friend a copy of the copy, we would hand over the original blue cup of coffee for them to modify. (for example, adding cream and sugar.)

I chose to write this blog on Pass by Value and Pass by reference because as you can see, these ideas can seem extremely complicated. But when you slow down and start from the very beginning, you realize how simple and helpful this concept might be to your work.

Paul Sobers