JavaScript Variables: Value and Reference | Preston Lamb Consulting, LLC
source link: https://www.prestonlamb.com/blog/javascript-variables-value-and-reference
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
tldr;
JavaScript has two methods of storing data in the variables you declare: by value and by reference. It's important to understand how this works, because if you don't there can be unintended consequences of changing the data stored in the variables. We'll go over these two methods of storing data and show some examples so that you don't run into any issues in your applications.
In addition to storing the data in the variables with these two methods, the same applies to passing parameters in as functions. We'll cover that as well in this post.
Value
Let's start with talking about storing the data by value. When a variable is assigned a value of a string
, number
, boolean
, null
, or undefined
, they are storing that information by value. In essence, they contain the value in the variable. If you change the value they are storing, they forget the old value and now contain the new value. Where this really matters is when you declare a second variable and initialize it to the first variable. Here's an example:
let myRating = 5;
let yourRating = myRating;
console.log(myRating, yourRating); // 5 5
In this example, myRating
is assigned the value of 5
, and yourRating
is assigned the value of myRating
. So what happens if we reassign the value of myRating
, or reassign the value of yourRating
? Well, because these variables are stored by value, they can change independently of each other:
myRating = 9;
console.log(myRating, yourRating); // 9 5
The same thing happens if you passed myRating
into a function. If the function changed the value of that parameter, myRating
would be unaffected.
function multiplyRating(rating) {
return rating * 10;
}
let newRating = multiplyRating(myRating);
console.log(myRating, newRating); // 9 90
This is pretty straight forward, and honestly seems pretty natural. This is how I expected variables to behave when interacting with them. But not all variables work this way. Let's talk about variables storing and passing by reference.
Reference
When a variable stores its data by reference, all it contains is the location in memory where the data is stored. When you copy that variable, or pass it to a function, the location in memory is all that is copied. That means that all variables are pointing to the same place in memory. If one of them change that value, all of them will reflect the change.
let dog = { name: 'Duke' };
let dog2 = dog;
console.log(dog, dog2); // { name: 'Duke' } { name: 'Duke' }
dog.name = 'Max';
console.log(dog, dog2); // { name: 'Max' } { name: 'Max' }
function changeName(dogObj) {
dogObj.name = 'Fido';
}
changeName(dog2);
console.log(dog, dog2); // { name: 'Fido' } { name: 'Fido' }
As we can see in the example above, changing the name attribute on one object changed the name attribute on all of the objects. That's because in reality all of the variables are pointing to the same object; at a location in memory.
Can you see where this will cause issues if you're not aware of it? It's a big deal huh? If you are expecting objects or arrays to be stored or passed by value, and they're not, you could really mess up your application.
Conclusion
This is a fundamental part of how JavaScript works, but is sometimes overlooked when teaching or learning the language. I don't remember when I was taught this, but it wasn't when I first started learning, that's for sure. Passing and storing by value or reference is important to understand and to keep straight.
Recommend
-
6
Preston Pysh on Why Currencies FailAn encore presentation of NLW’s conversation with Preston Pysh recorded on March 12 – the infamous Black Thursday.This episode is sponsore...
-
5
Deno with Preston Lamb on Web Rush #136Preston Lamb joins John, Ward, Craig, and Dan to talk about Deno. What is the history of Deno and who should use Deno? How do you load modules in Deno? Does Deno support npm packages? And how should some...
-
3
Full Stack Radio Full Stack Radio • Episode 138 138: Tom Preston-Werner - Building Full-Stack JS Apps with Redwood.js
-
7
Preston’s Paradox Preston’s Paradox This article is an excerpt from my book Probably Overthinking It, to be published by the University of Chicago Press in early 2023. This bo...
-
3
May 27th, 2022Supper Club × RedwoodJS with Tom Preston-Werner👇 Download Show
-
9
Premium ...
-
6
Evolution of BitSurf as explained by founder and CEO Preston Brown Interviews 10 May 2023 BitSurf relaunched as its own independent...
-
7
Responding to Preston Pysh on drivechains RE: https://nostr.band/note12yse7ke6t6wcx79h2rzmwzqj2mm...
-
8
The Latest on RedwoodJS with Tom Preston-Werner ...
-
8
Tom Preston-Werner is back on the show to update us on what's been happening with RedwoodJS, what RedwoodJS is, how they evaluate which technology to integrate into RedwoodJS, how RedwoodJS goes further than NextJS, thinking about startups at scal...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK