2.1 JS Variables

Much Like Algebra

In this example, price1, price2, and total, are variables:

Example 2: JavaScript Variables part 2

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

• In programming, just like in algebra, we use variables (like price1) to hold values.
• In programming, just like in algebra, we use variables in expressions (total = price1 + price2).
• From the example above, you can calculate the total to be 11.

JavaScript variables are containers for storing data values.

JavaScript Data Types

• JavaScript variables can hold numbers like 100 and text values like "John Doe".
• In programming, text values are called text strings.
• JavaScript can handle many types of data, but for now, just think of numbers and strings.
• Strings are written inside double or single quotes. Numbers are written without quotes.
• If you put a number in quotes, it will be treated as a text string.

Example 3: JavaScript Variables part 3

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declaring (Creating) JavaScript Variables

• Creating a variable in JavaScript is called "declaring" a variable.
• You declare a JavaScript variable with the var keyword:

var carName;

• After the declaration, the variable has no value (technically it has the value of undefined).
• To assign a value to the variable, use the equal sign:

carName = "Volvo";

You can also assign a value to the variable when you declare it:

var carName = "Volvo";

• In the example below, we create a variable called carName and assign the value "Volvo" to it.
• Then we "output" the value inside an HTML paragraph with id="demo":

Example 4: JavaScript Variables part 4

<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

It's a good programming practice to declare all variables at the beginning of a script.

One Statement, Many Variables

• You can declare many variables in one statement.
• Start the statement with var and separate the variables by comma:

var person = "John Doe", carName = "Volvo", price = 200;

var person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;

A declaration can span multiple lines:

Example 5: JavaScript Variables part 5

var person = "John Doe",
carName = "Volvo",
price = 200;

Value = undefined

• In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input.
• A variable declared without a value will have the value undefined.
• The variable carName will have the value undefined after the execution of this statement:

Example 6: JavaScript Variables part 6

var carName;

Re-Declaring JavaScript Variables

• If you re-declare a JavaScript variable, it will not lose its value.
• The variable carName will still have the value "Volvo" after the execution of these statements:

Example 7: JavaScript Variables part 7

var carName = "Volvo";
var carName;

JavaScript Arithmetic

As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:

Example 8: JavaScript Variables part 8

var x = 5 + 2 + 3;

You can also add strings, but strings will be concatenated:

Example 9: JavaScript Variables part 9

var x = "John" + " " + "Doe";

Also try this:

Example 10: JavaScript Variables part 10

var x = "5" + 2 + 3;

If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated.

Now try this:

Example 11: JavaScript Variables part 11

var x = 2 + 3 + "5";

JavaScript Dollar Sign $

Remember that JavaScript identifiers (names) must begin with:

• A letter (A-Z or a-z)
• A dollar sign ($)
• Or an underscore (_)

Since JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable names:

Example 12: JavaScript Variables part 12

var $$$ = "Hello World";
var $ = 2;
var $myMoney = 5;

• Using the dollar sign is not very common in JavaScript, but professional programmers often use it as an alias for the main function in a JavaScript library.
• In the JavaScript library jQuery, for instance, the main function $ is used to select HTML elements. In jQuery $("p"); means "select all p elements".

JavaScript Underscore (_)

Since JavaScript treats underscore as a letter, identifiers containing _ are valid variable names:

Example 13: JavaScript Variables part 13

var _lastName = "Johnson";
var _x = 2;
var _100 = 5;

Using the underscore is not very common in JavaScript, but a convention among professional programmers is to use it as an alias for "private (hidden)" variables.