Learn JavaScript: Variables

Published in

Tech Blog

4 min readDec 7, 2022

After introducing two main basic concepts in JavaScript, and before talking about functions, let’s discuss the JavaScript Variables (var, let, const) and the accessibility of variables inside the block of the function and outside the block.

What are Variables?

Variables are containers for storing data values inside memory of the browser process.

There are 4 Ways to Declare a JavaScript Variable

Using var
Using let
Using const
Using nothing

<body>
<h2>JavaScript Variables</h2>
<p>In this example, myNumber, newVar, and z are variables.</p>
<p id="demo"></p>
<script>
let myNumber = 24;
let newVar = 23;
let z = myNumber + newVar;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>

In this example, myNumber, newVar, and z are variables.

The value of z is: 47

From all the example above, you can guess:

myNumber stores the value 24
newVar stores the value 23
z stores the value 47

When to Use JavaScript var?

Always declare JavaScript variables with var, let, or const.

The var keyword is used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
If you want your code to run in older browsers, you must use var.

When to Use JavaScript const?

If you want a general rule: always declare variables with const.

If you think the value of the variable can change, use let.

Example:

const price1 = 23 ;
const price2 = 24 ;
let total = price1 + price2 ;

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

These are constant values and cannot be changed. The variable total is declared with the let keyword. This is a value that can be changed.

JavaScript Identifiers

All JavaScript variables must be identified 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 contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with $ and _
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.

JavaScript Data Types

JavaScript variables can hold numbers like 100 and text values like “Hady Soufan”. In programming, text values are called text strings.

JavaScript can handle many types of data, but for now, just think of numbers and strings. Strings are written inside double or single quotes. Numbers are written without quotes.

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

Example:

const pi = 3.14 ;
var name = "James Bond" ;
let jobTitle = 'Actor" ;

Declaring a JavaScript Variable:

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

You declare a JavaScript variable with the var or the let keyword:

var carName ;

let carName ;

After the declaration, the variable has no value (technically it is undefined).

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

carName = “BMW “;

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

let carName = “BMW” ;

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

<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "BMW";
document.getElementById("demo").innerHTML = carName;
</script>
</body>

The script above creates a variable, assign BMW value to it, and display it.

One Statement, Many Variables

You can declare many variables in one statement.

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

<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "Hady Soufan", carName = "BMW", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>

A declaration can span multiple lines:

<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "Hady Soufan",
carName = "BMW",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script></body>

So, that was it for JavaScript Variables, it’s nothing just declaring variables with some value in the memory for specific reasons using the most preferred identifier.

Next article will be about JavaScript Functions, stay tuned.