### Variables

Computer programs exist to manipulate data. What they basically do is receive some input, process it and show some output. So far we haven't seen our websites as computer programs yet because we only had static pages. But from this moment on, if we want our websites to be dynamic and interactive we need to think of them as computer programs running on the web.

Take a look at the simple example of interactivity with the user below.

In this example we are working with data. We get the user input, generate the greeting message and show it inside an HTML element. There's also some logic involved, because if the field is left blank, we replace the user input with "guest user".

In order to work with data in a computer program, we need variables.

Variables are used to store data so we can use it later. Therefore we need to give them names so we can refer to them. The name of a variable is also called the identifier.

We create variables using the "var" keyword followed by its name, then an equal sign and the value we want to assign to it.

        var user_name = "guest user";

After assigning the string value "guest user" to the variable, we can access it anytime we want. To test it, let's create a variable like above and then run the following statement:

        console.log(user_name);

What's the use of sending this value to the console? This is a good method of testing. Now that we know that our variable was created and the value has been correctlly assigned to it we can use it to form the greeting message and place it inside that html element.

        document.getElementById("user_greeting_message").innerHTML = "Hello " + user_name + "!";

To form the message above we are doing string concatenation. In the next lesson we'll talk about data types and you will learn more details about this.

Before we move ahead, we need to know some rules for naming variables.

#### Variable names or Identifiers

Variable names can contain:

- Letters
- Numbers
- Underscores (_)
- Dollar signs ($)

Important: Variable names can contain numbers but they can't start with numbers. White spaces are also not allowed.

See below a few examples of names:

        a             // ok

        name          // ok

        $name         // ok

        students_name // ok

        student_1     // ok

        1_b           // invalid because it starts with a number

        my-name       // invalid because it has a dash (only underscores are allowed)

        my name       // invalid because it contains a white space

        new           // invalid because 'new' is a Javascript reserved word, like will be explained below.

If you speak a foreign language avoid using characters that don't exist in english, like ç, å, é, д, 国, etc. Although they are acceptable, we should also write universal code that can be easily maintained by anyone who understands english.

#### Keywords

Keywords (or reserved words) are used for internal functions and commands and therefore can't be used as variable names. See below some examples of keywords:

- function
- if
- else
- var
- new
- return
- break
- default
- in

See the complete list of keywords here.

#### Case Sensitive

As explained earlier, Javascript is a "case sensitive" language, so have this in mind when creating your variable names. If you name a variable as "username" and then try to call it as "Username" you will get an error.

#### Keep your names meaningful and self-explanatory

Good code should be easily understood not only by who wrote it but also by other people, so think of that when naming your variables. If we're to create a program to get the first and last name of a person, which of the names below do you think we should choose:

        //Option # 1:
        var first_name = "John";
        var last_name = "Doe";

        //Option # 2:
        var name1 = "John";
        var name2 = "Doe";

        //Option # 3:
        var a = "John";
        var b = "Doe";

It should be pretty obvious that the first option is the best one. The second option is acceptable but not very good. The third option is terrible.

#### Naming convention

Programming languages normally have naming conventions to make the code more easily readable. Javascript programmers usually choose the lower camelCase style for naming variables. This means first letter lowercase and the first letters of subsequent words in uppercase.

        // camelCase examples:

        firstName

        lastName

        exchangeRate

        maxContainerWidth

        screenSize

Using only lower case characters and underscores to separate words, like last_name or max_container_width is also common. Pick the style you feel most comfortable with and keep consistent. Also try to keep the names as short as possible, which means that firstName is better than firstNameOfTheUser.

### Contents