JavaScript Variables


Variables are "containers" used to store information.

Example

var x=5;
var y=6;
var z=x+y;

 Try It! 

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.

lampYou 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)

lampBoth 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!';

 Try It! 


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;

 Try It! 

lampA 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;

 Try It! 


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:

compatible_chrome.gifcompatible_edge.gifcompatible_firefox.gifcompatible_safari.gifcompatible_opera.gif
Chrome 58Edge 14Firefox 54Safari 10Opera 55
Jan 2017Aug 2016Mar 2017Jul 2016Aug 2018

You will learn more about JavaScript operators in later chapters of this tutorial.