JS Variables - Hosting Deals

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript variables

What are Variables?

Variables are containers that are used to store data (storing data values).

In this example, x, y, and z, are variables, defined with the var keyword

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

var x = 5;

var y = 6;

var z = x + y;

document.getElementById(“demo”).innerHTML =

“The value of z is: ” + z;

</script>

</body>

</html>

Output

JavaScript Variables

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

The value of z is: 11

In this example, x, y, and z, are variables, are defined with the let keyword.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2>

<p>In this example, x, y, and z are variables.</p>

let x = 5;

let y = 6;

let z = x + y;

document.getElementById(“demo”).innerHTML =

“The value of z is: ” + z;

</script>

</body>

</html>

Output

JavaScript Variables

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

The value of z is: 11

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

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are undeclared variables.</p>

x = 5;

y = 6;

z = x + y;

document.getElementById(“demo”).innerHTML =

“The value of z is: ” + z;

</script>

</body>

</html>

Output

JavaScript Variables

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

The value of z is: 11

From all the examples above, you can guess:

x stores the value 5.
y stores the value 6.
z stores the value 11.

When to Use JavaScript const?

For a general rule: always declare variables with const.

To change the value of the variable, use let.

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2>

<p>In this example, price1, price2, and total are variables.</p>

const price1 = 5;

const price2 = 6;

let total = price1 + price2;

document.getElementById(“demo”).innerHTML =

“The total is: ” + total;

</script>

</body>

</html>

Output

JavaScript Variables

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

The total is: 11

The two variables price1 and price2 are defined with the const keyword.

These are constant values and cannot be changed.

The variable total is defined with the let keyword.

This is a value that can be changed.

Just Like Algebra

Just like in algebra, variables store values:

let x = 5;

let y = 6;

Just like in algebra, variables are used in expressions:

let z = x + y;

From the example above, the total is calculated to be 11.

JavaScript Identifiers

All JavaScript variables must be specified with unique names.

These unique names are called identifiers.

Identifiers can be short names (like x and y) or more descriptive names (age, sum, total volume).

The general rules for constructing names for variables (unique identifiers) are:

Names can consist of letters, digits, underscores, and dollar signs.
Names must start with a letter.
Names start with $ and _ (but we will not use it in this tutorial).
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.

The Assignment Operator

In JavaScript, the equal sign (=) is an “assignment” operator, not an “equal to” operator.

This is different from algebra. The following has no meaning in algebra:

x = x + 5

In JavaScript, however, it makes perfect: it assigns the value of x + 5 to x.

JavaScript Data Types

JavaScript variables can store numbers like 100 and text values like “John Doe”.

In programming, text values are known as text strings.

JavaScript can use many types of data, but for now, just think of numbers and strings.

Strings are written within double or single quotes. Numbers are written without quotes.

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

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>Strings are written with quotes.</p>

<p>Numbers are written without quotes.</p>

const pi = 3.14;

let person = “John Doe”;

let answer = ‘Yes I am!’;

document.getElementById(“demo”).innerHTML =

pi + “<br>” + person + “<br>” + answer;

</script>

</body>

</html>

Output

JavaScript Variables

Strings are written with quotes.

Numbers are written without quotes.

3.14

John Doe

Yes I am!

Declaring a JavaScript Variable

Creating a variable in JavaScript is called “declaring” a variable.

A JavaScript variable is declared with the var or the let keyword:

var carName;

or:

let carName;

After the declaration, the variable does not have any value (technically it is undefined).

To assign a value to the variable, the equal sign is used:

carName = “Volvo”;

Assign a value to the variable when it is declared

let carName = “Volvo”;

In the below example, create a variable called carName and assign the value “Volvo” to it.

Then , value is “output” within an HTML paragraph with id=”demo”:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2

<p>Create a variable, assign a value to it, and display it:</p

let carName = “Volvo”;

document.getElementById(“demo”).innerHTML = carName;

</script>

</body>

</html>

Output

JavaScript VariablesCreate a variable, assign a value to it, and display it:

Volvo

One Statement, Many Variables

Many variables are declared in one statement.

Start the statement with let and separate the variables by comma:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

let person = “John Doe”, carName = “Volvo”, price = 200;

document.getElementById(“demo”).innerHTML = carName;

</script>

</body>

</html>

Output

JavaScript Variables

You can declare many variables in one statement.

Volvo

A declaration is used to span multiple lines:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

let person = “John Doe”,

carName = “Volvo”,

price = 200;

document.getElementById(“demo”).innerHTML = carName;

</script>

</body>

</html>

Output

JavaScript Variables

You can declare many variables in one statement.

Volvo

Value = undefined

In computer programs, variables are defined without a value. The value can be something that is to be calculated or something that is provided later, like user input.

A variable declared with no value will have the value undefined.

The variable carName have the value undefined after the execution of this statement:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>A variable without a value has the value of:</p>

let carName;

document.getElementById(“demo”).innerHTML = carName;

</script>

</body>

</html>

Output

JavaScript Variables

A variable without a value has the value of:

Re-Declaring JavaScript Variables

Re-declaring a JavaScript variable that is declared with var, it does not lose its value.

The variable carName still holds the value “Volvo” after the execution of these statements:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

var carName = “Volvo”;

var carName;

document.getElementById(“demo”).innerHTML = carName;

</script>

</body>

</html>

Output

JavaScript Variables

If you re-declare a JavaScript variable, it will not lose its value.

Volvo

JavaScript Arithmetic

As with algebra, arithmetic can be done with JavaScript variables, using operators like = and +:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>The result of adding 5 + 2 + 3 is:</p>

let x = 5 + 2 + 3;

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript Variables

The result of adding 5 + 2 + 3 is:

JavaScript Dollar Sign $

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

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>The dollar sign is treated as a letter in JavaScript names.</p>

let $$$ = 2;

let $myMoney = 5;

document.getElementById(“demo”).innerHTML = $$$ + $myMoney;

</script>

</body>

</html>

Output

JavaScript Variables

The dollar sign is treated as a letter in JavaScript names.

The dollar sign is not commonly used in JavaScript but is used as an alias for the main function in a JavaScript library by the professional programmers .

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

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript Variables</h1>

<p>The underscore is treated as a letter in JavaScript names.</p>

let _x = 2;

let _100 = 5;

document.getElementById(“demo”).innerHTML = _x + _100;

</script>

</body>

</html>

Output

JavaScript Variables

The underscore is treated as a letter in JavaScript names.