Skip to main content

Namaste Javascript Study Notes -2


 

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.


Functions:

Function statement aka Function Declaration 


function a(){

console.log("a called")

}


Function Expression

var b=function(){

console.log("b called")

}

The difference between these 2 types is hoisting.

Function statement can be called above its declaration while in the case of function expression it should be called after declaration else it will throw an error.



Anonymous Function 

function(){

console.log("b called")

}

Function without a name and it does not have its own identity as if you run it like this it will give an error. It is used where functions are used as values i.e we can assign them to a variable so that become function expressions.

Name Function Expression

var c=function abc(){

console.log("c called")

}

It is just like a function expression but it has a function name also.

But if you call abc() then it will give an error.  

Because js stores this abc as a variable and not a function.

So it should be called only as c();


First Class Functions aka first-class citizens.

Functions can also be passed as an argument to a function and also function can return function. So the ability to use functions as values so they are called first-class functions in javascript.



Event Listeners:

Whenever we want some action on some event we attach an event listener.

For Ex:

<button id="myBtn">Try it</button>

document.getElementById("myBtn").addEventListener("click", function(){

console.log("button clicked")
});

This event listeners hold parent scope (including global scope) as well and is not collected by the garbage collector(As it can't decide whether it is still needed or not ). We explicitly have to remove the event listener and once we remove the event listener then all the variables are garbage collected.

document.getElementById("myBtn").removeEventListener("click", function(){
console.log("Event listener removed")
});

Event Loop:

Javascript is a synchronous single-threaded language having a single call stack.

WebApis,

setTimeout(),DOM APIs, fetch(),localStorage,console,location these are web APIs are not part of javascript but part of browser.

All these web APIs are accessible using a window object or without it is global objects.

Ex:
console.log("start");

setTimeout(function cb(){
console.log("callback called")
},5000);

console.log("end");

Here when the code executes,
a)console.log("start") is pushed in the call stack and is executed.

b)Then setTimeout is registered with its callback function in web APIs(Here there is noting pushed inside call stack and next line executes i.e  console.log("end")) and the timer when finished the callback function is pushed inside the callback queue. Here the event loop checks if anything is in the callback queue and if available and if the call stack is empty then take it makes this callback function available to the call stack.

c)As set timeout is not pushed inside the call stack 
console.log("end") is executed. As of now call stack is empty the event loops check if anything is in callstack and if anything is present it makes it available to call stack to execute.

Here in the case of the fetch() function, it returns a promise, and the registered function for the promise is pushed inside the microtask queue which has a higher priority than the callback queue. So here event loops will first check the microtask queue and then the callback queue.

All callback registered via promises and mutation observers (when anything in dom changes )
 comes in this microtask queue and all callbacks from setTimeout, add event listener will come in callback queue also called as a task queue.

There can be a case called starvation of callback queue when the microtask queue has more items and items of callback queue waits too long to be executed.






 JavaScript Runtime Environment: To run every js code we need a JS runtime environment. Js engine is the heart of it.


Javascript runtime environment consists of js engine, APIs, event loop, callback queue, microtask queue.

Inside JS Engine:

1)Parsing: Code is broken down into tokens. Now syntax parser takes this token and makes the AST tree. i.e abstract syntax tree. (astexplorer.net)

2)Compilation: AST is passed to the Compilation stage.

An interpreter executes code line by line. 
The compiler compiles the whole code first and then executes it.

Is Js interpreted language or compiled language? 
It can behave both depending upon the js engine.
Initially, it was interpreted language.

JIT(Just in time compilation) compilation: where both execute hand in hand.
Now interpreter converts this high-level code into byte code. In this process, it takes the help of the compiler to optimize code.
Complier Optimization techniques :
the garbage collector(Gc)(mark and sweep algorithm),  optimize memory.
It also uses Inlining, inline caching for optimization

So interpreter converts byte code and complier also works parallel to optimize this byte code.
So this stage produces byte code.

3)Execution: In this phase byte code is executed with the help of the memory heap and the call stack.
(Memory heap is where all memory is stored. It is constantly in sync with the call stack and GC). 


In the chrome js(V8) engine they have an ignitor interpreter and turbofan compiler. It has an Orinoco garbage collector.




Comments

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