1
00:00:00,000 --> 00:00:04,688
[MUSIC]

2
00:00:04,688 --> 00:00:07,604
Printing a fixed value to the console or
passing it to alert,

3
00:00:07,604 --> 00:00:12,470
like your name in quotes, or the number
100, for example, isn't all that useful.

4
00:00:12,470 --> 00:00:13,480
Most of the time,

5
00:00:13,480 --> 00:00:16,389
a JavaScript program needs to work
with information that changes.

6
00:00:17,690 --> 00:00:21,730
For instance, a social media site
displays custom information to each user.

7
00:00:21,730 --> 00:00:23,890
A game shows a player's current score, and

8
00:00:23,890 --> 00:00:27,420
an online shopping cart includes
all items selected by the user.

9
00:00:27,420 --> 00:00:30,170
A program needs a way of keeping
track of all this information.

10
00:00:31,810 --> 00:00:33,190
Information that changes or

11
00:00:33,190 --> 00:00:37,530
varies each time a program runs is often
stored in what's called a variable.

12
00:00:37,530 --> 00:00:40,690
Variables are one of the most
important concepts in programming.

13
00:00:40,690 --> 00:00:44,830
A variable is a way of storing and keeping
track of information in a program so

14
00:00:44,830 --> 00:00:46,550
that it can be later used and manipulated.

15
00:00:47,680 --> 00:00:51,370
For example, a computer game
keeps track of a player's score.

16
00:00:51,370 --> 00:00:55,750
At the start of the game, the score is 0,
but can go up if the player does well, or

17
00:00:55,750 --> 00:00:57,980
down if the player makes a mistake.

18
00:00:57,980 --> 00:01:00,870
The game might even end if the player
reaches a particular score.

19
00:01:01,880 --> 00:01:04,460
Score is an example of a variable.

20
00:01:04,460 --> 00:01:08,660
Although the score's value will change,
0 at the beginning, 100 at the end, for

21
00:01:08,660 --> 00:01:11,930
example, it's still always just
one score for that player.

22
00:01:13,250 --> 00:01:17,150
Think of a variable as a box that
you labeled with a unique name.

23
00:01:17,150 --> 00:01:21,140
You can put something inside the box, look
inside the box to find out what's in it.

24
00:01:21,140 --> 00:01:24,600
You can empty the box and
even put something new in the box.

25
00:01:24,600 --> 00:01:26,740
While the contents of the box changes,

26
00:01:26,740 --> 00:01:30,650
it's still always the same box
with the unique label you gave it.

27
00:01:30,650 --> 00:01:35,040
A program might need lots of variables
to keep track of lots of information.

28
00:01:35,040 --> 00:01:38,100
In order for your program to
follow all those variables,

29
00:01:38,100 --> 00:01:40,370
you'll need a way to
identify each variable.

30
00:01:40,370 --> 00:01:42,610
That's why each variable
has its own unique name,

31
00:01:42,610 --> 00:01:45,680
like score,
which identifies that one variable.

32
00:01:45,680 --> 00:01:48,560
Let's look at the syntax for
creating a variable.

33
00:01:48,560 --> 00:01:51,060
You start with a special JavaScript word.

34
00:01:51,060 --> 00:01:53,340
This is called a keyword,
and its name is var.

35
00:01:54,380 --> 00:01:59,720
Var is short for variable, and it creates
the labeled box I mentioned earlier.

36
00:01:59,720 --> 00:02:03,500
We follow that with a space and
a name for that variable.

37
00:02:03,500 --> 00:02:06,730
This is what's called
declaring a variable.

38
00:02:06,730 --> 00:02:10,570
When you declare a variable with the var
keyword, you can leave it empty.

39
00:02:10,570 --> 00:02:13,850
In that case, add a semicolon
to the end of the statement.

40
00:02:13,850 --> 00:02:18,090
Or you can create the variable and put
something into it in a single statement.

41
00:02:18,090 --> 00:02:22,340
Using an equal sign,
you can insert a value in a variable.

42
00:02:22,340 --> 00:02:24,855
The equal sign is called
an assignment operator.

43
00:02:24,855 --> 00:02:28,690
It instructs the JavaScript engine
to put whatever's on the right side

44
00:02:28,690 --> 00:02:30,700
into the name on the left side.

45
00:02:30,700 --> 00:02:33,880
In this example, put 0 into score.

46
00:02:33,880 --> 00:02:35,753
When you place something in a variable,

47
00:02:35,753 --> 00:02:38,020
it's called assigning
a value to the variable.

48
00:02:39,910 --> 00:02:42,060
Now, let's declare and use a variable.

49
00:02:42,060 --> 00:02:45,690
To code along with me, launch
the latest workspace with this video.

50
00:02:45,690 --> 00:02:49,920
In the js folder,
there's a file named var.js.

51
00:02:49,920 --> 00:02:53,600
And the script tag in
index.html points to this file,

52
00:02:53,600 --> 00:02:56,490
which logs a message to the console.

