JavaScript-The misunderstood parts (Part-1)
Interpreted or Compiled, Hoisting and Equality
1. Interpreted or Compiled
This is something that many people are still confused about. If you ask the question “Is JavaScript interpreted or compiled?” you are bound to get different answers. First, let us understand what interpreted and compiled actually means.
Compiled Language
A language is said to be compiled when the whole program is first translated into machine code and then the translated machine code is executed.
Interpreted Language
A language is said to be interpreted when the translation happens line by line during execution.
JavaScript was initially purely interpreted
Interpreted languages do not need extra time for the compilation step which made them ideal for the web due to which JavaScript used to be purely interpreted language.
But, this also made JavaScript very slow. Why? This is because as there was no compilation step anytime a loop was encountered during the execution it was interpreted each time making the code run slow. If the compilation step would have been present then the loop would not be translated each time and the code would run faster.
Also, in a compiled language as the translation is done before execution the compiler apart from just translating the code also makes some optimizations so that it can run faster.
JavaScript is a JIT-compiled language
What does JIT-compiled mean?
JIT(Just-in-time) compiled language uses features of both interpreted as well as compiled language.
The JavaScript engine now includes a monitor. The monitor first runs the whole program through the interpreter. If the same lines of code run a few times then the code is labeled as warm and if it runs a lot of times then it is labeled as hot.
The warm code is sent to get compiled by the baseline compiler which compiles the code and then stores it so that it can be used when the same line of code runs again. Here very few optimizations are done by the compiler.
When the warm code starts running even more times then it is sent to the optimizing compiler which then creates an even faster version of that piece of code.
So, it is safe to say that JavaScript is neither purely interpreted nor purely compiled but is JIT compiled language.
2. Hoisting
As per the MDN docs hoisting means-
Hoisting is when we can refer to a variable or a function before its declaration without getting any exception.
a) Variable Hoisting
Many people say that the variables declared with var are lifted on top of their scope due to which it can be used before it is declared but what does it actually mean? Do the variables actually get lifted on top of their scope? What happens with let? Why do variables declare with let not get hoisted?
The JavaScript engine runs the code twice-
i) Creation Phase: Here variables are allocated memory. Till ES5, the variables were initialized with undefined but with ES6 features(let, const, etc.) the variables are not initialized rather they are set to a special mode called temporal dead zone in which the variables stay and cannot be accessed until they are assigned a value.
ii) Execution Phase: Here the code is executed.
So, this explains two things-
- Why the variables declared with var on hoisting returns undefined? This is because of the initial value assigned to them. When we assign some other value to them after their declaration then their value changes.
- Why let and const can not be hoisted? This is because they are present in the temporal dead zone and cannot be accessed and hence this throws an error.
b) Function Hoisting
This is pretty easy to understand if you understood the variable hoisting.
Just like variables, functions also get hoisted but only function definitions and not function expressions.
Why function definition gets hoisted but not function expression?
Note that the function definition gets hoisted.
But, function expression throws type error when trying to get hoisted. This is because as the bar is declared with var due to which during the creation phase only memory is allocated to it and it is initialized with undefined. Trying to call bar() implies undefined() which throws a type error.
3. Equality
Here I want to point out the difference between equality(==) and strict equality(===).
This is also one of the misunderstood concepts, people think that the difference between equality and strict equality is that equality checks only value but strict equality checks value and type both.
The actual difference between them is that with equality, coercion(type conversion and not type checking) is allowed while checking value and with strict equality, coercion is not allowed.
So, 2== ‘2’ will return true after converting the Number type to String type.
But, 2===’2' will return false as no type conversion is done from Number to String or vice-versa.
That’s it!! Thanks for hanging in till the end. These were some of the concepts that I found to be misunderstood by a lot of people. I will publish part-2 of the article soon.
