Author : Afrixi
Last Updated : October, 2017
Table of Content
Think for example of Facebook. Facebook keeps track of tons of information and displays it on their websites and apps. Things like names, birthdays, status’, etc. In order for us to write more complex programs like these, that do more than print text out onto the screen, we’ll need to learn how to manage all of the information in our programs and use variables.
Variables are essentially containers which allow a program to store different pieces of information inside of them. Once the information is stored inside the variable, that information can then be accessed throughout the program simply by referring to the variable’s name.
Writing a Story
To demonstrate let’s take a look at a situation where variables would come in handy:
document.write("There once was a man named George <br/>"); document.write("He was 70 years old <br/>"); document.write("He really liked the name George <br/>"); document.write("But didn't like being 70 <br/>");
The program above is very similar to the one we wrote in the previous lesson where we drew a shape. It’s just printing out a little story about a man named George.
But let’s say we wanted to change the name of the character in the story. Well in order to do that we would have to look through all of the code we wrote, and find every place where we wrote the name George and individually change it to the new name (hoping we didn’t make any spelling mistake along the way).
Suppose that we also wanted to do the same thing with George’s age. Maybe we wanted to make him a bit younger or older. Again we’d have to look through each line of code individually and change the age.
In a small program like this, making changes like these is fairly manageable, after all our story is only 4 lines. But imagine if instead of 4 we had 400 or 4000 lines, where the character’s name and age were mentioned dozens or hundreds of times.
Going through and changing all of that would be a nightmare, and even if you used something like a find and replace, it wouldn’t be reliable as it couldn’t account for any misspellings or mis-agings.
And in this case we’re only keeping track of two pieces of information about the character, suppose we also wanted to keep track of (and potentially change) his birthday, favorite book, favorite color, and top 5 friends. The more information and data we want to keep track of, and the longer our programs get, the more difficult it is to mange all of it. That’s where variables come it.
Adding Variables to the Story
Remember, variables are essentially containers where we can store pieces of information. And we can use them to store, for example, our character’s name and age. Checkout the modified program below which stores the name and age into variables, and then interweaves them throughout the story.
characterName = "George" characterAge = 70
document.write("There once was a man named " + characterName + "<br/>"); document.write("He was " + characterAge + " years old <br/>"); document.write("He really liked the name " + characterName + "<br/>"); document.write("But didn't like being " + characterAge + "<br/>");
What we’ve done above is very powerful. We’ve replaced each instance of the character’s name and age in the story, with the variable that we stored them in. The values for the name and age are actually stored inside of these variables which we’ve given descriptive names, and those values can then be accessed by simply referring to the variable’s name.
This is powerful for multiple reasons. First is that if we wanted to change the characters name, now all we have to do is simply change it up at the top of the program were we stored it in the variable.
We’ve now eliminated the need for searching through the program and finding each instance of the name or age and manually changing it. All the print statements are doing is just printing out what’s stored inside the variable.
Variables also allow us to change the pieces of information we’re keeping track of throughout our programs. So imagine if halfway though the story the character’s age changed (maybe they suddenly aged 10 years?). We could simply update the value in the variable to the new age, and the age would automatically update everywhere thereafter!
characterName = "George" characterAge = 70
document.write("There once was a man named " + characterName + "<br/>"); document.write("He was " + characterAge + " years old <br/>");
characterAge = 80;
document.write("He really liked the name " + characterName + "<br/>"); document.write("But didn't like being " + characterAge + "<br/>");
If you run the program now, the character’s age will be different in the two places its printed out.
Rules for variables
Names are case-sensitive and may begin with:
letters, $, _
After, may include
letters, numbers, $, _
Start with a lowercase word, then additional words are capitalized
As long as you follow those rules you should be good to go. I’ll also mention that you want to be as descriptive as possible when naming these variables. This is not only for your sake, but for the sake of everyone who has to read your code.
As I said in the beginning of the lesson, variables are a programmers best friend! As we move on from here in the course we’ll be using variables to store and keep track of all the different pieces of information we encounter. Keep practicing and soon enough variables will become an invaluable and second nature part of your programming repertoire!
var name = "Mike"; // String w/ double quotes var occupation = 'programmer'; // String w/ single quotes var age = 20; // Integer var gpa = 2.5; // Floating point number var isTall; // boolean true/false isTall = true; name = "John"; document.write("Your name is " + name);