Variable in JavaScript

Amit Kumar  Print 
01 Jan 2018
19 Sep 2018
Beginner
430

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.

Crack Your Technical Interview

 
Join Our Hands-on Training Programs
+