JavaScript var Tutorial

In this section, we will learn what the var keyword is and how to use it in JavaScript.

What is JavaScript var?

The `var` keyword stands for “variable” and is used when we want to create a variable in JavaScript programs.

How to Declare Variable in JavaScript via var keyword: Syntax

To create a variable via the `var` keyword in JavaScript, we first put this keyword and then, on the right side of it, comes the name of the target variable we want to create.

var variable_name;

After the execution of this statement by a computer, this variable comes to existence and can be used for any defined purposes.

Example: creating a variable via JavaScript var keyword

var helloWorld = "Hello World";

alert(helloWorld);

Global JavaScript Variables

Those variables that are created outside of any block or functions are called global variables.

These variables are accessible from anywhere in the program.

For example, if there are two functions in the same program with one global variable, both functions are capable of accessing this variable and change its content if necessary.

Example: creating global JavaScript variables via var keyword

var helloWorld = "Hello World";

function sayHello (){
   alert(helloWorld);   
}
sayHello();

Here, there’s one function named `sayHello()` and one variable called `helloWorld`. Because the variable is outside of any function or block, it is called a global variable. Hence, it is accessible within the body of any function in this program.

That’s how we could access the content of this variable inside the `syaHello()` function.

Example: creating global JavaScript variables without var keyword

function createGlobalVariable (){
   helloWorld = "Hello World";  
}
createGlobalVariable();
function sayHello(){
   alert(helloWorld);
}
sayHello();

If you create a variable inside a block or a function without the keyword `var`, that variable becomes global automatically! This means the variable is still accessible from anywhere in the program.

Notice here we have a variable called `helloWorld` within the body of the `createGlobalVariable()` function. However, because the variable is declared without the use of `var` keyword, it becomes global automatically and hence accessible within the body of other functions and blocks in this program.

That’s how we could access the same variable inside the body of sayHello() function.

JavaScript var vs let

Other than the `var` keyword, there’s another keyword called `let` which allows you to create a variable in JavaScript as well.

The main difference between variables created by `var` and those that are by `let` is in their accessible scope!

In short, variables that are created by the `let` keyword are block scope and those that are created by `var` are function scope.

Before we get into more details, first let’s run an example and then we’ll continue from there:

Note: we have `const` keyword to create constant identifiers as well. But this one is explained in later sections.

Example: JavaScript var vs let

{
           let blockScope = "I'm just a block scope variable";
           var nonBlockScope = "I'm accessible outside of this block :)";
        }
        alert(nonBlockScope);
        alert(blockScope); //Error... 

Here we have a block `{}` and inside that block there are two variables:

  • blockScope: which is created by the `let` keyword.
  • nonBlockScope: This one, however, is created via the `var` keyword.

As mentioned before, those variables that are created by `let` keyword, are block scope. This means outside the boundaries of that block, the variable is not accessible.

So in this example, because the `blockScope` variable is defined inside a block and created by the `let` keyword, we cannot access the variable from outside the boundary of the block. In a simple word, the variable is not accessible after the closing curly bracket `}` and it’s as if the variable didn’t exist in the first place!

But that’s not true for the `nonBlockScope` variable! This variable is created by the `var` keyword and these types of variables don’t care about the surrounding block unless that block belongs to a function!

So in this example, because the block does not relate to any function, the `nonBlockScope` passed the boundaries and we could access the variable from outside as well.

Note: in the JavaScript scope section we will talk more about the function-scope, but in short, a variable that is created using the var keyword, is function scope if it’s declared within the body of a function (no-matter if it’s declared within an inner block in that function or not).

Leave a Reply