Skip to main content

Namaste Javascript Study Notes -1



Hello,

These are the study notes of the famous javascript course Namaste Javascript. I was creating this for my personal study but later thought that it might also help others. If you are confused or not getting any point do watch the course.

1)Javascript execution context.


Execution context is created when we run any js program. This execution context is called a global execution context and is pushed inside a stack name execution stack.

It has 2 phases,

1)Memory phase: Where memory is allocated to variables and functions. Undefined is allocated to variables and function is stored as it is with its code.


2)Code Phase: Here values are assigned to a variable and if any function calls then again a separate execution context is created for that function which again has 2 phases memory and code. and it goes on the same for any function call invocation. So whenever an execution context is created it is pushed inside an execution stack. For the first time, a global execution context is created as told earlier and pushed in the stack.  


After the code phase is finished the execution stack becomes empty.



2)Javascript Hoisting:

We explain this using example,

getName();

console.log(x);

var x=7;

function getName(){

console.log("Namaste")

}


So here if we run the above program we will not get errors. We should have got an error as we are accessing function getName() and logging the value of x before declaring it.

But if you have read the Javascript execution context then there it is given that when we run any  JS program runs in 2 phases.

So in the first phase memory is declared, Variable is assigned with undefined and function with its code.

So that's why we didn't get an error.

If we run the above program we will get output as,

Namaste

undefined

But if you define function as function expression for example,

const getName = function() {

  console.log("Namaste");

};

It will treat getName as a variable as will be assigned undefined. So if we run the above program again it will give an error getName not function because we are calling a variable and not function. It will behave like a function in the code execution phase and not the memory phase. So if you define arrow function or function as a function expression you can't access it before declaring it.
Note: We can only access variables defined with var before initialization. . In case of let and const though it is hoisted but cannot be accessed before initialization

3)Window Object: Whenever javascript program runs a global execution context is created. Along with that, a global object is also created. That global object is called as window objectalso a this keyword is created which also referes to global object at global level. So if we compare window===this it will return true.

4)Lexical Scope: Lexical means in order in the hierarchy. Lexical environment means local memory and along with the lexical environment of its parent.


Example:

function a(){

var b=10;

c();

function c(){

console.log(b)// will print 10 as c has access to its parent memory i.e a.

}
}

a();

console.log(b);// b is undefined as b is not defined in this env as this env is global and has no parent.

Here we can say that the c function is lexically inside the a function.

This chain is from child to parent and is called a scope chain. If a value is not found in local memory Javascript will check for parent scope if the value is present again if not present will check its parent scope like this until it reaches global scope. We can also say that this whole chain of lexical env is called scope chain.



5)Temporal Dead Zone: It is the time between the let and const variable is hoisted to the time it has initialized with some value. In the dead zone, you cannot access the value of variables.

For example:

console.log(b);

let b=10;

Here we will get an error as we are accessing b before its initialization. That does not mean that b is not hoisted. It is hoisted with undefined but it has allocated memory in different memory space and you cannot access this memory space before its initialization.

Also, variables defined using let and const are not accessible using window object.



6)Block  Scope:

{


}

To write multiple statements we used block in javascript.  It is also called a compound statement.

Block scope means what all variables and functions that we can access in that block.

Ex:

let a=10;

var b=2;

{

let a =20;

var b=20;

This is called shadowing of variables. Here var b inside the block is shadowing var b outside the block. Also, it is changing its value.  If you open chrome and debug you can see var b (outside block and inside block var b is stored only at one place and not 2 separate places unless var b is defined inside any function) is stored in global space so any change in var b will change its value.  

console.log(b);//20

This is called the shadowing of variables. Here let a inside block is shadowing let a outside block. But it is not changing its value. If you open chrome and debug you can see let a outside block is stored in script memory and let a inside block is stored inside block memory space,


console.log(a);//20

}

console.log(a);//10

console.log(b);//20

Here is a screenshot,


7)Closures in Javascript: A function along with its lexical environment is called a closure.

Ex: 
function x(){
var a=7;
function y(){
console.log(a);
}
return y;
}

var z=x();
z will store function y with its lexical scope. So if call z() function it will log a=7. 
It has access to var a as it is a closure.


Uses of closures:
1)Calling a function only at once. If we want this kind of functionality then we can do it by using closures.
2)Maintaining state in the async world
3)Making data encapsulation.

Disadvantage:
1)There can be overconsumption of memory when we create a lot of closure in our program.  As these variables inside closures will not be garbage collected until the program expires and may freeze the browser. So this can be a disadvantage.


Comments

Post a Comment

Popular posts from this blog

Node JS:Understanding bin in package.json.

Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found