JavaScript Variables

JavaScript Variables

JavaScript variables are containers for storing data values.

In this example, x, y, and z are variables:

Example

var x = 7;
var y = 8;
var z = x + y;

Try It Yourself

From the above example, you can obtain:

  • x stores the value 7
  • y stores the value 8
  • z stores the value 15

Similar to algebra

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

Example

var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;

Try It Yourself

In programming, similar to algebra, we use variables (such as price1) to store values.

In programming, similar to algebra, we use variables in expressions (total = price1 + price2).

From the above example, you can calculate that the value of 'total' is 27.

Tip:JavaScript variables are containers for storing data values.

JavaScript identifiers

all JavaScript variablesmust start withunique names'sIdentifiers.

These unique names are calledIdentifiers.

Identifiers can be short names (such as x and y), or more descriptive names (age, sum, totalVolume).

The general rule for constructing variable names (unique identifiers) is:

  • Names can contain letters, numbers, underscores, and dollar signs
  • Names must start with a letter
  • Names can also $ and _ can start with (but we won't do that in this tutorial)
  • Names are case-sensitive (y and Y are different variables)
  • Reserved words (such as JavaScript keywords) cannot be used as variable names

Tip:JavaScript identifiers are case-sensitive.

assignment operator

In JavaScript, the equal sign (=is the assignment operator, not the 'equal to' operator.

This is different from algebra. The following code is not reasonable in algebra:

x = x + 5

However, in JavaScript, it is very reasonable: assign the value of x + 5 to x.

（Calculate the value of x + 5 and put the result in x. The value of x increases by 5.）

Note:The "equals" operator in JavaScript is ==.

JavaScript Data Types

JavaScript variables can store numbers like 100, as well as text values like "Bill Gates".

In programming, text values are called strings.

JavaScript can handle multiple data types, but for now, we only focus on numeric and string values.

Strings are enclosed in double or single quotes. Numbers do not need quotes.

If you put a number in quotes, it will be treated as a text string.

Example

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

Try It Yourself

Declaration (Creation) of JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.

You can declare a variable in JavaScript by var Keywords to declare JavaScript variables are:

var carName;

After declaration, variables do not have a value. (Technically, its value is undefined。）

For example,AssignmentUse the equal sign to assign a value to a variable:

carName = "porsche";

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

var carName = "porsche";

In the above example, we created a variable named carName and assigned it the value "porsche".

Then, we "output" the value in the HTML paragraph with id="demo":

Example

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

Try It Yourself

Tip:

It is a good habit to declare all variables at the beginning of the script!

One statement, multiple variables

You can declare many variables in one statement. var As the beginning of a statement, and followed by:CommaSeparate variables with:

var person = "Bill Gates", carName = "porsche", price = 15000;

Try It Yourself

Declaration can span multiple lines:

var person = "Bill Gates",
carName = "porsche",
price = 15000;

Try It Yourself

Value = undefined

In computer programs, declared variables are often without a value. The value can be content that needs to be calculated, or data provided later, such as data input.

Variables without a value will be undefined.

The value of the variable carName after executing this statement is undefined:

Example

var carName;

Try It Yourself

Repeating the declaration of JavaScript variables

If you declare a JavaScript variable again, its value will not be lost.

After executing these two statements, the value of the variable carName remains "porsche":

Example

var carName = "porsche";
var carName;

Try It Yourself

JavaScript Arithmetic

Similar to algebra, you can perform arithmetic operations with JavaScript variables using = and + such operators as:

Example

var x = 3 + 5 + 8;

Try It Yourself

Strings can also use the plus sign, but strings will be concatenated:

Example

var x = "Bill" + " " + "Gates";

Try It Yourself

Try this out as well:

Example

var x = "8" + 3 + 5;

Try It Yourself

Tip:If the number to be added is placed in quotes, the rest of the numbers will be treated as strings and concatenated.

Try this out now:

Example

var x = 3 + 5 + "8";

Try It Yourself

Supplementary Reading

Advanced JavaScript Tutorial: ECMAScript Syntax, ECMAScript Variable