In this lesson, we'll introduce variables and how to declare them in Javascript.
- Explain how to declare a variable in JavaScript
- Explain what variables are good for
- Declare a variable without assigning a value
- Declare and define a variable
- Explain multi-line variable assignment
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.
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.
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
.
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.
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.