What’s the Point of Having JavaScript Hoisting?

JavaScript is a scripting language used worldwide by web developers to create top notch websites. If you are looking into a programming job, then we need to provide you with the common questions you might come across.?Many of them revolve around JavaScript hoisting – a behavior that should help us when coding. But before going through its mechanism, let’s see what hoisting in JavaScript is.

What is Hoisting in Javascript?

You need first to be well conversant with what JavaScript hoisting is to understand its importance during programming. JavaScript hoisting is a default behavior in JavaScript that moves all of the declarations to the top of the current script, function, or scope. JavaScript is limited to hoisting just the declarations, and not initializations. Usually, this mechanism will hoist a variable within a current scope to the top irrespective of where it is declared. Also, if it is initialized, the current hoisted value will be set initially to ‘undefined.’

Consider the following code and note that it shows bad practice:

(FUNCTION () {
Var x = ?x?
Var y = ?y?
Var z = ?z?
})();

Hoisting declares all the variables at the top despite where they are in the function scope. The new code will appear as follows:

(FUNCTION () {
Var x, y, z;
x = ?x?
y = ?y?
z = ?z?
})();

You can consider this new code:

Var myvar = ?my_value?
(function () {
Alert(myvar);
Var myvar = ?local value?
})();

The output of the code indicated above will turn out undefined, based on the similar concept described in the first example. Myvar, in this case, returns undefined because the mechanism hoisted it automatically to the top of the scope function as soon as we declared it. Since hoisting in JavaScript now makes much more sense, you now need to know how to smartly use it when coding.

What?s the Point of Having JavaScript Hoisting?

Without JavaScript hoisting, a condition can arise where you have variables being used before they can be declared, causing confusion within the program. This scenario is mostly familiar with the global scope variables. JavaScript usually handles variables to be declared later differently to the ones that have not been declared entirely.

In a case where you are reusing variable names between an inner or outer scope, you are likely to make mistakes or an ?undefined? outcome. The thing is, many developers completely overlook the potential JavaScript hoisting?holds. However, if that happens on a larger scale, the program is prone to several bugs (which we can avoid by declaring all the variables at the top). Variable declaration is one of the essential aspects of programming languages. However, JavaScript hoisting can make your declarations result into bugs. It is, therefore, important to stay alerted for it to avoid nasty surprises.

Conclusion

At this point, you have the necessary knowledge on hoisting to help you answer any interviewer?s questions regarding the essence of hoisting. Make sure to look into further examples where hoisting can apply to a program to avoid simple programming pitfalls. Leave your thoughts or feedback regarding this post.