Variable in JavaScript

Amit Kumar  Print   4 min read  
01 Jan 2018
19 Sep 2018
Beginner
1.26K

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

A JavaScript identifier must start with a letter(a-z), underscore (_) or 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

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

  1. With var keyword

    You can declare a JavaScript variable using var keyword. 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>
    
  2. Without var keyword

    You can declare a JavaScript variable without var keyword. This syntax always declares a global variable and cannot be changed at the local level.

    <script>
    y = 5; //global variable
    </script>
    

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 previous value and if a new value is assigned to it then it will contain new value.

<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 programming languages, JavaScript before ECMAScript 6 does not have does not support block scope (where a set of braces {} defines a new scope).

Local Variable

A variable that is declared inside a JavaScript function, is called 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 global variable. A global variable is created when web page is rendered and destroyed when 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 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 which is not declared, but has value, is automatically become 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?

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

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

+
+
Accept cookies and close this message