Coding Concepts - Hoisting
Tags: javascript, beginners, tutorial, webdev
Published: 2019-07-17 08:38:20

---
title: Coding Concepts - Hoisting
published: true
description: 
tags: javascript, beginners, tutorial, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pzsl826941zqfpp58eic.png
series: Coding Concepts
canonical_url: http://blog.designpuddle.com/web-development/coding-concepts-hoisting-javascript/
---

<p>Hoisting is the behavior of moving declarations to the top of the current scope. This is the default behavior in JavaScript when using the <strong>var&nbsp;</strong>keyword but using the new <strong>let </strong>and <strong>const </strong>keywords means this does not occur.</p>

<figure class="wp-block-image"><img src="https://ccscleaning.com/wp-content/uploads/2018/12/industrial-cleaning-services-banner.jpg" alt="Image result for window cleANER crane BANNER"/></figure>

<h2>Hoisting in Action.</h2>

{% codepen https://codepen.io/chrisbertrand/pen/yddNze default-tab=js,result %}

<p>Here we can see that the variable is declared after it's been used, so how does this still work?</p>

<h2>How and Why?</h2>

<p><strong>Why does JavaScript do this?</strong> <em>Hoisting</em>&nbsp;is done during the interpreter's first run through the code. The JavaScript engine was designed in such a way that your code is run twice, the first time it runs through some syntax checking and anything that uses the global object methods. It then does some optimisation to improve performance, which is where hoisting comes in. The second pass is where your code gets run.</p>

<figure class="wp-block-pullquote"><blockquote><p>Hoisting will move all declarations to the top of the current scope (top of the current file or function).</p></blockquote></figure>

<h2>Initializations are Not Hoisted.</h2>

<p>In this example, you can see that when declaring and initialising a variable in the same line the javascript engine does not optimise this block. As such you get an <strong>undefined</strong> error when trying to access the variable.</p>

{% codepen https://codepen.io/chrisbertrand/pen/yddeyx/ default-tab=js,result %}

<h2>Let and Const behave differently</h2>

{% codepen https://codepen.io/chrisbertrand/pen/qzzNjL default-tab=js,result %}

<p>When changing the first example to use the <strong>let&nbsp;</strong>or <strong>const </strong>keywords instead of <strong>var</strong> everything goes belly up. If you open your console window you will spot the JavaScript engine throwing exceptions (I've added images if you can't be bothered 😉 )</p>

<p>You can see nothing is present in the results pane, that's because these new keywords behave differently. The errors below are easy enough to understand, a <strong>const</strong> needs to be initialised when declared, whereas a <strong>let </strong>gets checked during the first cycle of the interpreter.</p>

<!-- wp:image {"id":1542} -->
<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2019/07/image-1.png" alt="" class="wp-image-1542"/></figure>

<!-- wp:image {"id":1541} -->
<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2019/07/image.png" alt="" class="wp-image-1541"/></figure>

<h2>Put your declarations in scope.</h2>

<p>Hoisting is pretty cool eh? It's great that JavaScript is so forgiving and allows things like this to work. Equally, it can mean that code works when you're not expecting it to. Going forward, it's probably best to keep all your declarations at the beginning of every scope though! With the introduction and mass adoption of the <strong>let</strong> and <strong>const&nbsp;</strong>keywords, it's important to know the differences, and know that simply changing all your <strong>vars&nbsp;</strong>to <strong>lets&nbsp;</strong>can cause problems in your application.</p>

<h2>What about Functions</h2>

<p>Hoisting also applies to&nbsp;<em>function declarations</em>, which is why you can define your function after you call them! However, <strong>Function expressions/Anonymous methods</strong> do not get hoisted in a similar fashion to let and const. Take a look at this last CodePen, we can see that the variable declarations get hoisted from the bottom, but the anonymous function call does not, which kills the engine throwing errors.</p>

{% codepen https://codepen.io/chrisbertrand/pen/MMMedB default-tab=js %}

<!-- wp:image {"id":1544} -->
<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2019/07/image-2.png" alt="" class="wp-image-1544"/></figure>

<p>Finally, it's good to know that <strong>functions get hoisted before variables</strong>! So when refactoring legacy code, remember to look at the scope of all your variables and think about how the interpreter will be parsing the code you are modifying.</p>

> The main reason for this is because let and const are block scoped. var on the other hand is not and therefore can be hoisted up to the global context (as long as 'use strict' is not present

> James - https://dev.to/jamesthomson


<!-- wp:heading {"level":3} -->
<h3>Resources</h3>

<ul>
<li><a href="https://www.w3schools.com/js/js_hoisting.asp">https://www.w3schools.com/js/js_hoisting.asp</a></li>

<li><a href="https://en.wikipedia.org/wiki/JavaScript_engine">https://en.wikipedia.org/wiki/JavaScript_engine</a></li>

<li><a href="https://www.codingame.com/playgrounds/7974/understanding-hoisting-in-javascript">https://www.codingame.com/playgrounds/7974/understanding-hoisting-in-javascript</a></li>

<li><a href="https://codeburst.io/javascript-what-is-hoisting-dfa84512dd28">https://codeburst.io/javascript-what-is-hoisting-dfa84512dd28</a></li>
</ul>