JavaScript — Hoisting?

As a developer coming from Ruby(as-well as Ruby on Rails) the idea of calling a method before its actually run just seems ludicrous. Granted Ruby is pretty open to interpretation when it comes to syntax and naming conventions, but being able to actually call on something before the method itself is defined is not one of those things. To give you an example:

def say                 # defined our method here
puts "Hello World"     
end
say                     # called our method here

If we were to run this in our terminal we should see something like this:

Hello World         #returned
=> nil

With Ruby because there is implicit return we will always call on the value of the last evaluated expression. In the following example because the previous method was called:

def say  #our methods name

When we call on:

say  #our method call

This will automatically return the value for that method. The mechanics of this make sense, because there is an order to how methods are written in Ruby, they all follow some kind of uniformity when it comes to logic. However, switching over to JavaScript it turns this fundamental on its head that I have come to know and understand in Ruby into what feels like an abomination.

Torta (Mexican Sandwich)

VARIABLE HOISTING

So being someone of sound mind like myself you may be thinking along the lines of , “Well if I make myself a sandwich, I wouldn't attempt to eat that sandwich before I made it, would I?” In here lies the beauty or the troubles (depending on what way your pendulum sways) of hoisting in JavaScript. In JavaScript you may attempt to run something in the console such as:

var declaredSandwichName;  #naming a variable
console.log(declaredSandwichName);  #returns: undefined
declaredSandwichName = "torta de aguacate"; #declaring our variable
console.log(declaredSandwichName); returns: "torta de aguacate"

Sticking with our example of sandwiches, in this case Torta’s, above we've created a global variable but because we did not set this to anything when we attempted to console.log it returned undefined. We then declared this global variable to “torta de aguacate”, and we were able to return it with console.log. This all seems quiet simple if you have ever worked with any programming language, or even just how order of assignment works in real work applications. However, you can also accomplish the same out put by doing something such as:

console.log(declaredSandwichName); #returns undefined
var declaredSandwichName = "torta de aguacate"; #declaring our variable
console.log(declaredSandwichName); returns: "torta de aguacate"

You maybe just as confused as I was when I first saw this. So what is really happening here? This is the true power of JavaScript built in hoisting. When JavaScript runs in any program thru the power of hoisting it automatically looks forward to find all variable declarations and hoists them to the top of their respected functions. This is why you may see things written out in JavaScript that may seems unconventional coming from Ruby, such as Var being called later in a function but at the end of the day will receive the same result.

FUNCTION HOISTING

OK, so that covers variable hosting, however there is also something known as function hoisting. In function hoisting you may have something like this:

function Torta() {            #defining our function
console.log("YUM!");
}
Torta();                     #calling on our function

which is a conventional way you might see a function run, by declaring it first and then calling on it. However, it is also possible to write this same function as:

Torta();                  #calling on our function
function Torta() {        #defining our function
console.log("YUM!");
}

Whats happening here again is the power of hoisting just on the function side. JavaScript is allowing us to again call on our function before it is actually defined, it does this by hoisting the function name at the top as well as the function definition. This can be very powerful when needing to show high-level code at the start in order to better express intent.

Conclusion

I can only assume my trials and tribulations with JavaScript are only getting started. Things that seemed to have order, have now become chaos. I am now but an agent of chaos. I don’t take this mantle up lightly and look forward to what I may learn next.