Posted on Sep 29 • Originally published at arindam1729.hashnode.dev Hoisting in Javascript is a very interesting yet confusing Concept. Many developers (including me) face problems understanding this concept in the beginning!If you are facing problems to understand Hoisting, you are in the right place!In this blog, we'll learn what hoisting is and how it works.Hoisting is a JavaScript mechanism where variables and Function declarations are moved to the top of their scope before code execution.Let me explain this in a simple way!In Javascript, Wherever you have declared the variable,it will move to the Top of the scope irrespective of their Global/local scopes.💡Note: Hoisting only moves the Declarations to the Top, not the assigned values.Basically, the Javascript execution context is divided into two parts:Creation PhaseExecution phaseIn the Creation Phase, Variables are allotted their memory space and initialized with the value `undefined`.In the Execution Phase, Previously declared variables are assigned some values and they are used to do further operations.Before jumping on Variable hosting, Try to predict the output of the following code:So What will be the output?Will it throw an error?No, It won't do that. I have previously mentioned that hoisting moves the declaration to the top scope. So it will move the declaration of the variable Arindam to the Top and assign 'undefined' to it.So the output is :Now, Let's take another example:What will be the output of this?Undefined?No! Unlike the first example Hello is not defined here, So it will throw an error!Variables declared with let and const are hoisted but not initialized with a default value. So, If you try to access the value of the variables it will throw ReferenceError.it happens because of the temporal dead zone (TDZ).The TDZ starts at the beginning of the variable's enclosing scope and ends when it is declared. Accessing the variable in this TDZ throws a ReferenceError.Let's see an example to understand this :For more information about TDZ, Check this BlogJust like Variables, Javascript functions are also hoisted. With this, we can call a function before it is defined.Let us understand it with this example:Here, We are calling the function before its declaration and the output is "Hello there!" . It's because the function is hoisted to the top scope.💡Note that only function declarations are hoisted, not function expressions.If we try to call the variable that the function expression was assigned to, we will get a TypeError or ReferenceError.Here are some errors you may encounter.If you call a function that is never declared, it throws a different ReferenceError:If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.Connect with me on Twitter, LinkedIn, Youtube and GitHub.Thank you for Reading :)FTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Nathan Ferreira - Sep 20 Donesrom - Sep 14 AlishaAS - Sep 10 Shan Shah - Sep 13 Once suspended, arindam_1729 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, arindam_1729 will be able to comment and publish posts again. Once unpublished, all posts by arindam_1729 will become hidden and only accessible to themselves. If arindam_1729 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Arindam Majumder . They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag arindam_1729: arindam_1729 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging arindam_1729 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.