In my attempt to keep on top of the newest features coming to the land of JavaScript, I will be writing a series of posts about the features that most interest me. Not that all of them aren’t interesting, but some are super awesome.

Generators are not an entirely new concept to the world of computer science and I had some previous familiarity with them in Python. Generator functions are defined by MDN as:

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Let’s take a step back and talk about a regular function. As we know it a function accepts arguments and executes until it either reaches a return statement or some sort of exception. Also in JavaScript we have a special case where we don’t provide a return statement and the function will implicitly return undefined (but that’s not worth diving...

One of the tricky concepts that stumps newcomers to JavaScript is hoisting. Even seasoned developers coming from other languages can be bitten by this feature. In most C based languages developers are used to the concept of block based scoping versus function based scoping. The best way to understand how hoisting works is by example:

function foo() {
    bar()
    baz()
    var bar = function() {
        console.log('Hello')
    }
    function baz() {
        console.log('World')
    }
}

foo()

So we have two different types of hoisting happening here, variable hoisting and function declaration hoisting.

What happens in this case is the variable bar is hoisted to the top of the function body and will return as undefined because at the time of it being called we have not assigned it to anything. Differently, the function baz is hoisted up the entire function body intact, so it...