- Introducing Variables 6:33
- Create a Variable 1 objective
- Naming Variables
- Creating and Naming Variables Review 6 questions
- Change the Value in a Variable 3:41
- Define Variables with let and const 6:21
- Spacing and New Lines in JavaScript
- Update the Value of a Variable 1 objective
- Variables Review 6 questions
Preview
Video Player
00:00
00:00
Introducing Variables
6:33Learn how to use variables to store and track information, as well as use and manipulate information.
[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