DEV Community: Muskan Chhatrasal

Compiler & Transpiler

Muskan Chhatrasal — Sat, 12 Feb 2022 17:07:41 +0000

To Understand the difference between a Transpiler and a Compiler
, we first need to understand what is a compiler and what is a transpiler.

The compiler takes in some code as input and produces a binary executable code aka machine code as output. For example - we use GCC compiler to compile the C/C++ code and it produces the machine code.

Transpilers aka source-to-source compilers read the code in one language and produce the code in another language.

ES6 version:
let a=10;
console.log(a);

ES6 to ES5 (Transpiling):
var a=10;
console.log(a);

For Example, A Transpiler will convert a code from Java to kotlin whereas a Compiler will convert Java into bytecode. Similarly, A Transpiler will convert a code from python to Javascript whereas a Compiler will convert a code from Java to bytecode.

This was my honest try to make you understand the difference better with diagrams as we have a photographic memory and this way it stays long. Do let me know if I need to add more to this and how can I improve more.

How JS is executed & Call Stack

Muskan Chhatrasal — Sun, 19 Sep 2021 09:59:19 +0000

Exactly when a JS program is ran, a global execution context is made.The execution setting is made in two phases:-
Memory creation stage - JS will dole out memory to variables and functions.
Code execution stage.

What about we think about the accompanying code and it's execution:

var n = 5; function square(num){ var ans = num*num; return back; } var sqr2 = square(n); var sqr4 = square(4);

Indisputably the primary thing which JS does is memory creation stage, so it goes to line one of the above code digit, and award a memory space for variable 'n' and a short time later goes to line two, and allocates a memory space for function 'square'. While disseminating memory for n it stores 'undefined', an exceptional incentive for 'n'. For 'square', it stores the whole code of the capacity inside its memory space. Then, as sqr2 and sqr4 are factors likewise, it assigns memory and stores 'undefined' for them, and this is the completion of first stage for example memory creation stage.

So O/P will look something like

Execution Context Phase 1

By and by, in second stage for instance code execution stage, it starts going through the whole code line by line. As it encounters var n=2, it designate 2 to 'n'. So far, the value of 'n' was indistinct. For function, there is nothing to execute. As these lines were by then overseen in memory creation stage.

Coming to line 6 for instance var sqr2 = square(n), here functions are fairly not equivalent to another dialect. Another execution setting is made by and large. Again in this new execution setting, in memory creation stage, we assign memory to num and ans the two factors. Likewise, undefined is placed in them. As of now, in code execution setting, beginning 2 is named to num. Then, var ans = num*num will store 4 in ans. Starting now and into the foreseeable future, get ans gets the control of program back to where this function was conjured from.

Execution Context Phase 2

Right when return watchword is capable, it returns the control to the called line and moreover the capacity setting is eradicated. Same thing will be reiterated for sqr4 and subsequently after that is done, the worldwide execution setting will be obliterated. So the last chart before deletion would look something like:

Execution Context Phase 2

JavaScript directs code execution setting creation and eradication with the help of Call Stack.

Call Stack

Call stack is a system to screen its place in script that calls different capacities.

Call stack monitors everything of execution context. It is generally called Program Stack, Control Stack, Runtime Stack, Machine stack, Execution Context Stack.

Hoisting in JavaScript

Muskan Chhatrasal — Sun, 19 Sep 2021 08:08:16 +0000

Hoisting is the default behavior of JavaScript where all the variable and function declarations are moved on top. 🔼

Points ↖️ to Remember :

👉JavaScript compiler moves 🚵 variables and function declaration to the 🤘 top🔼 and this is called hoisting.

👉Only variable declarations move 🚴 to the 🤘 top, ⤴️ not the 🤘 initialization.

👉Functions definition moves 🚵🚶 first 🌓 before variables.

👉This means 😏 that irrespective of where the variables and functions are declared, they 💁 are moved on top ⬆️ of the scope.
The 🤘 scope can be both local and global.

Why does JavaScript hoist variables?

when you run your js code :
global execution context(just a wrapper) is created

It is created in 2 phases
1) creation phase
2)Execution phase

In the creation phase javascript engine allocates memory to all variables and function in the code and important thing is entire function(fun body) will sit in that memory block and coming to variables in the creation engine don't know what the variable value is going to be by the end because we can manipulate it later
in the code right ?

So in the creation phase instead of storing actul value it will undefined(a placeholder or a sticker)
ex = myName : undefined

Hoisting in Function checked variable

We should figure out how Hoisting of capacity checked factors happens with the accompanying model:

//function scoped function myFunc(){ console.log(car); var vehicle = 'Lamborgini'; } myFunc(); //undefined

How is hoisting related with scoping in JavaScript?

The scope manages the accessibility of variables. The Scope decides how far the JavaScript will go to look 🧐 for a variable. In the event that it's doesn't exist in the current extension, 🤪 it'll look 👀 in the external Scope .

Scope in JavaScript is the area where we have 😒 Correct ✅ access to a variable / function.