Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops A Closer Look at Loop Conditions

Jose Vidal
Jose Vidal
15,016 Points

I see a `var` that equals a `function` BEFORE that function is even defined. Wouldn't cause problems? If not, how come?

In the video, Line 2 states var randomNumber = getRandomNumber(upper) but the actual function that it is referring to, is not defined until a few lines later.

How come? Why is this not a problem? I Imagine the JS Interpreter would 'read' line 2 and say "getRandomNumber...? I dunno what you're talking about. Haven't heard of that function yet."

7 Answers

It's called "Hoisting". It's about "how JS really works". Function and variable declarations automatically becomes "top-level" code. I hope there will be advanced level of JS at team treehouse.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,028 Points

I think it's because a functional declaration, if done correctly as it seems this example is then it won't actually be read by the interpreter until if reaches functional call.

This the time the action declared vby the function is taken.

Jose Vidal
Jose Vidal
15,016 Points

Hi Daniel. Thanks for I've looked online for 'hoisting' in javascript and that explains a lot. Thanks.

It's possible that this is explained in the previous video around the 6:30 mark.

Dave breaks down the process of the JS interpreter:

First, the JavaScript interpreter reads through the program. It memorizes the function and checks for any syntax errors.

Then it starts to run the program, it creates a variable named counter and stores the value zero in it.

It sounds like the JS interpreter stores functions into the browser's memory before the script is actually run or executed. Only functions, not other variables. I wasn't aware of this before, but it potentially helps me to understand how a framework like AngularJS uses all of the controllers and directives that you define.

But I don't know for sure - does this sound correct to anyone else?

I don't think i would become a problem unless the function was called before it was defined. meaning that you are just setting the value of a variable not actually executing the function which is later defined.

Don't quote me tho i could be wrong.

Jose Vidal
Jose Vidal
15,016 Points

Jonathan and Chyno, thanks for answering! I understand what you're saying; but if line one defines the upper variable, and line two states randomNumber = getRandomNumber(upper) wouldn't this line be actually doing a function call to define the variable? Isn't getRandomNumber(upper) calling upon the function in order to define this variable?

I'm guessing that variables are not really interpreted until they are executed in code. In a similar fashion to what you guys mention about functions. So the variable is kind of 'indexed' but is not executed until the time when it's actually executed in code...

Thanks again for the feedback!

Aaron Munoz
Aaron Munoz
11,177 Points

This example really has nothing to do with hoisting actually although that's an important concept to understand as well. The only reason why he could initiate a variable with a function that wasn't defined yet is because the variable wasn't used until AFTER the function was defined. That's it.