Deep JavaScript Foundations, v3

Hoisting Example

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "Hoisting Example" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle walks through code examples that utilize hoisting with functions and variables.


Transcript from the "Hoisting Example" Lesson

>> Kyle Simpson: Let's look at this example. I am referring to the variable teacher and then I am calling the otherTeacher function, okay? Everybody see that? Now, the otherTeacher function hasn't been defined yet, so that otherTeacher function has hoisted, it's available for us to use. What's going to happen on line 5?

>> Speaker 2: [INAUDIBLE].
>> Kyle Simpson: If you're thinking about this only in terms of hoisting, you have to remind yourself that the var teacher from line 6 got hoisted up to line 4.5. And therefore what's gonna get printed on line 5 is actually undefined. So that's why even with the couple of lines of code, we can trick you if you're not used to thinking about this as a two pass system.

If you think about it as a two pass system, obviously there's a var teacher in the blue bucket. There's a blue marble called teacher before otherTeacher ever has the chance to run.
>> Kyle Simpson: So let's talk about the difference between var hoisting and function hoisting. Because some will tell you that all hoisting is bad, and I will tell you that I think some hoisting is useful and some is not.

On line 3, I am assigning to a variable earlier in the scope then when it's been var declared. I have never met a person that would say unconditionally, I think that's a great coding style, just do that all the time. Almost universally, people will agree it's not a great idea.

I've only ever found one exception in all of my coding where that is something that I wanted to do. And it's more nuanced than what we'll dive into here. Almost universally, I don't want to assign the variables earlier in a scope than where I've declared them. So I would agree with the predominant majority in that case.

That's pretty rare, but I agree with the majority in that case, okay? But what about line 8? Is this code so broken because I'm calling getTeacher even though the function declaration's at the bottom? Many more people are familiar with, or okay with, or feeling comfortable with the function hoisting than with the variable wasting.

So I would say it kinda depends. You might think that function hoisting is bad, but you might think is okay. And I happen to think not only is it okay, but its extremely useful for code readability. It's extremely useful to be able to put the executable code at the top and the functions at the bottom.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now