Variable in JavaScript

01 Feb 2024

Beginner

6.56K Views

5 min read

A JavaScript variable is just like a container to store value. The name of the JavaScript variable must be as per the identifier rules.

A JavaScript identifier must start with a letter(a-z), underscore (_), or a dollar sign ($), and further characters can be digits (0-9). Also, JavaScript is case-sensitive language and JavaScript keywords cannot be used as JavaScript identifier names.

Declaring JavaScript Variables

Any variable declared as var should follow some set of pre-defined rules as given below.

The variable names cannot use the reserved words such as try, catch, delete, continue, finally, float, short, int, and many more reserved words
The variable names are case-sensitive in nature and this means that the "hello" and "Hello" are two different variables respectively and the same applies to the function names as well
The variable names should only contain special characters or other specified symbols such as letters, numbers, underscores, or dollar signs and cannot contain spaces. Also, variable names must begin with a letter, a dollar sign ($), or underscore (_) characters/symbols.
The name of the variable should not start with numbers/digits 0-9

A JavaScript variable can be declared by using the following two ways:

With var keyword
You can declare a JavaScript variable using the var keyword. and unlike const, any variable declared with var can be re-assigned completely. This syntax can be used to declare both local and global variables.
```
<script>
var x = 42; 
</script>
```
var keyword can be used to declare many variables within one statement.
```
<script>
var x=4, y=6, z=7; //one statement, many variables 
</script>
```
Without var keyword
You can declare a JavaScript variable without the var keyword. This syntax always declares a global variable and cannot be changed at the local level.
```
<script>
y = 5; //global variable
</script>
```

Read More - Javascript Interview Questions

Re-Declaring JavaScript Variables

JavaScript is a dynamic programming language. A JavaScript variable can be re-declared again and it will not lose its previous value. In this way, while re-declaring a JavaScript variable, if a new value is not assigned to it then it will contain the previous value and if a new value is assigned to it then it will contain a new value.

The above description is only applied to the variable of var and using the other variable type such as const which can not be re-assigned new value but can be modified with the new values.

<script>
var x = 5;
var x; // value = 5

var y=4;
var y="Hello"; //value = "Hello"
</script>

Evaluating JavaScript Variables

A variable that is declared using the var keyword with no initial value will have the value undefined.

<script>
var x; //undefined
</script>

Also, the undefined value behaves as false when used in a boolean context.

<script>
var x; //undefined

if(!x) //returns true
{
 console.log("true");
}
else
{
 console.log("false");
}
</script>

Variable Scopes

Just like object-oriented programming languages (like C++, C#, and Java), a JavaScript variable also has two scopes: global and local. Like object-oriented programming languages, JavaScript before ECMAScript 6 does not have does not support block scope (where a set of braces {} defines a new scope).

Read More - Javascript Developer Salary

Local Variable

A variable that is declared inside a JavaScript function, is called a local variable. A local variable is created and destroyed every time the function is executed, and it cannot be accessed outside the declaring function.

<script>
if (true) {
 var x = 2; 
}
console.log(x); // 2, since javasript doesn't has block scope

function myFunction() {
var y=5; //local variable
console.log(y); //5
}

console.log(y); //undefined, since y is local variable
</script>

Global Variable

A variable that is declared outside a JavaScript function, is called a global variable. A global variable is created when a web page is rendered and destroyed when the web page is closed. A global variable value is accessible and modifiable throughout your program.

<script>
var x=2; //global variable
if (true) {
 console.log(x); // 2
}

function myFunction() {
var y=5; //local variable
console.log(y); //5

console.log(x); // 2, since x is a global variable
}
</script>

All global variables are attached to the global object window, so you can set and access global variables using the window.variable syntax.

<script>
var x=2; //global variable
if (true) {
 console.log(x); 
 //OR
 console.log(window.x); //using window object syntax
}
x=6;
//OR
window.x=6; //setting value
</script>

Automatic Global Variable

A variable that is not declared, but has value, is automatically becoming a global variable. It may be inside or outside a JavaScript function.

<script>
function myFunction() {
y=5; //automatic global variable
console.log(y); //5
}
console.log(y); // 5, since y is a global variable
</script>

What do you think?

Variables in JavaScript are the ways to store the variety of values, define its scope during the initialization and compilation, manipulate the existing values and other such operations effectively by using the various variable types such as var, let, and const which are part of the EcmaScript standards.

I hope, now you have a better understanding of the javascript variables. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

| Top 20 JavaScript Interview Questions Answer