Programming 101 - the 5 fundamental elements of any programming language
Variables in JavaScript are pretty straight forward once you understand the concept of dynamic typing, which we talked about in the last article.

Variables in JavaScript are used like variables in any other programming language. They are used to store data for the period of time that a user has a particular web page loaded.

Let's say we want to keep track of someone's name while they are visiting a particular webpage, we could collect their first name using something like the prompt keyword in JavaScript (which we'll talk about in a later article). Once we've prompted the user for their name and they have entered it, we would need to store it somewhere… this is where variables come in handy.

To store something like a name, we'd use code like this:

var myName = "Trevor Page";

When you're declaring a variable in JavaScript, there are two mandatory things (and one optional thing) you need to use:

  1. The var keyword (mandatory)
  2. The name of the variable (mandatory)
  3. A value for the declared variable (optional)

In the example above, we've used the keyword var which tells the JavaScript engine that we wish to declare a variable. We also specified a name for the variable, in this case we used myName as the variable's name. If you've ever used a programming language before, you should be completely comfortable with this. If this is your first time, then keep reading. Finally, and optionally, we've assigned a value to our variable: "Trevor Page" is the String we've assigned.

Now if we were to type in the variable name myName somewhere below the example code above, then we can retrieve the value that's been stored in our variable.

JavaScript Variables in Action

To display what we have stored in our variable, we could use the alert function to display a popup alert on the screen showing the contents of the myName variable.

Here's what that code would look like:


All this code will do is display an alert box which will contain the contents of the myName variable.

Let's actually SEE this code in action shall we? Go ahead and click the button below and then type in your name:

Note: Feel free to click on this button multiple times and enter different names every time, you'll see that the values you enter each time are stored into the myName and will override the previous value.

A Quick Note on JavaScript Variables

Remember that with JavaScript, variables are dynamically typed, so this means that you do NOT need to specify if your variable should be a String, or an Integer, or whatever other data types exist in JavaScript. The JavaScript engine will run an algorithm in the background and determine what the type of your variable should be on your behalf.

This is a time saving process that will free up your precious brainpower to focus on more important things, like what to eat for dinner!

In Summary

Since JavaScript handles a lot of the grunt work when it comes to variables, there's really not much else to talk about.

If this is your first time learning about variables, I'd also suggest you read another article where I go in depth on how variables work (as they pertain to the Java language), just click here to read more about variables.

And as always, don't forget to fill out the form below and receive a free goodie delivered directly to your inbox. More detail on the free swag below!

Free Java Roadmap

Discover exactly what you need to learn and where to start in order to become a professional coder.