4 Interesting Things I Have Learned About JavaScript
Hoisting
When we run a JavaScript application, before it runs the compiler takes all the variable declarations and function declarations and moves them to the top. Let me show you a demonstration.
This is how we declare and assign a value to a variable. Then log it to the console. The name is displayed as usual.
When I move the console.log() to the top, the output is undefined. What in the world? I was expecting something like “name is not defined” error. I got “undefined”. That means the variable is already declared and not assigned.
Then I realized that it’s hoisting. So the JS compiler did something just like this, and the same thing will happen with functions too. This is basically the hoisting.
However when we declare a function compiler moves it to the top, but if we declare a variable and assign a function, the compiler moves only the variable declaration to the top. Also hoisting is not working for “let” and “const” too
Call Stack
The following code is to calculate the square of a given number.
Let’s see how this will execute. So first main() function is added to the stack.
Then from top, the code begins to run. First printSquare() function executes. So it adds top of the main() in the stack.
In printSquare() first declare a variable and assign and invoke square() function. Then the square() also adds the top of printSquare() in the stack. square() returns the value.
In square(), it invokes multiply() function. multiply() does the calculation and return the value and finishes. Then multiply() gets removed from the stack.
Then square() returns the value which got from multiply() and finishes. So, square() also gets removed from the stack. Only main() and printSquare() functions are in the stack at the moment.
After that, the value returned from square() assigned to “squared” variable. Then in the next line console.log() function invokes and adds the top of the printSquare() function. After the value logged in to console. console.log() also gets removed from the stack.
Finally, the printSquare() is over so, it gets removed and at the end main() also gets removed from the stack and the program ends.
IIFE
IIFE means Immediately Invoked Function Expression. This is a way to write a function and immediately invoke it. IIFE is using for data privacy.
You can see the function has invoked and displayed “IIFE” and in line 6, console.log(name) is not working because the “name is not defined”.
Scope
There are two types of scopes, Global Scope, and Function Scope.
In Global Scope, when we declare a variable, it is available anywhere in our code.
sayName() function, first checks if there’s any variable call “name” available within the Function Scope. And it’s not. So, it checks if “name” is in Global Scope. So, if we change the value of “name ”inside the function, the console.log in the function will display the new value.
When a variable is functionally scoped inside of a function, it can not be used outside of the function.
In this code, when I call the function, the name is displayed in the console. But inline 7, the name is not defined. That proves variable in a Function Scope is not available in Global Scope.
So these are the interesting things I have learned about JavaScript. Hope you learn something from my article.
Happy Coding Folks 👽
