How to define variable in JavaScript

How to define variable in JavaScript

JavaScript 09-08-2021 Saheb Sutradhar

In this post you will understand how to define variable in JavaScript , what is scope in JavaScript what is Local , Global , Block scope and constant .

Defining JavaScript variable is very easy but there are few things you should be aware of (what is scope in JavaScript what is Local , Global , Block scope and constant)  , and If you do not understand these topics then sure you will do mistake and your code will not get run and you don’t know what is happening .

 

Simple variable declaration syntax in JavaScript

let i = 10;

 

Let's understand what is Global and Local variable in JavaScript ?

JavaScript follows lexical scoping , means if you declare a variable outside of the function that variable will be available inside the function automatically.

var i=10;

(function(){
  console.log(i);
   (function(){
      console.log(i);
        (function(){
         console.log(i);
    })();
  })();
})();
Output:
10
10
10

If i define the variable in the function function still the variable will be available to all the nested function.

 

(function(){
  var i=10;
  console.log(i);
   (function(){
      console.log(i);
        (function(){
         console.log(i);
    })();
  })();
})();
Output:
10
10
10

If you declare the variable in the last nested function then the variable will not be available to the first and second function , because the last function is the last node of the tree.

(function(){
  console.log(i);
   (function(){
      console.log(i);
        (function(){
          var i=10;
         console.log(i);
    })();
  })();
})();

Output :

console.log(i); ^
ReferenceError: i is not defined

Global Variable in JavaScript

If you declare a variable in a function and you want to access that variable outside of the function, it will throw error.

function globalVariable(){
  var i = 10;
}
globalVariable();
console.log(i)

Output :

console.log(i); ^
ReferenceError: i is not defined

 

But if you assign  a variable in the function without declaring it then JavaScript makes that variable a global variable .

function globalVariable(){
   i = 10;
}
globalVariable();
console.log(i)
Output:
10

In above example if you are not declaring a variable but you are assigning it then JavaScript automatically define a variable to the global scope or global object  eg: Window Object

To prevent this kind of behaviour use "use strict" of the top of your JavaScript file.

"use strict"

function globalVariable(){
   i = 10;
}
globalVariable();
console.log(i)

Output :

console.log(i); ^
ReferenceError: i is not defined

 

Block Scope in JavaScript

Keyword var doesn’t provide block scope , if you define a variable with var keyword within the function then it's available throughout the function.

let's see what is the problem if we use var keyword

"use strict"

function blockScope(){
  var i = 10;
  if(i){
    var i = 20;
    console.log("in if Block" , i);
  }
  console.log("in function block" , i);
}
blockScope();
Output:

in if Block 20
in function block 20

Above example we are expecting in the function block the value of variable i will be 10 and the if block the value of i variable will be 20.

How we can fix this issue , Simple answer is by using let keyword. let is a keyword introduced in JavaScript ES6 version , let keyword provides actual block scope , i variable with let keyword is available only in the if block and i variable with let keyword is available only in the function block these are now separate variables since the blocks are different. 

"use strict"

function blockScope(){
  let i = 10;
  if(i){
    let i = 20;
    console.log("in if Block" , i);
  }
  console.log("in function block" , i);
}
blockScope();
Output:

in if Block 20
in function block 10

Const in javascript 

JavaScript ES6 also introduces a keyword called const , using const now it's possible to define constant in JavaScript. Constant value is not changeable.

"use strict"

const DNS ="codelearningpoint.com";

DNS = "www.clp.com";

console.log(DNS);

DNS = "www.clp.com";

^ TypeError: Assignment to constant variable.

 



I hope this article is helpful for you , i am very glad to help you thanks for reading

 

 

Related Posts

Card image cap

Math Floor Javascript Method

JavaScript 16-07-2021 Saheb Sutradhar

math.floor javascript method takes a number type value as parameter and returns the round off of that value. The return value will be the nearest downward integ ...

Card image cap

Spread Operator in JavaScript

JavaScript 20-07-2021 Saheb Sutradhar

In this post we will learn what is spread operator in Javascript? How we can use it ? and Where we should use? Spread Operator allows you to spread out the ele ...

Card image cap

Remove duplicates from array in javascript

JavaScript 24-07-2021 Saheb Sutradhar

In this post i will show you how to remove duplicates from array in javascript.We can use filter() method to remove duplicates from array , if the index of the ...

Card image cap

Next and Previous Buttons in Javascript with Demo

JavaScript 27-07-2021 Saheb Sutradhar

In this post we will learn how to use next and previous buttons in javascript with demo application , the below example there is  image container and next, pre ...

Card image cap

Image size validation in javascript example

JavaScript 28-07-2021 Saheb Sutradhar

In this article you will learn Image size validation in javascript with example , along with the size validation you will learn how to validate image mime type. ...

Card image cap

How to get multiple checkbox value in javascript

JavaScript 30-07-2021 Saheb Sutradhar

In this post you will learn how to get multiple checkbox value in javascript . In many application you will find this kind of feature where we allow user to sel ...