53
00:02:56,490 --> 00:03:01,730
Again, var is just the name that
I chose to use for this file.

54
00:03:01,730 --> 00:03:06,810
In var.js,
let's use a variable with console.log.

55
00:03:06,810 --> 00:03:11,690
First, I'll use the var keyword
to declare a new variable.

56
00:03:11,690 --> 00:03:14,790
This creates an empty
variable named message.

57
00:03:14,790 --> 00:03:18,480
I'll talk more about naming variables
in the next video, but in general,

58
00:03:18,480 --> 00:03:23,210
a variable's name should clearly describe
what the variable will be used for.

59
00:03:23,210 --> 00:03:29,210
We can put something inside the variable
or assign it a value using the equal sign.

60
00:03:29,210 --> 00:03:34,840
Here, I'm putting the word, Hello, and
an exclamation point inside the variable.

61
00:03:34,840 --> 00:03:38,550
You use quotes to indicate
the actual letters, numbers and

62
00:03:38,550 --> 00:03:41,150
symbols that you want to
display in a message.

63
00:03:41,150 --> 00:03:45,570
A series of characters inside quotes
like this is called a string.

64
00:03:45,570 --> 00:03:47,740
You'll learn more about
strings later in this course.

65
00:03:48,950 --> 00:03:51,480
Once you store information in a variable,

66
00:03:51,480 --> 00:03:55,960
you can access and use its assigned
value whenever you need it.

67
00:03:55,960 --> 00:03:59,750
To access the contents of the variable,
you type its name.

68
00:03:59,750 --> 00:04:03,305
For example, replace the text,
Hello from var.js,

69
00:04:03,305 --> 00:04:07,860
inside console.log with the variable name,
message.

70
00:04:07,860 --> 00:04:08,722
I'll save this file,

71
00:04:08,722 --> 00:04:14,420
preview index.html in the browser,
and open the JavaScript console.

72
00:04:14,420 --> 00:04:17,980
Notice how the console prints
message instead of Hello.

73
00:04:19,910 --> 00:04:24,130
Because there are still quotation marks
around message, we're telling the browser

74
00:04:24,130 --> 00:04:30,120
to log the word message,
not the contents of the variable message.

75
00:04:30,120 --> 00:04:32,270
This is a quick fix, remove the quotes.

76
00:04:34,750 --> 00:04:37,730
Save the file, and refresh the page.

77
00:04:37,730 --> 00:04:39,930
Now, instead of seeing the word, message,

78
00:04:39,930 --> 00:04:44,760
I see the content stored inside
the variable message, in this case, Hello!

79
00:04:46,380 --> 00:04:53,160
In my program, the word, message,
is now a reference to the value, Hello!

80
00:04:53,160 --> 00:04:56,130
So whenever I use message in the program,

81
00:04:56,130 --> 00:05:00,850
as long as I don't change its value,
it will always mean Hello!

82
00:05:00,850 --> 00:05:04,880
Variables are useful because you
can change what's inside them.

83
00:05:04,880 --> 00:05:09,375
Let's change the contents of the message
variable by adding another line of code

84
00:05:09,375 --> 00:05:11,395
and assigning it a new value.

85
00:05:12,795 --> 00:05:16,685
This time, the message,
Hello from JavaScript Basics.

86
00:05:20,655 --> 00:05:24,355
This is called reassigning the variable.

87
00:05:24,355 --> 00:05:27,175
And notice that I'm not
using the var keyword again.

88
00:05:27,175 --> 00:05:32,880
When you reassign a variable to a new
value, you don't use var a second time.

89
00:05:32,880 --> 00:05:37,920
Only use it when you first create or
declare the variable.

90
00:05:37,920 --> 00:05:41,497
The equal sign assigns a new
string to the variable,

91
00:05:41,497 --> 00:05:45,800
which means that the initial value,
Hello!, is gone.

92
00:05:45,800 --> 00:05:50,860
In other words, if I use the message
variable anywhere below line 4,

93
00:05:50,860 --> 00:05:55,350
it's a reference to the value, Hello
from JavaScript Basics, and not Hello!

94
00:05:57,020 --> 00:06:04,800
You can confirm this by adding
another console.log below, like this.

95
00:06:04,800 --> 00:06:07,730
Save the file, and refresh the page.

96
00:06:07,730 --> 00:06:10,790
This time, two different
messages appear on the console.

97
00:06:10,790 --> 00:06:12,410
First, Hello!

98
00:06:12,410 --> 00:06:15,270
Then, Hello from JavaScript Basics.

99
00:06:15,270 --> 00:06:18,830
The exact same line of code,
console.log(message),

100
00:06:18,830 --> 00:06:20,870
produces two different results.

101
00:06:20,870 --> 00:06:23,190
That's part of the power of variables.

102
00:06:23,190 --> 00:06:26,510
Now, this is just one way to declare and
work with variables.

103
00:06:26,510 --> 00:06:29,150
You'll learn other techniques
later in this stage.

104
00:06:29,150 --> 00:06:32,400
Next, you'll learn about the rules for
naming JavaScript variables.