DataTypes and Scope In JavaScript

JavaScript is the most popular language in the world and it runs on the most popular environment, meaning the web (browser). By using JavaScript, you can create a complete web and desktop application.

DataTypes in JavaScript

In JavaScript, there are 3 types of primitive data-types.

Number
String
Boolean

Number: in this, you can assign values like 10,10.2 which means even if you assign a floating-point number to a variable it is treated like a number data-types.
String: in this, you can assign a single character or multiple characters, and it is treated as string datatype.
Boolean: You can assign true and false value in this.
Undefined: in this, you declare a variable but you don’t assign the value to it; it is undefined.
Null: if a variable can not contain a value other than null it is null.

Datatypes in JavaScript can be defined at run-time.

Suppose I declared a variable.

Var x=10;

And after that, I assign a string value like this x=”sagar” so at run-time, if you use the code like below, you will know the data types are changed.

var x=10;
console.log(typeof(x));//number
x="sagar";
console.log(typeof(x)); //string

Points to remember:

Datatypes are not strongly typed like in Java or C# language.
Whatever value you assigned of the right-hand side, the left-hand side variable becomes of that data-type.

Scope In JavaScript

In JavaScript, we have only two scopes, Private and Global. In strongly typed language, we have a different type of scopes like public, private, protected,internal like that but in JavaScript we have only 2 scopes Private and Global.

var x=10; // global scope
console.log(x); //output-10
function PrintX()
{
var x=12; //private scope
console.log(x); //output-12
}
PrintX();

Global Scope In JavaScript

In this above example, you can see x variable which is declared outside the function. Printx is treated as a global variable. And this global variable is accessed throughout the page or that respective javascript file.

Private: In this, the variable which is declared inside the function is treated as a private variable and it is not accessed outside that function; see the below example.

function PrintX()
{
var x=12; //private scope
console.log(x); //output-12
}
console.log(x);
PrintX();

In this example, if we run this code it throws an error.

ReferenceError: x is not defined, which is a reference error.

To decide the scope of variable in JavaScript, it uses a lexical scope approach. Lexical approach says that depending on the position of a word the meaning of word changes. In JavaScript depending on the position, left or right, the scope will change whether it is inside the function or outside of a function.

Auto global variable or scope

In JavaScript when you didn’t declare the variable and assign value to that variable it will become a global variable.

function display() {
x = 10;
console.log(x); //output-10
}
display();
console.log(x);////output-10

Use Strict

But to avoid this functionality you can use “use strict”. The use of use strict is that you can’t use a variable before declaration, which means by using this “use strict” we can raise an error if we use a variable before declaration.

"use strict"
function display() {
x = 10;
console.log(x); //output-10
}
display();
console.log(x);////output-10

The output of this code is as below which throws an error.

index.htm:13 Uncaught ReferenceError: x is not defined
at display (index.htm:13)
at index.htm:17

4 Comments

Join the conversation! Your thoughts help the community grow.

Hamid Khan7y ago
Nice explanation...…..
- Sagar Jaybhay7y ago
  Thanks....
Praneet Rane7y ago
You can read about Temporal Dead Zone (TDZ) here- https://www.c-sharpcorner.com/blogs/es6-concepts-part-1
Praneet Rane7y ago
Nice blog! But I think few scope chaining concepts are missing here. E.g. Dead zone in scope. If I have varible declaration in outerscope as wel as inner scope the value of the variable in inner scope is undefined untill the redeclaration etc.