JavaScript Variables

Variables are containers used to store data.

JavaScript variables can be declared in four ways:

• Automatically: Values can be changed
• Using var: Values can be changed
• Using let: Values can be changed
• Using const: Values can not be changed

Automatically

Example: The variables a, b, and c are not explicitly declared. They are automatically declared when they are first used.

<script>
a = 3;
b = 4;
c = a + b;
document.getElementById("variable").innerHTML =
"The value of c is: " + c;

// Output: The value of c is 7
</script>

Using var

Example: The variables a, b, and c are declared using the var keyword. 

<script>
var a = 3;
var b = 4;
var c = a + b;
document.getElementById("variable").innerHTML =
"The value of c is: " + c;

// Output: The value of c is 7
</script>

Using let

Example: The variables a, b, and c are declared using the let keyword.

<script>
let a = 3;
let b = 4;
let c = a + b;
document.getElementById("variable").innerHTML =
"The value of c is: " + c;

// Output: The value of c is 7
</script>

Using const

Example: The variables a, b, and c are declared using the const keyword.

<script>
const a = 3;
const b = 4;
const c = a + b;
document.getElementById("variable").innerHTML =
"The value of c is: " + c;

// Output: The value of c is 7
</script>

Note: The var keyword was commonly used in JavaScript from 1995 until 2015. In 2015, the let and const keywords were introduced, offering improved variable scoping and immutability options. It is recommended to use let and const in modern JavaScript, while var should be reserved for maintaining compatibility with older browsers.

When to use var, let, or const:

• Always declare your variables.
• Use const for values that should not change.
• Use const for arrays and objects when their type should remain the same.
• Use let only when const isn’t an option.
• Use var only if you need to support older browsers.

Value = undefined

In computer programs, variables are often declared without an initial value. The value can be calculated later or provided by the user, such as through input.

A variable declared without a value will be assigned the value undefined.

After executing this statement, the variable fruitName will have the value undefined.

let fruitName;

Re-Declaring JavaScript Variables

If you re-declare a JavaScript variable that was declared with var, it will retain its value.

The variable fruitName will still have the value "Banana" after executing these statements.

var fruitName = "Banana";
var fruitName;

Note: You cannot re-declare a variable that was declared with let or const.

JavaScript Dollar Sign $

Since JavaScript treats the dollar sign as a letter, variable names that include $ are considered valid identifiers.

<script>
let $amount = 5;
let $cash = 7;
document.getElementById("demo").innerHTML = $amount + $cash;
</script>

Using the dollar sign is not very common in JavaScript, but professional developers often use it as a shorthand for the main function in JavaScript libraries.

For example, in the jQuery library, the $ function is used to select HTML elements. In jQuery, $("p") is used to select all <p> elements.