Different Declaration Of Variables In JavaScript.

JavaScript

Variables In JavaScript.

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example, value1.
3. JavaScript variables are case-sensitive, for example x and X are different variables.

Correct JavaScript variables

1. var x = 10;
2. var _value=”sonoo”;

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

Example of JavaScript variable

Let’s see a simple example of a JavaScript variable.

<script>

var x = 10;

var y = 20;

var z=x+y;

document.write(z);

</script>

The output of the above example

30

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the function or block only. For example:

<script>

function abc(){

var x=10;//local variable

}

</script>

Or,

<script>

If(10<13){

var y=20;//JavaScript local variable

}

</script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared outside the function or declared with window object is known as global variable. For example:

<script>

var data=200;//gloabal variable

function a(){

document.writeln(data);

}

function b(){

document.writeln(data);

}

a();//calling JavaScript function

b();

</script>

JavaScript Global Variable

A JavaScript global variable is declared outside the function or declared with window object. It can be accessed from any function.

Let’s see the simple example of global variable in JavaScript.

<script>

var value=50;//global variable

function a(){

alert(value);

}

function b(){

alert(value);

}

</script>

Declaring JavaScript global variable within function

To declare JavaScript global variables inside function, you need to use window object. For example:

window.value=90;

Now it can be declared inside any function and can be accessed from any function. For example:

function m(){

window.value=100;//declaring global variable by window object

}

function n(){

alert(window.value);//accessing global variable from other function

}

Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the window object internally. You can access it through window object also. For example:

var value=50;

function a(){

alert(window.value);//accessing global variable

}

Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.

1. Primitive data type
2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don’t need to specify type of the variable because it is dynamically used by JavaScript engine. You need to use var here to specify the data type. It can hold any type of values such as numbers, strings etc. For example:

1. var a=40;//holding number
2. var b=”Rahul”;//holding string

JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:

String: represents sequence of characters e.g. “hello”

Number: represents numeric values e.g. 100

Boolean: represents boolean value either false or true

Undefined: represents undefined value

Null: represents null i.e. no value at all

JavaScript non-primitive data types

The non-primitive data types are as follows:

Object: represents instance through which we can access members

Array: represents group of similar values

RegExp: represents regular expression

The Var Variable:

The var declaration is similar to Let. Most of the time we can replace Let by var or vice-versa and expect things to work:

var message = “Hi”;

alert(message); // Hi

But internally var is a very different beast, that originates from very old times. It’s generally not used in modern scripts, but still lurks in the old ones.

If you don’t plan on meeting such scripts you may even skip this chapter or postpone it.

Get Shaibu Barnabas Anibe’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

On the other hand, it’s important to understand differences when migrating old scripts from var to Let, to avoid odd errors.

“var” Has No Block Scope.

Variables, declared with var, are either function-scoped or global-scoped. They are visible through blocks.

“var” tolerates re-declarations.

If we declare the same variable with Let twice in the same scope, that’s an error.

“var” variables can be declared below their use:

var declarations are processed when the function starts (or script starts for globals).

In other words, var variables are defined from the beginning of the function, no matter where the definition is (assuming that the definition is not in the nested function).

There are two main differences of var compared to let/const:

1. var variables have no block scope, their visibility is scoped to current function, or global, if declared outside function.
2. var declarations are processed at function start (script start for globals).

The Let Variable:

The let keyword was introduced in (ES6 (2015).

Variables defined with let cannot be Redeclared.

Variables defined with let must be Declared before use.

Variables defined with let have Block Scope.

Cannot be Redeclared

Variables defined with let cannot be redeclared.

You cannot accidentally redeclare a variable.

Block Scope

Before ES6 (2015), JavaScript had only Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the block:

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.

Redeclaring a variable inside a block will also redeclare the variable outside the block.

Let Hoisting

Variables defined with var are hoisted to the top and can be initialized at any time.

Meaning: You can use the variable before it is declared.

The Const Variable:

The const keyword was introduced in ES6 (2015).

Variables defined with const cannot be Redeclared.

Variables defined with const cannot be Reassigned.

Variables defined with const have Block Scope.

Cannot be Reassigned

A const variable cannot be reassigned:

Must be Assigned

JavaScript const variables must be assigned a value when they are declared.

When to use JavaScript const?

Always declare a variable with const when you know that the value should not be changed.

Use const when you declare:

• A new Array
• A new Object
• A new Function
• A new RegExp

Constant Objects and Arrays

The keyword const is a little misleading.

It does not define a constant value. It defines a constant reference to a value.

Because of this you can NOT:

• Reassign a constant value
• Reassign a constant array
• Reassign a constant object
• Change the elements of constant array
• Change the properties of constant object

Constant Arrays

You can change the elements of a constant array.

But you can NOT reassign the array.

Constant Objects

You can change the properties of a constant object.

But you can NOT reassign the object.

Block Scope

Declaring a variable with const is similar to let when it comes to Block Scope.

The x declared in the block, in this example, is not the same as the x declared outside the block.

You can learn more about block scope in the chapter JavaScript Scope.

Redeclaring

Redeclaring a JavaScript var variable is allowed anywhere in a program.

Redeclaring an existing var or let variable to const, in the same scope, is not allowed.

Reassigning an existing const variable, in the same scope, is not allowed.

Difference Between The Var, Let, And Const Variables In JavaScript.

Scope

var: Variables declared with var are in the function scope.

Let: Variables declared as let are in the block scope.

Const: Variables declared as const are in the block scope.

Explanation:

• In the var tab, when you will run the code, you will see an error as a is not defined because var variables are only accessible in the function scope.
• In the let tab, when you run the code, you will see an error as i is not defined because let variables are only accessible within the block they are declared.
• In the const tab, when you run the code, you will see that x was defined under the block was accessible, but when you try to access x outside that block, you will get an error.

Hoisting

Hoisting means that you can define a variable before its declaration.

Var: Allowed

Let: not allowed

Const: not allowed

Explanation:

• In the var tab, when you run the code, you will see there is no error and that we can declare var variables after defining them.
• In the let tab, when you run the code, you will get an error as let variables do not support hoisting.
• In the const tab, when you run the code, you will get an error as const variables do not support hoisting.

Reassign the value

To reassign a value is to reassign the value of a variable.

Var: allowed

Let: allowed

Const: not allowed

Explanation:

• In the var and let tab, when you run the code, you will see that there is no error and we can define new values to the var and let variables.
• In the const tab, when you run the code, you will get an error as a const variables value cannot be reassigned.

Redeclaration of the variable

The redeclaration of a variable means that you can declare the variable again.

Var: Allowed

Let: not allowed

Const: not allowed

Explanation:

• In the var tab, when you run the code, you will see that there is no error as we are allowed to declare the same variable again.
• In the let and the const tabs, when you run the code, you will get an error as the let and const variables do not allow you to redeclare them again.