Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse

Naming

7:01

Variables can be named a wide variety of things. There are rules that you need to follow when creating valid JavaScript variable names. In this video we will see the dos and don'ts of naming variables.

  • 0:00

    [? Music ?] [Treehouse]

  • 0:07

    In the last video, we saw examples of how to create

  • 0:09

    and use variables in JavaScript.

  • 0:12

    Now we'll take a look at the rules that JavaScript places

  • 0:14

    on the names of our variables.

  • 0:17

    Now we're back in our myscript.js file.

  • 0:20

    So far we've declared 2 variables:

  • 0:22

    one called color, and one called myDiv.

  • 0:25

    One stores a string, and one stores an actual div

  • 0:28

    that we have on our page.

  • 0:30

    Now, we've seen 2 different names for variables.

  • 0:32

    So far they all have just been letters, and they started with lower case.

  • 0:37

    But there are a lot of different names we could give our variables.

  • 0:40

    However, there are some restrictions.

  • 0:42

    Let's take a look at how we name our variables.

  • 0:45

    First of all, the names of our variables should be descriptive

  • 0:48

    of what the value of that variable is.

  • 0:51

    If you give a variable a meaningless name,

  • 0:53

    it will be very hard to understand in your code later,

  • 0:56

    even if you think you know what's going on right now.

  • 1:00

    The rules for naming our variable are as follows.

  • 1:03

    It can start with any letter.

  • 1:05

    That's A-Z, and that could be upper case or lower case,

  • 1:10

    or it could start with an underscore,

  • 1:13

    or it could start with a dollar sign.

  • 1:20

    We can continue with either A-Z, upper case or lower case,

  • 1:27

    or any number 0-9, or an underscore,

  • 1:32

    or a dollar sign.

  • 1:34

    And these are what make up our valid variable names.

  • 1:37

    However, you may notice that we cannot start a variable name with a number.

  • 1:42

    That would not be legal, so let's take a look at some valid

  • 1:44

    and invalid variable names.

  • 1:48

    For instance, we could have a var called "car."

  • 1:54

    Our variable name doesn't have to start with a lower case,

  • 1:56

    so we could have something like Color with a capital C.

  • 2:02

    We could even start our variable with an underscore

  • 2:06

    and say something like _myVariable.

  • 2:15

    Or we could start with a dollar sign,

  • 2:21

    or we could do something with numbers in it

  • 2:23

    so long as the numbers aren't the first character in the variable name,

  • 2:26

    so it would be something like "a" with a bunch of numbers.

  • 2:33

    But that's probably not a great variable name.

  • 2:35

    If we were to save this out and go to our browser

  • 2:38

    and refresh, we're going to take a look at the JavaScript console,

  • 2:41

    which in Chrome you can pull up by doing Command, Option, J

  • 2:46

    or opening it from the developer's tools like we saw in Intro to Programming.

  • 2:50

    Now, right now you can see that there are no errors

  • 2:52

    in our code, which is a good sign.

  • 2:54

    If we had an invalid variable name, we would see some errors.

  • 2:58

    Let's see what those errors might look like.

  • 3:05

    One thing you might want to try is a variable like "3colors."

  • 3:12

    If we were to do that and we run our code,

  • 3:16

    we get an error here, and it says "Uncaught syntax error."

  • 3:20

    "Unexpected token illegal."

  • 3:22

    And that's because it did not recognize the number "3colors"

  • 3:26

    as a valid variable name, so this is an error you might encounter in your code

  • 3:30

    if you incorrectly name a variable.

  • 3:33

    Some other errors you could make are using something like

  • 3:36

    a percentage sign.

  • 3:39

    If we comment out the line before and refresh,

  • 3:42

    we can see now we're getting a slightly different message.

  • 3:45

    "Unexpected token %."

  • 3:47

    That's because it understood part of it, but then it saw the percentage sign

  • 3:50

    and did not know what that meant because that's not a valid character

  • 3:54

    to have in a variable name, so let's comment this one out.

  • 3:58

    And let's look at another invalid variable name.

  • 4:01

    For instance, we could do "var person-name."

  • 4:04

    You might be tempted to do something like that.

  • 4:10

    However, if we take a look, we see "Unexpected token -,"

  • 4:13

    again, because dash is not a valid variable name.

  • 4:16

    And if you think about it, it makes sense.

  • 4:18

    A dash in JavaScript is the sign for subtraction,

  • 4:22

    so it doesn't really make sense to have it in the middle of a variable name.

  • 4:26

    And that same rule goes for all sorts of other characters.

  • 4:28

    For instance, we can't have a variable called "@you,"

  • 4:36

    because again, we have an illegal token.

  • 4:39

    We'll just comment all of these out so we don't get these errors again.

  • 4:43

    Now, even within the rules of naming our variables,

  • 4:45

    there are some words that we just can't use as variable names,

  • 4:49

    and that's because they're reserved for special uses in

  • 4:51

    the actual JavaScript language.

  • 4:54

    For instance, the set of JavaScript key words that are already defined

  • 4:57

    in JavaScript are not usable.

  • 4:59

    For instance, things like if, else, function, continue,

  • 5:03

    switch, and more.

  • 5:05

    These are actual words that we use inside of our JavaScript code

  • 5:08

    to define the behavior of our code,

  • 5:11

    and if we named a variable after one of these names,

  • 5:13

    our code simply wouldn't work.

  • 5:16

    For instance, let's see what would happen

  • 5:18

    if we tried to give a variable the name--

  • 5:20

    let's say something like "continue = true."

  • 5:27

    Now, we can see right away our text editor,

  • 5:30

    for instance, has highlighted continue because it recognizes

  • 5:33

    continue as a reserved word in JavaScript.

  • 5:36

    That's our clue that we shouldn't use that word.

  • 5:39

    If we go back and actually run our code,

  • 5:41

    we see "Unexpected token continue."

  • 5:44

    Again, that's because continue actually has

  • 5:46

    a very specific meaning in JavaScript.

  • 5:49

    Besides the key words that we actually use in JavaScript,

  • 5:51

    there are a couple other groups of words

  • 5:53

    that you may not expect to be reserved.

  • 5:56

    For instance, this set of words is actually reserved for

  • 5:59

    possible future use in JavaScript.

  • 6:01

    For instance, class, export, extends, and super.

  • 6:06

    They're not actually used in JavaScript right now,

  • 6:09

    but we can still not use them as variable names because

  • 6:12

    they're reserved for possible future use in future versions of JavaScript,

  • 6:17

    and this is so your code doesn't break if JavaScript is updated later.

  • 6:21

    Finally, there are a set of key words that are new features

  • 6:24

    in later versions of JavaScript.

  • 6:26

    These are features that might work in some browsers but not all.

  • 6:30

    These include the let key word, package, yield,

  • 6:34

    protected, private, and static.

  • 6:37

    Again, these key words you may not use all the time,

  • 6:39

    or you may depending on your environment, but again,

  • 6:42

    you cannot use them as variable names

  • 6:44

    because JavaScript does have them as reserved words.

  • 6:48

    Now you should be familiar with what variable names you can use

  • 6:51

    and what variable names you cannot use.

  • 6:53

    In the next video, we'll learn about a special value called undefined.

  • 6:58

    [? Music ?] [Treehouse]

Show full transcript
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">