JavaScript Variables

Overview

In this lesson, we'll introduce variables and how to declare them in Javascript.

Objectives

1. Explain how to declare a variable in JavaScript
2. Explain what variables are good for
3. Declare a variable without assigning a value
4. Declare and define a variable
5. Explain multi-line variable assignment

What are Variables?

Sometimes, we need to store a piece of information so that we can refer to it — often multiple times — later on. In real life, we would probably jot down a note in a notebook or on a post-it.

In programming, we use variables. Variables in JavaScript are used to store data that will be used in our program. A variable can point to almost any type of value including numbers, strings, arrays, objects, and functions.

Variables are assigned values using the = operator. Variable names are typically all lower case; in the case of multiple words, the words are joined together using lowerCamelCase.

You've already seen a couple of examples of variables being assigned:

var name = "Joe"
var height = 70

In the last two lessons, we asked you to modify name and height variables. By changing var name = "Joe" to var name = "Susan", you were able to modify the name variable assignment so that it equalled "Susan" instead of "Joe".

In this lesson, we'll look at a few additional examples of variable declaration.

Declaring Variables

One of the most basic ways to declare a variable is to write the variable name, followed by an equals sign (=) and then the value we want to assign to the variable. For instance, lets say I have the variable word. We could, if we wanted to, write:

word = 'bird'

This would declare a word variable and assign it the value of the string 'bird'. The thing is, now we've declared a global variable. Global variables can be accessed anywhere in an application, which can lead to strange behavior.

Using a global variable is like passing someone a note on a billboard. Sure, it gets the message across, but way more people than necessary now have the message.

What if, for example, we wanted word's value to be something other than 'bird' at some point in the application? Or what if we needed to make use of a variable called word but not this particular word?

In the browser, global variables are all properties of window. What is window? Well, it's the — erm — window in which the browser displays the current page. It holds a whole bunch of things (which is probably obvious), global variables among them.

Accidentally setting variables to "global" is a dangerous, imprecise coding mistake.

var

In the olden days (1995), JavaScript had one way to declare a non-global variable: var. Using the keyword var creates a local variable, meaning that it is only accessible inside the current function in which it is declared. (However, this is a bit tricky - If var is not declared inside a function, it's actually still global!)

Flat fact: What's a function? Well, functions are ways of organizing our code so that we can run it repeatedly. We'll talk more about functions in a bit, but we need to mention them here because they're vital to understanding variable scope in JavaScript (which we will tackle in greater depth when we cover functions). Don't worry too much right now about what exactly a function is; we just want to get used to seeing the word.

Below is an example of how how this works. If you would like to follow along, in your terminal, type node. This will open Node and allow you to write JavaScript directly in the terminal. Alternatively, using Chrome, you can [open a console in your browser's developer tools][devtools] and paste JavaScript there as well.

// declare the variable
var word

// assign a value to the variable
word = 'bird'

console.log(word) // 'bird'

// assign another value to the variable
word = 'dog'

console.log(word) // 'dog'

Note that word = 'bird' is present here, but this time, it isn't automatically a global variable. This is because we've already declared word with var word. With this line present, word = 'bird' is just assigning a value to the existing variable.

Once we have declared a local variable word with var word, we can assign and reassign its value as we please.

We can perform variable declaration and assignment on the same line to save space:

var word = 'bird'

What does it mean that word is a local variable? Well, if we're just entering it in the console, not much — the variable still becomes a property of window, meaning... in this case, 'word" is a global variable (as mentioned above). (Go ahead, try typing window.word in the console — prepare to be amazed!)

We'll learn more about local and global variables in a later lesson. For now, know that you should always declare a variable with var.

Multi-line Variable Assignment

Let's say I needed to declare and define multiple variables. It feels like a lot to have to repeat var over and over again. JavaScript allows us to do multi-line variable assignment to alleviate this pain. Every variable must be separated with a comma, and the entire line must end with a semicolon.

Let's condense the below code into one line:

var a = 5
var b = 2
var c = 3
var d = 'hello'
var e = 'goodbye'

The above is equivalent to:

var a = 5,
    b = 2,
    c = 3,
    d = 'hello',
    e = 'goodbye';

which can be converted to:

var a = 5, b = 2, c = 3, d = 'hello', e = 'goodbye';

Try typing each variable in the console. You should see the appropriate values returned for each one.

Personally, we're of the opinion that it's best to declare each variable with its own var keyword. The comma fanciness saves a little bit of typing, but at the expense of nonstandard indentation (you're using two spaces, right?) and can introduce a bit of weirdness if we're doing anything other than simple assignment.

Changing values

Sometimes, information changes — we have to scratch out old notes and scribble in revisions.

In JavaScript, we can simply reassign the new value to the variable.

var myNote = "Get milk"

// later on

myNote = "Get cookies"

When we change the value of a variable, we do not use var again. We simply use the = to give the variable a new value.

View JavaScript Variable Assignment and Declaration on Learn.co and start learning to code for free.