JavaScript Variables

Variables are used as "containers" to store information.

Example

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

Like Algebra

x = 5

In algebra, we use letters (like x) to hold values (like 5).

From the expression z = x + y, we can calculate that z is 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 hold values (like x = 5) and expressions (like z = x + y).

Variables can use short names (like x and y) or more descriptive names (like age, sum, totalVolume).

• Variables must begin with a letter
• Variables can also begin with $ and _ (but we do not recommend this)
• Variable names are case-sensitive (y and Y are different variables)

| | JavaScript statements and variables are case-sensitive. | | --- | --- |

JavaScript Data Types

JavaScript variables can also hold other data types, such as text values (name = "Bill Gates").

In JavaScript, a text like "Bill Gates" is called a string.

JavaScript variables have many types, but for now, we focus on numbers and strings.

When assigning a text value to a variable, enclose the value in double or single quotes.

When assigning a numeric value, do not use quotes. If you surround a number with quotes, it will be treated as text.

Example

var pi = 3.14;  
// If you are familiar with ES6, pi can be a constant using the const keyword
// const pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

Declaring (Creating) JavaScript Variables

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

We use the var keyword to declare a variable:

After the variable is declared, it is empty (it has no value).

To assign a value to the variable, use an equal sign:

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

In the following example, we create a variable called carname, assign the value "Volvo" to it, and then place it in the HTML paragraph with id="demo":

Example

var carname = "Volvo";
document.getElementById("demo").innerHTML = carname;

| | A good programming practice is to declare all variables at the beginning of your code. | | --- | --- |

One Statement, Multiple Variables

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

Declarations can span multiple lines:

Multiple variables declared in one statement cannot be assigned the same value:

x, y are undefined, z is 1.

Value = undefined

In computer programs, variables are often declared without a value. The value can be something that must be calculated, or something that will be provided later, like user input.

A variable declared without a value will have the value undefined.

After the following statement, the variable carname will be undefined:

Re-declaring JavaScript Variables

If you re-declare a JavaScript variable, its value will not be lost:

After the execution of these two statements, the value of carname will still be "Volvo":

JavaScript Arithmetic

You can perform arithmetic with JavaScript variables using operators like = and +:

Example

y = 5;
x = y + 2;

Using let and const (ES6)

Before 2015, we used the var keyword to declare JavaScript variables.

In the 2015 version of JavaScript (ES6), we can use the const keyword to define a constant, and the let keyword to define a variable with block scope.

For more information on const and let, refer to: JavaScript let and const.

Safari 10 and Edge 14 were the first browsers to support all features of ES6:

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