In JavaScript, parameters are passed by value or by reference.
To understand the difference, let's understand how things are stored in memory on both the stack and the heap.
Recap of Stack
function doStuff() {
let x = 42;
let y = true;
let objRef = 0x123;
}
It gets way into the weeds of how programming languages work, but to keep track of the data on the stack, you have a stack and frame pointer. Stack pointer points to the top of the stack. Frame pointer points to the current function call. Anyways, that's out of scope for this post.
The main thing you should know is that the object lives in the heap. The addresses is what we refer to when writing code.
Recap of Heap
let obj = {
name: "example",
data: [1, 2, 3],
nested: { x: 1 },
};
To access the object, we'd use the reference 0x123 from the stack.
Key differences between Stack and Heap
Stack: Fast, fixed-size, automatic cleanup
Heap: Flexible, dynamic-size, garbage collected
Dereferencing
Again, I don't wanna get way into the details, but you might be familiar with the term "dereferencing".
Maybe you've heard of it from university or from a book.
It simply means that you're looking up the actual value from the reference.
Let me show you some C code:
int main() {
int x = 42;
int* ptr = &x;
printf("%d\n", *ptr);
return 0;
}
Pass by Value vs Pass by Reference
With that out of the way, let's talk about what matters for JavaScript.
Let me show you some JavaScript code:
const obj = { count: 0 };
function doStuffWithObject(obj) {
obj.count = 1;
}
doStuffWithObject(obj);
console.log(obj);
Let's look at another piece of code with a primitive value:
const count = 0;
function doStuffWithPrimitive(count) {
count = 1;
}
doStuffWithPrimitive(count);
console.log(count);
The first example is what we call "pass by reference". The second example is what we call "pass by value".
Inside the function, we're actually doing a copy of the parameter.
In the case of the object, we're copying the reference, meaning the address, which points to the same object in the heap.
In the case of the primitive value, we're copying the value, which is not the same in memory, because the ACTUAL value is copied here.
const obj = { count: 0 };
function doStuffWithObject(obj) {
obj.count = 1;
}
Fun fact
let obj1 = { value: 1 };
let obj2 = { value: 1 };
let sameAsObj1 = obj1;
obj1 !== obj2;
obj1 !== sameAsObj1;
You may have see that when working with JS {} === {} is false. That's true because the brackets create new objects in memory.
But if you look at the code example above, obj1 and sameAsObj1 are the same object in memory, so when comparing them, they end up being true.
Summary
I may have been a bit fast since I'm writing for myself and this is from my notes.
But if you wanna dig deeper into how all of this works, I recommend playing around with code and reading up on the topic.
If you wanna learn programming language stuff, I recommend learning C and how things work under the hood.
If you've dabbled in some C, it shouldn't be too overwhelming for you to read this: Memory, Pointers and C under the hood. (full guide)
