JavaScript Values and Variables
In JavaScript, a variable is an identifier for a value. Learn how to organize your code with variables and get a sneak peak at variable naming conventions.
This chapter is from the book
This chapter is from the book
This chapter is from the book
In JavaScript, every piece of data we provide or use is considered to contain a value. In our example from the previous chapter, we might think of hello, world! as just some words we pass in to the alert function:
alert("hello, world!");
To JavaScript, however, these words have a specific representation under the covers. They are considered values. We may not have thought much about that when we were typing those words, but when we are in JavaScript Country, every piece of data we touch is considered a value.
Now, why is knowing this important? It is important because we will be working with values a whole lot. Working with them in a way that doesn’t drive you insane is a good thing. There are just two things we need to simplify our life working with values:
We need to identify them easily.
We need to reuse them throughout our application without unnecessarily duplicating them.
Those two things are provided by what we are going to be spending the rest of our time on: variables. Let’s learn all about them here.
Using Variables
A variable is an identifier for a value. Instead of typing hello, world!, every time we want to use that phrase in our application, we can assign that phrase to a variable and use that variable whenever we need to use hello, world! again. This will make more sense in a few moments—I promise!
There are several ways to use variables. For most cases, the best way is by relying on the let keyword followed by the name you want to give your variable, like so:
let myText
In this line of code, we declare a variable called myText. Right now, our variable has simply been declared. It doesn’t contain anything of value. It is merely an empty shell.
Let’s fix that by initializing our variable to a value like, say, hello, world!, as shown here:
let myText = "hello, world!";
At this point, when this code runs, our myText variable will have the value hello, world! associated with it. Let’s put all of this together as part of a full example. If you still have hello_world.htm open from earlier, replace the contents of your <script> tag with the following, or you can create a new HTML file and add the following contents into it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"">
<title>An Interesting Title Goes Here</title>
<style>
</style>
</head>
<body>
<script>
let myText = "hello, world!";
alert(myText);
</script>
</body>
</html>
Notice that we are no longer passing in the hello, world! text to the alert function directly. Instead, we are now passing in the variable name myText instead. The end result is the same. When this script runs, an alert with hello, world! will be shown. What this change allows us to do is have one place in our code where hello, world! is being specified. If we wanted to change hello, world! to The dog ate my homework!, all we would have to do is just make one change to the phrase specified by the myText variable:
let myText = "The dog ate my homework!"; alert(myText);
Throughout our code, wherever we reference the myText variable, we will now see the new text appear. Although this is hard to imagine as being useful for something as simple as what we have right now, for larger applications, the convenience of having just one location where we can make a change that gets reflected everywhere is a major time-saver. You’ll see more less-trivial cases of the value variables provide in subsequent examples.