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 Foundations Variables Hoisting

Carla Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Carla Thomas
Front End Web Development Techdegree Student 16,039 Points

JS: "Hoisting" Challenge (Variables)

I am not only looking for answer, but would also like an explanation for the answer......I have watched the video multiple times but I just can't seem to pick up what Jim is puttin' down :)

The instructions....

** Alter the 'elevatorCloseButton' function to follow the best practices in declaring variables within the scope of the function. **

The code

<script>

    function elevatorCloseButton(pushed) {

        if (pushed) {
            var status = "I'll close when I'm ready.";
        }

    }

    elevatorCloseButton(true);

    </script>

2 Answers

In JavaScript, variable declarations get hoisted to the top of the scope they were declared in. This may sound complicated, but here's what happens.

You declare a variable and assign value to it like this:

var myVariable = "Some text";

Even though you think of this as a single statement, the JavaScript engine won't see it that way. It actually sees two statements here. The first one is the variable declaration: var myVariable;. The second one is the value assignment: myVariable = "Some text";.

When your code is being run on a webpage, several things happen. The code gets parsed, compiled and optimized before the browser runs it. Different parts do different things. In this case, the compiler takes care of the variable declaration (the first part) during compilation. And the engine handles the assignment (the second part) during the execution.

Because of this, the compiler hoists the variable declaration to the top of the scope. This basically means that it moves the declaration to the top of the function in this case.

So if you have something like this:

function () {
   // some code
   var myVar = "Something";
   // some other code
}

it will get converted into this:

function () {
   var myVar;
   // some code
   myVar = "Something";
   // some other code
}

This is why it's recommended to do this manually while writing a program to avoid confusion.

Your job is to break down the status variable declaration and assignment into two pieces. Leave the assignment where it is, inside the if statement, and move the declaration to the top of the function.

well explained, my man

great explanation! thank you.