What is the smallest JavaScript Program ?
The smallest/shortest program in javascript is an empty file. Even though the file is empty and there is nothing to execute, Still JavaScript Engine do a lot of things behind the scenes. A global execution context is created, and Java script engine still creates the global execution context and also sets up the memory space. It also creates something known as window.
What is this window object ? How did it come up?
This is like a big object with a lot of functions and methods. These functions and variables are created by JavaScript engine, you know, and into the global space, you can access all these variables and functions anywhere in your JavaScript program. And just like this window, JavaScript engine also creates a this keyword. In the global level, at the global level, this points to the window object. So whenever any JavaScript program is run, a global object (window in the case of browsers) is created, a global execution context is created, and along with that execution context, this variable is created.
NOTE : Execution of any JavaScript program requires a JavaScript Engine, like chrome uses V8 engine.
All the variables and functions created in a JavaScript program are located inside the window object and can be accessed in many ways like
var x = 10
function test(){
console.log("Hello")
}
console.log(x)
console.log(window.x)
console.log(this.x)
console.log(test)
console.log(window.test)
console.log(this.test)
We can access the variable X directly or using window object as X has a global scope or using this keyword as it indicates window object only in global context. So the output of the code above will be:
Undefined and Not Defined
Undefined is a special keyword in JavaScript which is used as the value of any variable which has not been assigned any value as of now. It means that the variable have its own memory space but does not have any value while Not Defined means that there does not exists any variable with that particular name.
var x;
console.log(x)
console.log(y)
Undefined does not means empty, the memory space has been taken by the variable, it just does not have any value at that moment.
Loosely/Weakly Typed Language
JavaScript is a Loosely / Weakly typed language which means that it doesn't attaches any of its variables to a specific data type. Let us see with the help of an example.
var a;
console.log(a);
a = 10;
console.log(a);
a = false
console.log(a);
a = "JavaScript";
console.log(a);
a = {'a' : 1, 'b' : 2, 'c' : 3};
console.log(a);
In the example given above, we are assigning different data types to a same variable and it is able to change it accordingly. Hence, it is a loosely typed language.
Scope in JavaScript
Let’s start by taking a function A and a variable b
var b = 10
function A(){
console.log(b)
}
A();
The output of this code will be 10 which is the value of b. When this code runs, the JavaScript Engine tries to find out the value of b in the local memory of A . But as there is no b present in A then the JavaScript engine will look for the value of variable b outside the A, which is the global memory. Now let's reverse the case.
function A(){
var b = 10
}
console.log(b)
In this case, the JavaScript engine will throw an error saying b is not defined because it directly looks up for b in its local memory, which is the global memory, but the variable b is defined in the local memory of function A. This all is done with the help of Scope.
Scope means a block of code where you can access a particular variable or a function inside or code.
Show in the first case the scope of variable b is its local memory and the lexical environment of function A, but in the second case, the scope of the variable B is just the global memory space.
What is Lexical Environment ?
Lexical as a term means in hierarchy or in sequence. Lexical environment is the local memory along with the lexical environment of its parents. Whenever an execution context is created lexical environment is also created, which tells where the code is physically present inside a program.
A chain of lexical environments and their parent references is known as a scope chain. Whenever a program is executed, the JavaScript engine search for the variable in the local memory of any function, but if it is unable to find the variable inside that function, it checks it inside the next level of its scope chain, which is its parent container and so on till it, find it and it didn't find it till the global context it will return an error error saying the variable is not defined.
Now let’s understand everything with the help of a code.
function A(){
var B = 10;
C();
function C(){
console.log(B);
}
}
A();
In discord, the JavaScript engine will look for the value of B in the local memory of C, but B is not present in the local memory of C, so it will look for the in its lexical score that is parent’s lexical scope and there it will find the value of B which is equals to 10 so it will give the output as 10.
Let’s visualize the code by putting the debugger on the line 5 → console.log(B)
The call stack has all these three execution contexts.The anonymous is the global execution context, on top of it, it has the A's execution context and on top of it, we have C's execution context. All the scopes of the execution context’s are also shown.