Hoisting in Javascript

Hoisting in Javascript

hackernoon.com hackernoon.com3 years ago in#Dev Love63

Originally published by Jed Record on March 19th 2019 Photo by EJ Yao on Unsplash Recently I’ve been working on understanding more Javascript fundamentals and I took a look at hoisting. I thought that it was a pretty cool concept, so have written a blog post explaining it. What is hoisting? Hoisting is a process in the Javascript engine which does a pass through your code and allocates memory based on the presence of certain things. Hoisting is a way for us to understand how this works. In the Global Execution Context, there are two stages, the creation stage, and the execution stage. The former provides the Global Object (e.g. ‘Window’ in the browser), the this keyword, and hoisting. The latter is when we run our code. When the Javascript engine does its pass through your code, it looks for function declarations (but not arrow functions, or function expressions), and variables (excluding let or const). These are then ‘hoisted’ which allocates them space in memory. Partial Hoisting First up is partial hoisting. This applies to variables only. Functions are handled differently. So consider the code below: So on the first line we try and console.log our favouriteDrink variable. There’s a problem here though – we haven’t defined it yet. So really we should get a Reference Error right? Where is undefined coming from? Well, when the Javascript engine passes through the code above, it sees that we have a var and realises that a variable is going to be defined. It doesn’t care what the variable is, but it knows that some memory is going to be needed, so it allocates some in the heap so that it’s ready when we need it. This is why you then get ‘undefined’ in the example above. You’ve probably seen this when coding before right? Well it’s just Javascript’s placeholder. It won’t break the script, but it knows that something will be allocated to our favouriteDrink variable. Great, so how about a trickier example? Look at the code below: Ok, so we have two variables with the same name, but different values. How does Javascript handle this? It doesn’t care. For the purposes of hoisting, the engine sees the first variable declaration and assigns it some space in the memory heap. It then sees a second declaration of the same variable, but the value of that variable isn’t significant. The memory has already been assigned, so the engine simply ignores it. When you run the code above, our second console.log statement predictably returns beer, as we’re taking the latest declaration of the variable. As a note, remember that the following won’t work: const a = ‘Foo’; let b = ‘Bar’; Neither const not let get hoisted. Full Hoisting Function declarations (but not expressions, or arrow functions) are fully hoisted. This means that the function is allocated space in the memory heap, but instead of simply creating a placeholder like we saw in the previous section, the contents of that function are stored in memory. So for an example: As we can see, we call the function before we have actually written it. So what’s going on here? Well, the contents of the function have been stored in memory, and so Javascript knows what you’re looking for. Imagine that the function had actually been taken from where we have written it, and instead been placed at the top of the file.  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply