Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Kirin Otsutsuki
Kirin Otsutsuki
165 Points
Posted by Kirin Otsutsuki
Kirin Otsutsuki
165 Points

The value of the 'randomNumber' variable depends on a function which doesn't exist yet??

In this video, Dave set the value of 'randomNumber' to be the result of the function 'getRandomNumber()'. But when he calls this function, as far as the JavaScript interpreter is aware, it does not exist yet. Correct? I thought javascript ran top to bottom. How is this possible??

5 Answers

graemehunt
graemehunt
6,577 Points

Hi Kirin,

I think your questions have more to do with scope and the complex way in which scope affects how variables are looked for by the js compiler (ie. RHS look-up's vs LHS look-up's). I would recommend reading up on scope and how it affects your coding. I highly recommend a read of 'you don't know JS' by Kyle Simpson, which has a comprehensive breakdown of the subject.

Good luck & happy coding

Graeme

Kirin Otsutsuki
Kirin Otsutsuki
165 Points
Kirin Otsutsuki
Kirin Otsutsuki
165 Points

Thanks for the book recommendation.

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

The JS interpreter does run top to bottom; however, he's just assigning variables at the top (it's easier to read like that). Since variables have no actionable items included in them, the interpreter just recognizes that var randomNumber is where the result of the function getRandomNumber() should go.

Hope that helps!

Kirin Otsutsuki
Kirin Otsutsuki
165 Points
Kirin Otsutsuki
Kirin Otsutsuki
165 Points

So the variable is just a placeholder for a value that is generated later in the program?

Kirin Otsutsuki
Kirin Otsutsuki
165 Points
Kirin Otsutsuki
Kirin Otsutsuki
165 Points

Also, why does this work for functions but not variables? You can't set the value of a variable to be the value of another variable that appears further down in the code. But you can set the value of a variable to be the returned value of a function that appears further down in the code.

Alice Tribuleva
Alice Tribuleva
3,247 Points
Alice Tribuleva
Alice Tribuleva
3,247 Points

Hi Kirin, you came up with a great explanation which worked for me. Yep, the variable is kind of a shell, a box or a bag that can hold something later. It is very similar to the concept of function parameters, which behave as a placeholder – until an argument is 'passed' to the function. The function argument is something specific, while the parameter is by default undefined.

Christopher Dickens
Christopher Dickens
3,921 Points
Christopher Dickens
Christopher Dickens
3,921 Points

In another video, it was said that before the code executes, the Javascript reader scans the code from top to bottom, identifying syntax errors (if present), and variables and functions.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Because function declarations are read and added to the execution context before the code begins running through a process called function declaration hoisting. As the code is being evaluated, the JavaScript engine does a first pass for function declarations and pulls them to the top of the source tree. So even though the function declaration appears after its usage in the actual source code, the engine changes this to hoist the function declarations to the top.

This has been explained in the book "PROFESSIONAL JavaScript® for Web Developers Third Edition".