Learn How JavaScript Variables Work

JavaScript Coding Boot Camp

After reading the last few articles on JavaScript tutorials, you should also know how you can use it, what it can do for you and what its main features are. In this article, you will learn how to work with the JavaScript variable, one of the most basic parts of JavaScript.

What You Need for Your JavaScript Bootcamp

The best way to learn about the JavaScript variable is through hands-on practice. In fact, you will need to type lines of code as you read this article to enforce your understanding of the content. If you are using your computer, you can type the code into your browser’s JavaScript console. This is a good practice to keep in mind when you are enrolled in any JavaScript bootcamp

What Is a JavaScript Variable?

A JavaScript variable holds a value, similar to a number that might be used in a sum, but whose values can change. A variable itself is not a value; it is simply a container for a value. A good way to think of a variable is as a box that you would store items in. For example, if you wanted to add a box that pops up asking a reader for their name, you could store the value in a JavaScript variable, which could then be used to show a personalized welcome message.

Without a variable, you would need to use a much larger block of code including every possible name to produce the same message. Not only is this inefficient, but you would not be able to store every possible name that exists — there are just too many.

Keep in mind, a variable can contain nearly any kind of information, not just numbers and strings. You can also use variables to place complicated data and additional functions that can do a variety of things.

Creating a JavaScript Variable

The first step is to create — or declare — the JavaScript variable. To begin with, you will type out “var” or “let” followed by what you want to call the variable. For example, you could type out:

This would create two variables: myAge and myName. Try typing this into your browser or creating your JavaScript variable, but remember that all these code instructions end with a semicolon. This is especially important when you are creating more than one line of code, so it’s a good habit to include semicolons as you type.

To determine if your variables exist, try typing just the name of the variable (myAge and myName). Because these do not have any value yet, the value should show up as an undefined return. However, if they do not exist, you will get an error message. 

Working With Your JavaScript Variable

After declaring the JavaScript variable, initialize it by giving it a value. Type out the name of your JavaScript variable and add an equal sign, followed by the value that you would like to assign it. You can do this by typing out:

Next, go to the console and type in these lines to see the variable’s value. Most of the time, it is fastest to both declare and initialize the variable at the same time. It would look like:

Var vs. Let

When the JavaScript variable was first created, only var was used, and let was created later with more modern JavaScript versions.

If you write a program in JavaScript using multiple lines and a variable, you can declare it after you initialize it and still have it work well. While using var allows you to declare one variable multiple times, let does not. 

Using let allows you to simplify your code a little bit, so unless you are supporting older versions of Internet Explorer, there is no reason to use the more complex var.

Updating Your JavaScript Variable

After you have initialized your JavaScript variable with a value, you can update it by changing the value. While you can call your variable anything you want, you should usually use a-z characters and 0-9 numbers and use a name that describes it well to avoid any confusion down the road. An underscore will also work as long as you do not use it at the start of a JavaScript variable or its name, but other characters can cause errors and be difficult to understand.

A good rule of thumb is to use a “lower camel case,” which involves placing multiple words together and using lower case for the first word with other words capitalized. Remember, a JavaScript variable is case-sensitive.

You also should avoid using words that are reserved for JavaScript, including let, var and function, since they will cause a browser error. In your JavaScript bootcamp, you will likely learn both good and bad name examples.

Here are a few examples of good names that you can use:

  • finalOutputValue
  • myAge
  • age 
  • video2
  • initialColor

And some examples of bad names to avoid:

  • 5
  • y
  • _age
  • myname 
  • let
  • var
  • usingaverylongvariablenameisnotgood

Closing Thoughts 

This is just an introduction to JavaScript variables. If you are interested in learning more, a JavaScript bootcamp in San Francisco might be right for you.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.

Get Program Info

The following requires your attention:

Ready to learn more about Berkeley Coding Boot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.