Forem: Kamlesh Chavan

Hoisting in JavaScript

Kamlesh Chavan — Sun, 03 May 2020 10:57:41 +0000

Hoisting is JavaScript's default behaviour of moving declarations to the top (not literally).

What is hoisting?

In simple words, hoisting is using variable and function before they are declared. Meaning variables and function declarations moved to the top of their scope before any other code execution, no matter where they are declared. This doesn't mean literally moving your code to top but, the compilers put the declaration into the memory first in the compile phase. The declarations are processed before any other code executed.

Undefined:

In the above example, when we do console.log(name) at first, we get ReferenceError because name is not declared previously. But when we check, console.log(typeof name) we get undefined as output. It is because undeclared variables are assigned undefined at the time of execution. The undefined is a primitive type in JavaScript, just like String, Boolean, and Numbers. It means you have not explicitly assigned any value to that variable.

Variables:

Here, we have used the variable firstName before it is declared. And console.log(firstName) returns undefined. This doesn't give ReferenceError. When we do console.log(firstName) the second time, we get the expected output. Why? Because JavaScript has hoisted variables. And the code looks like below in the interpreter.

Only function and variable declarations are hoisted in JavaScript. That is the reason we get undefined when we do console.log(firstName) for the very first time. Initializations are not hoisted.

Functions

Similarly, function declarations are moved to the top means they are executed before any other code in the program. Check below code snippet.

It works perfectly fine as if the function getName() is defined first and then called. This because the declaration is moved to the top. Below is how the compiler reads through the above code.

ES5 - strict mode

By using the strict mode of JavaScript introduced in es5. We can be more careful and alert about using variable declaration. It helps to prevent us from using undeclared variables.

When we are using firstName without declaring, we get an error. Read more about strict mode here.

ES6 - let and const

ES6 introduced two new ways of declaring variables in JavaScript let and const. Both let and const does not support hoisting. Let's see it n practice.

We get an error when using let or const before the declaration. Learn more about let and const in the below article.

Understanding let and const.

Kamlesh Chavan ・ May 1 '20 ・ 3 min read

#javascript #ecmascript #let #const

Let us recollect things we learned up above.

Declaration of functions and variables are moved to the top of their scope in JavaScript. Meaning compiler executes this declaration before any other code.
Only declarations are hoisted, not the initializations.
Using strict mode helps us prevent the use of a variable before the declaration.
Both let and const does not support hoisting.

Thank you for reading. 🎉

Understanding let and const.

Kamlesh Chavan — Fri, 01 May 2020 09:43:31 +0000

ES6 introduced two new ways of declaring variables in JavaScript let and const.
Is there any issue with var? No, 100 thousands line of code is working in production javascript without any problem using var. But its possible to accidentally misuse or create unnecessary weird situations.

Let's kick things by understanding issues with var.

Declaration and value assignments :

In the above code, we get Kamlesh printed first and then Something else get printed in console as we have reassigned the same variable var name with a different value. We can go ahead and reassign this var name to function, number, object, or anything.
We just not only can reassign var based variables but also redeclare them and make new var name = 'something'. This is perfectly valid with var based variables, and this can get us in the wired situation like redeclaring the same variables by not knowing we have already used the same variable name.

Scope:

In the above code, we can see that we have used var firstName variables both inside and outside the if block, and console.log(firstName) are printing results for both without any error.
var based variables are function scope, meaning they are not available outside the function. Also, they are not block scope variables, meaning they are available outside the block.

Things with let

Declaration and value assignments :

In the above code, when we assign value to, name = 'Something' and we get the desired output in the console. But when we try to redeclare, let we get an error "already declared".
We can reassign let but can not redeclare let based variables. If we try to redeclare let based variables, we get an error "duplicate declaration".

Scope

Here in the above code, you can see when we declare var firstName inside the block and using it inside block prints the result, but using it outside block is giving an error "variable not defined".
This means that let variables are block scope variables meaning they are only available inside their declaration scope block.
If we need to use firstName outside the block, we need to declare it up above the if block, and it should work in case of the above example.

Things with const

Declaration and value assignments :

Here we can see that we can not reassign const variables, nor can we redeclare them. If we try to do so, we should expect an error.
Point to note here is the const based variables can not be redefined and also can not be reassigned.

Scope

The const based variables are also block scope variables, and they are only available with the block they are defined. If we try to access then outside the block, an error is expected.
It's always a good practice to start defining the variable as const and eventually if we determine that some of those values need to be reassigned then we use let.

Many people get confused with const value reassignment. Please see the below code.

You can assign an object to const and you can change the value of properties inside the object but can not reassign the value to const person. There is another example of const someString = 'Dummy string', when you try to reassign this someString variable it gives an error.

Let's recap what we learned here,

Start declaring variables as const unless their values need to be reassigned.
So const first let if we need to. (let's forget about var)
Both let and const can not be redeclared. It gives an error.
let Variables values can be reassigned.
You can not reassign values to const.
Both let and const are block scope. Whereas var is function scope.

Please read through hoisting in JavaScript. Hoisting is JavaScript's default behaviour of moving declarations to the top (not literally). It is another important concept to know about the variable declaration.

Hoisting in JavaScript

Kamlesh Chavan ・ May 3 '20 ・ 2 min read

#javascript

Thank you for reading; this is my first blog ever. 🎉