Pass by Reference, Pass by Value

I’ve never been a great test taker and that extends to a situation I recently found myself in… interviewing for a job. As part of the interview I had to answer some relatively easy technical questions. A few on JavaScript proficiency and a few general “no right or wrong, how would I do this” kind of questions. However, one of these questions in particular caught me off guard.

Could I explain Pass by Value vs. Pass by Reference in JavaScript?

Dang it. I may have well been trying to explain my browser history to my grandma. I was floundering. It’s not that I just completely didn’t understand this, I’ve been working with this stuff for years, but as things go this was a test and as we already know… I’m not a great test taker.

After the interview I immediately started a quick rather long deep dive down the interwebs to figure out the error of my ways so that next time maybe I’ll flounder a little less, and if you’re reading this maybe you will too.

Some things I’ve grokked through science research

• I’ve found that although this is a mostly foundational concept, it does still confuse a lot of people.
• Pass by value and pass by reference in JavaScript is different than in other languages… for better or worse. My cousin told me worse but I think the jury is still out.
• When you assign a variable it takes up a specific location in memory and that’s an important concept to remember.
• Anything that is not a JavaScript primitive type is passed by reference. That means objects, arrays, functions.

The Nitty-Gritty

Pass by Value

JavaScript’s primitive types (strings, numbers, booleans, etc.) are passed by value. This means that when passing them to a function or assigning them to a new variable, you’re actually creating a copy of the original value.

// Let's see pass by value in action

let myAge = 35 // Let's just pretend this is my age
let yourAge = myAge // yourAge gets a COPY of myAge's value

yourAge = 25 // Changing yourAge doesn't affect myAge
console.log(myAge) // Still 35
console.log(yourAge) // 25

// Function parameters work the same way
function addFiveYears(age) {
	age = age + 5 // This only affects the local copy
	console.log("Inside function:", age)
}

addFiveYears(myAge); // Logs "Inside function: 40"
console.log("Original age:", myAge) // Still 35

Pass by Reference

Objects in JavaScript (including arrays and functions) are passed by reference. What this means is that unlike when passing by value, these variables do not create a new spot in memory, they just reference the original. A reference is just a pointer to where the actual data lives.

// Pass by reference example

let bestHomie = { name: "Matt", age: 35 }

function addOneYear(homie) {
	homie.age += 1 // This changes the original object!
}

addOneYear(bestHomie)
console.log(bestHomie) // {"name": "Matt", "age": 36} - The original was modified

Because of this, when making changes, the referenced variable is changed. Not some copy of the variable in some other deep dark shadowy spot in memory.

In the immortal words of Run DMC, “It’s tricky”

There are a couple of nuances with references that can trip up even the best of us:

First, JavaScript compares object references, not their content:

// References vs content comparison

let arr1 = [1, 2]
let arr2 = [1, 2]
console.log(arr1 === arr2) // false - Despite the identical content in each array, their different spots in memory are what is being compared

let arr3 = arr1 // arr3 references the same array as arr1
console.log(arr1 === arr3) // true - arr3 is referencing the same spot in memory as arr1

// This explains why this works:
arr3.push(3)
console.log(arr1) // [1, 2, 3] - the original array is modified

Second, even though objects are passed by reference, if you reassign the parameter inside a function, it won’t affect the original:

// Reassigning vs modifying

let matt = { height: "6ft", eyes: "brown", career: "web dev" }

function upgrade(person) {
	// Creates a new object and assigns it to the parameter
	person = { height: "6.5ft", eyes: "blue", career: "finance" }
	console.log("Inside function:", person)
}

upgrade(matt) // Logs the new object from the function
console.log("Original:", matt) // Still { height: "6ft", eyes: "brown", career: "web dev" }

// But if we modify properties instead of reassigning them:
function upgradeCareer(person) {
	person.career = "astronaut"
}

upgradeCareer(matt)
console.log("After upgrade:", matt) // { height: "6ft", eyes: "brown", career: "astronaut" }

It’s like my Facebook profile. If someone hacks in and changes all my information, my actual profile gets updated for everyone to see. But if they just copy everything into a new fake profile posing as me, my original profile doesn’t get touched—complete with that regrettable bathroom selfie from 2018.

In the end

This wasn’t necessarily foreign to me but it is a confusing concept I obviously wasn’t prepared to explain. But next time interviewer–you best believe, I got you.