Hoisting in JS

A Hoisting Mate!!! No??? Didn't get it??? Pirates? Sigh, well maybe my jokes need some work but this blog would give you a quick summary of how hoisting works in javascript! Let's dive in.

So when you’re coding in JS you might think that variables are defined in the order they are written and in some instances, you are correct and other times something called hoisting is happening when the code is being compiled. A textbook definition of what hoisting means is that “It raises (something) by means of ropes and pulleys.”. In javascript, it's defined by a mechanism where variables and functions are moved to the top of their scope before code execution.

That is figuratively not literally for clarification. This means that we will be able to read some functions or variables that are called before they are actually assigned below. Now this power could come with some pros and cons, so let us dive a little deeper and talk about var, let, and const.

var a = "Ahoy Matey"
let b = "Hoisting Matey"
const c = "Gold!!!"

Var doesn’t acknowledge scoping. So if you had written something like var a = “Ahoy Matey” and then wrote var a = “string” inside a function. It’ll change to “string”. With let b and const c if you tried to change it you’ll get a syntax error saying Identifier has already been declared.

This is a good thing because it could protect us from overwriting variables that could cause bugs if we accidentally changed it. When we call const or let, it cannot be redeclared and know that the variable is in use. Plus it helps us avoid hoisting. This is good because it lets us load our pages faster than having to declare and assign all variables before the user could see the page.

So to sum it up var is what we wouldn't want to use because the variable could be reassigned, declared, hoisted, and doesn’t listen to scoping leading to mistakes, while const and let doesn't follow those same rules. Also, all three of them have different forms of initializations. Which basically means when they are actually assigned their initial values. We could initialize var and let without value but const would throw a reference error. Meaning that const will have to be declared and assigned in order not to get an error.

const newVariable = "I Love coding" //would work
const newString //would error out since it doesnt have assignment, which is the value it defined too.

For function expressions and declarations they’re quite similar but a main difference stands out. With declarations, you don't have to assign a variable to the function. For example

 function google(){
   return 30}
#no varable is assigned here

and for function declaration, we assign a variable to a function that looks like this.

#Anonymous Expression
const google = function(){
return 30
}
#named expression
const family = function fam() {
return "I Love Yall"
}

Function expressions are usually used to be a tool for part of a bigger function to be called upon because we could place the variable in different places. I hope this blog gave you a better understanding about how hoisting works as well as the differences between let, var, const, function declaration, and function expressions.

Cheers Matey!