Let’s Make a Website: the JavaScript Adventures — The variables
Where things start to get serious.
Did you expect the next installment of the series to arrive this early? Cause I sure as hell didn’t. But hey, here we are! No need to thank me. 😎
In the last article, we had an introduction to the world of JS. We asked the computer to solve 1 + 1. It was a great time, it was the best of times.
Today we’ll kick it up a notch and talk about a fundamental concept in programming: the variables.
Let’s go! 🚀
The variables: the why
A real-life example
An important thing in many modern apps is the ability for said apps to remember stuff.
Say, for example, a user signs up on your website and fills out a form where they write their full name. Later on, they want to access their profile page. On that page, your website needs to display the information it already knows about this user, including the full name they entered when they signed up.
How do you do this if your website doesn’t have the ability to remember stuff? Asking users to create an account every time they want to use your website would get really frustrating, real quick! 🙃
In the same vein: let’s say your Reminders app doesn’t remember what you type in from now on. Or your Clock app doesn’t save the alarm clocks you set up. Not a great user experience!
A virtual life example
Another example, more code-oriented this time… Remember how in the previous article we had this code:
1 + 1Well, we could also have this:
65151311351351 + 311583113313135 * (1653413515135135 - 61385138313)Now let’s say for some reason we want to use the result of this operation multiple times in our code. If we don’t have a way to remember anything, this means copying and pasting this operation every time we need its result. This would be pretty annoying, prone to copy and paste mistakes, and would make our code pretty hard to read and understand for other developers (and ourselves!).
Another thing to think about is that if you decide later to change the operation, e.g. change one of the numbers or replace the * with a /, you’d need to do that change on every part in the code where you wrote the operation.
The solution
Thankfully, there’s a solution to this issue: it turns out your computer has a memory!!1!!1!!!11 🤯
It’s inspired by the human one in that it’s there to let your machine remember stuff. You might have heard/seen the acronym RAM (for Random-Access Memory… yes that’s where the Daft Punk album name comes from! 💿): that’s the name of your computer memory.
What do variables have to do with all this? They let you tell your computer: “I want you to remember this value (e.g. 1789), give it this name (e.g. “year”), and store it in your memory so that I can reuse it later. Thank you, you magnificent piece of engineering.”
Don’t worry if it’s still a little opaque right now. It’s a brand new concept if you never did any programming before, so it can take some time to grasp. You’ll understand in no time! 🙂
Let’s see how we can use variables in our code now.
The variables: the how
Without further ado, here’s how you create a variable:
*drum roll* 🥁
var sum = 1 + 1Yeah, that’s it! Let’s see it in detail:
var
var is short for variable. Yes, that is indeed mind-blowing. 🤯 You use this keyword in JS to let it know that you’re gonna declare (a.k.a. more or less the programming term for create) a variable.
Sum
This is the name we’re giving to the variable. Think of it as an identifier so that we have a way to refer to the variable later. We’ll be able to get the value of the variable stored in memory using this name.
1 + 1
This is the value of the variable. It’s what gets stored in your computer memory to be reused later. In this specific case, your machine will save the value 2 (which is the result of 1 + 1, but you probably knew that already 😄) in memory, under the name sum. When later we ask the value of the variable named sum to the computer, it will respond with 2.
=
I saved this one for last, as it wouldn’t have made sense if I didn’t talk about the value of the variable first. Here you use = to tell JS: “Take everything on the right-hand side of the = symbol (so, 1 + 1) and put in a variable named sum (present on the left-hand side of the = symbol).”
And that’s pretty much it, you now know how to declare a variable in JS!
But I want to use that variable now though
Ah yes, I totally skipped this part. 🙃 Well, it’s pretty straightforward, just call it using the name you gave it.
sumYeah, that’s it!
Let’s see that in practice. Open your browser console. Remember how to do that? We talked about it in the last article. As a reminder: press Ctrl + Shift + C (on Windows and Linux) or Cmd + Option + C (on Mac).
When you’re in the console, type:
var sum = 1 + 1Then press Enter. JS responds with undefined but you don’t need to care about that now. Just know that you created your first variable and that is freaking amazing!
It’s now stored in your computer memory. Don’t worry, it’s got plenty of it. Well… unless you use Chrome (I had to). By the way, the RAM gets emptied every time you restart your computer. So you’re not storing that 2 forever in your computer memory.
Now, to access this variable and display its value, enter its name in the console (as we saw at the beginning of this part):
sumThen press Enter. JS responds with 2! Which is what we stored in this variable, the result of 1 + 1. Congrats! 🎉🎊
Note that you can call that variable as many times as you like (until you close that page) and it’ll always respond with 2!
How about giving it another value?
At some point, you might want to give your sum variable another value. It often happens in programming. This is called “reassigning a value to a variable”. To do that in JS:
sum = 40 + 1Try to enter that in the console. Note that we don’t need the var keyword here, as JS already knows from before that we use sum as a variable.
Now try to access sum again by typing:
sumAnd pressing Enter. From now on, JS will respond with 41, the result of 40 + 1, and not 1 + 1 anymore, because 41 is the new value we assigned to the variable sum.
Also did you get it sum 41 lmao
To conclude
That’s it for today!
We learned quite a bit in this article: we saw that your computer has a memory, what variables are, and how to create them. As I was saying in the introduction, variables are a fundamental concept in programming. You’ll use them pretty much all the time, so it’s important to understand how to declare and access them.
In the next article, we’ll talk about conditions in programming. They let you say “if this then do that, or else do that” (and as you’ll see, it’s actually pretty close to this in JS code 😄).
Stay safe, and see you next time! 🚀
The next article is available here!
PS: As usual, lemme know what you think in the comments! All constructive feedback is appreciated! 😊
Note: This post is part of a series.
- Let’s make a website. (Episode I)
- Let’s make a website. Episode II — HTML
- Let’s make a website. Episode III — Your first page
- Let’s make a website. Episode IV — Images
- Let’s make a website. Episode V — The code editor
- Let’s make a website. Episode VI — CSS
- Let’s make a website. Episode VII — Let’s make a Pokédex!
- Let’s make a website. Episode VIII — Intermission
- Let’s make a website: the JavaScript adventures.
- Let’s make a website: the JavaScript adventures — The variables II
- Let’s make a website: the JavaScript adventures — The conditions
- Let’s make a website: the JavaScript adventures — The conditions II
- Let’s make a website: JavaScript arrays
