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.
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 as it a is global objects.
Ex:
console.log("start");
setTimeout(function cb(){
console.log("callback called")
},5000);
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
Post a Comment