Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to use variables to store and track information, as well as use and manipulate information.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Printing a fixed value to the console or
passing it to alert,
0:04
like your name in quotes, or the number
100, for example, isn't all that useful.
0:07
Most of the time,
0:12
a JavaScript program needs to work
with information that changes.
0:13
For instance, a social media site
displays custom information to each user.
0:17
A game shows a player's current score, and
0:21
an online shopping cart includes
all items selected by the user.
0:23
A program needs a way of keeping
track of all this information.
0:27
Information that changes or
0:31
varies each time a program runs is often
stored in what's called a variable.
0:33
Variables are one of the most
important concepts in programming.
0:37
A variable is a way of storing and keeping
track of information in a program so
0:40
that it can be later used and manipulated.
0:44
For example, a computer game
keeps track of a player's score.
0:47
At the start of the game, the score is 0,
but can go up if the player does well, or
0:51
down if the player makes a mistake.
0:55
The game might even end if the player
reaches a particular score.
0:57
Score is an example of a variable.
1:01
Although the score's value will change,
0 at the beginning, 100 at the end, for
1:04
example, it's still always just
one score for that player.
1:08
Think of a variable as a box that
you labeled with a unique name.
1:13
You can put something inside the box, look
inside the box to find out what's in it.
1:17
You can empty the box and
even put something new in the box.
1:21
While the contents of the box changes,
1:24
it's still always the same box
with the unique label you gave it.
1:26
A program might need lots of variables
to keep track of lots of information.
1:30
In order for your program to
follow all those variables,
1:35
you'll need a way to
identify each variable.
1:38
That's why each variable
has its own unique name,
1:40
like score,
which identifies that one variable.
1:42
Let's look at the syntax for
creating a variable.
1:45
You start with a special JavaScript word.
1:48
This is called a keyword,
and its name is var.
1:51
Var is short for variable, and it creates
the labeled box I mentioned earlier.
1:54
We follow that with a space and
a name for that variable.
1:59
This is what's called
declaring a variable.
2:03
When you declare a variable with the var
keyword, you can leave it empty.
2:06
In that case, add a semicolon
to the end of the statement.
2:10
Or you can create the variable and put
something into it in a single statement.
2:13
Using an equal sign,
you can insert a value in a variable.
2:18
The equal sign is called
an assignment operator.
2:22
It instructs the JavaScript engine
to put whatever's on the right side
2:24
into the name on the left side.
2:28
In this example, put 0 into score.
2:30
When you place something in a variable,
2:33
it's called assigning
a value to the variable.
2:35
Now, let's declare and use a variable.
2:39
To code along with me, launch
the latest workspace with this video.
2:42
In the js folder,
there's a file named var.js.
2:45
And the script tag in
index.html points to this file,
2:49
which logs a message to the console.
2:53
Again, var is just the name that
I chose to use for this file.
2:56
In var.js,
let's use a variable with console.log.
3:01
First, I'll use the var keyword
to declare a new variable.
3:06
This creates an empty
variable named message.
3:11
I'll talk more about naming variables
in the next video, but in general,
3:14
a variable's name should clearly describe
what the variable will be used for.
3:18
We can put something inside the variable
or assign it a value using the equal sign.
3:23
Here, I'm putting the word, Hello, and
an exclamation point inside the variable.
3:29
You use quotes to indicate
the actual letters, numbers and
3:34
symbols that you want to
display in a message.
3:38
A series of characters inside quotes
like this is called a string.
3:41
You'll learn more about
strings later in this course.
3:45
Once you store information in a variable,
3:48
you can access and use its assigned
value whenever you need it.
3:51
To access the contents of the variable,
you type its name.
3:55
For example, replace the text,
Hello from var.js,
3:59
inside console.log with the variable name,
message.
4:03
I'll save this file,
4:07
preview index.html in the browser,
and open the JavaScript console.
4:08
Notice how the console prints
message instead of Hello.
4:14
Because there are still quotation marks
around message, we're telling the browser
4:19
to log the word message,
not the contents of the variable message.
4:24
This is a quick fix, remove the quotes.
4:30
Save the file, and refresh the page.
4:34
Now, instead of seeing the word, message,
4:37
I see the content stored inside
the variable message, in this case, Hello!
4:39
In my program, the word, message,
is now a reference to the value, Hello!
4:46
So whenever I use message in the program,
4:53
as long as I don't change its value,
it will always mean Hello!
4:56
Variables are useful because you
can change what's inside them.
5:00
Let's change the contents of the message
variable by adding another line of code
5:04
and assigning it a new value.
5:09
This time, the message,
Hello from JavaScript Basics.
5:12
This is called reassigning the variable.
5:20
And notice that I'm not
using the var keyword again.
5:24
When you reassign a variable to a new
value, you don't use var a second time.
5:27
Only use it when you first create or
declare the variable.
5:32
The equal sign assigns a new
string to the variable,
5:37
which means that the initial value,
Hello!, is gone.
5:41
In other words, if I use the message
variable anywhere below line 4,
5:45
it's a reference to the value, Hello
from JavaScript Basics, and not Hello!
5:50
You can confirm this by adding
another console.log below, like this.
5:57
Save the file, and refresh the page.
6:04
This time, two different
messages appear on the console.
6:07
First, Hello!
6:10
Then, Hello from JavaScript Basics.
6:12
The exact same line of code,
console.log(message),
6:15
produces two different results.
6:18
That's part of the power of variables.
6:20
Now, this is just one way to declare and
work with variables.
6:23
You'll learn other techniques
later in this stage.
6:26
Next, you'll learn about the rules for
naming JavaScript variables.
6:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up