JavaScript Variables
Variables are "containers" used to store information.
Example
var x=5; var y=6; var z=x+y;
Just Like Algebra
x=5
y=6
z=x+y
In algebra, we use letters (such as x) to store values (such as 5).
Through the above expression z=x+y, we can calculate the value of z to 11.
In JavaScript, these letters are called variables.
 | You can think of variables as containers for storing data. |
|---|
JavaScript Variables
Like algebra, JavaScript variables can be used to store values (such as x=5) and expressions (such as z=x+y).
Variables can use short names (such as x and y) or more descriptive names (such as age, sum, totalvolume).
Variables must start with a letter
Variables can also start with $ and _ symbols (but we don’t recommend this)
Variable names are case sensitive (y and Y are different variables)
| Both JavaScript statements and JavaScript variables are case sensitive. |
|---|
JavaScript Data Types
JavaScript variables can also store other data types, such as text values (name="Bill Gates").
In JavaScript, a piece of text like "Bill Gates" is called a string.
There are many types of JavaScript variables, but for now, we only focus on numbers and strings.
When you assign a text value to a variable, you should surround the value with double quotes or single quotes.
When the value you assign to a variable is a numeric value, do not use quotation marks. If you surround the value with quotation marks, the value will be treated as text.
Example
var pi=3.14; // If you are familiar with ES6, pi can use the const keyword to indicate a constant // const pi = 3.14; var person="John Doe"; var answer='Yes I am!';
Declare / Create JavaScript Variables
Creating variables in JavaScript is usually called "declaring" variables.
We use the var keyword to declare variables:
var carname;
After the variable is declared, the variable is empty (it has no value).
To assign a value to a variable, use the equal sign:
carname="Dodge";
However, you can also assign values to variables when declaring them:
var carname="Dodge";
In the following example, we created a variable named carname, assigned the value "Dodge" to it, and put it in the HTML paragraph with id="demo":
Example
var carname="Dodge";
document.getElementById("demo").innerHTML=carname; | A good programming practice is to declare the required variables uniformly at the beginning of the code. |
|---|
Multiple Variables in One Statement
You can declare many variables in one statement. The statement starts with var and uses commas to separate variables:
var lastname="Doe", age=30, job="carpenter";
The statement can also span multiple lines:
var lastname="Doe",
age=30,
job="carpenter";
Multiple variables declared in a statement cannot be assigned the same value at the same time:
var x,y,z=1;
x and y are undefined and z is 1.
Value = undefined
In computer programs, variables with no value are often declared. The value of a variable declared without a value is actually undefined.
After executing the following statement, the value of the variable carname is undefined:
var carname;
Redeclare JavaScript Variables
If you redeclare a JavaScript variable, the value of the variable will not be lost:
After the following two statements are executed, the value of the variable carname is still "Volvo":
var carname="Volvo";
var carname;
JavaScript Arithmetic
You can do arithmetic through JavaScript variables, using operators such as = and +:
Example
y=5; x=y+2;
Use let and const (ES6)
Before 2015, we used the var keyword to declare JavaScript variables.
The JavaScript version (ES6) after 2015 allows us to use the const keyword to define a constant, and to use the let keyword to define a variable within a limited scope.
For more const and let content, please refer to: JavaScript let and const.
Safari 10 and Edge 14 are the first browsers to support all the features of ES6:
 |  |  |  |  |
|---|---|---|---|---|
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
You will learn more about JavaScript operators in later chapters of this tutorial.