DEV Community

Copy by Value vs Reference

iAmGjert on February 18, 2022

Intro There are two ways to pass a value to a variable in JavaScript and understanding how they operate is fundamental to your success at manipulat...

Read full post

Toby Parent • Feb 19 '22 • Edited

The issue with the whole "pass by value" vs "pass by reference" thing is, javascript doesn't really do either. Well it does both. Well it does...

Javascript is consistent, both primitives and non-primitives work the same way. A string is passed the same way as an object, in large part. But the concepts of value or reference is fuzzy here, because any references are implicit, not explicit. We don't have pointers, so we aren't sharing a reference - but it seems we do, as arrays and objects are mutable from either side.

I think the best description I've seen for javascript's way of passing is Pass by share. When we pass something into a function, be it primitive or not, we are sharing the reference to that thing. We can't act on the reference, we can only follow it. In the case of primitive data types the value we reach is immutable, so any transformation becomes a new thing. But with non-primitive types, where mutation is possible, a shared reference becomes a little more problematic.

I've always seen the "Is javascript pass by reference or pass by value?" to be a trick question, for which there is no clean answer. It's the kind of a question, in an interview, intended to be wrong.

Edit for completeness: When I mentioned above "in large part*, it's because, internally, javascript does funky stuff with smallInt values, from what I've read. Rather than the variable referencing a lookup table, which referrences memory locations, which reference values? From what I've read, smallInt values are the only ones stored directly in the lookup table, and thus the only ones pass by value. What that means? Absolutely no idea. Still trying to test that, and see if it's relevant.

hidden_dude • Feb 19 '22

The true way to know if you're passing by reference in a language is this:

func f(ref val) {
val = newVal;
}

x = something
f(x)

If x is now equal to newVal then your language supports passing by reference (ex: in Pascal this works with var, or in C++ & notation). If x is still equal to "something" then I'm afraid you don't have true pass by reference.

Guillermo Prandi • Feb 20 '22

That's a different discussion. The article is about assignments, not function calling.

Toby Parent • Feb 20 '22

And that's why I suggest a different verb, pass by share. We are sharing that reference in an assignment to another variable, rather than passing the value itself. However the reference is tied to the immutable value, and not to the variable.

Javascript is weird, but once you grok, it actually makes a lot of sense.

Jordy Lee • Feb 19 '22

Nice article. For completeness’ sake and clarity, you might want to add ‘Symbol’ and ‘BigInt’ for the full list of JS primitive types.

Might also wanna let readers know that arrays and functions in JS are technically objects too :)

Sarvesh Prajapati • Feb 19 '22

Great article though...
Would be better to discuss a bit about heap. Either way... great content

Dan Walsh • Feb 20 '22

Great read! 👏

It's worth mentioning that if you're intending to make a copy of a non-primitive, you can do so using the spread operator:

/**
 * Objects
 */
const myObj = {name: "Fred", age: 10};
const copiedObj = {...myObj};
copiedObj.name = "Dan";
console.log(myObj, copiedObj);
// > {name: "Fred", age: 10}, {name: "Dan", age: 10}

/**
 * Arrays
 */
const myArr = ["Fred", 10];
const copiedArr = [... myArr];
copiedArr[0] = "Dan";
console.log(myArr, copiedArr);
// > ["Fred", 10], ["Dan", 10]

I find it particularly useful when making changes to the state object in my React useReducer() logic.

oskar • Feb 22 '22 • Edited

Watch out that objects copied by destructuring it will be a shallow copy so any nested objects will still link to their "reference"

const myObj = {name: "Fred", age: 10, nested: { surname: "Flinstone" }};
const copiedObj = {...myObj};
copiedObj.name = "Dan";
copiedObj.nested.surname = "Qwerty";
console.log(myObj, copiedObj);

The same happens to arrays as well

Dan Walsh • Feb 22 '22

Great point! It clearly illustrates that you need to pick the method for your specific needs: by reference, shallow copy and deep copy. Each has its pros, cons and use cases.

Guillermo Prandi • Feb 20 '22

One could argue that every variable holds a reference, at least in abstraction. Using let a = 1 doesn't contradict this, because one can say it's the object 1 that's being assigned. This pseudo object has no properties and can not be manipulated, but can be assigned to other variables, just like any bonafide object. If we then say a = 2, we'd be changing the referencea is pointing to, rather than changing the actual number. I know this is entirely semantics, and that the actual implementation does classify values as different from references internally, but making that distinction while learning the language seems unnecessary. I hope this makes sense.