Just [[currentUser.getNumFreeQuestionsLeft()]] No more free questions left!Upgrade Now
We're building a web game where everybody wins and we are all friends forever.
It's simple—you click on one of three boxes to see what nice thing you've won. You always win something nice. Because we love you.
Here's what we have so far. Something's going wrong though. Can you tell what it is?
The syntax is just fine—the problem is some unexpected behavior.
Coding style choices aside, what we found is a problem in behavior.
The user's prize is always undefined!
The anonymous function we're assigning to the buttons' onclicks has access to variables in the scope outside of it (this is called a closure). In this case, it has access to btnNum.
When a function accesses a variable outside its scope, it accesses that variable, not a frozen copy. So when the value held by the variable changes, the function gets that new value. By the time the user starts pressing buttons, our loop will have already completed and btnNum will be 3, so this is what each of our anonymous functions will get for btnNum!
Why 3? The for loop will increment btnNum until the conditional in the middle is no longer met—that is, until it's not true that btnNum < prizes.length. So the code in the for loop won't run with btnNum = 3, but btnNum will be 3 when the loop is done.
We can solve this by wrapping our anonymous function in another anonymous function that takes btnNum as an argument. Like so:
This "freezes" the value of btnNum. Why? Well...
Primitives vs. Objects
Arguments Passed by Value vs. Arguments Passed by Reference
One important property of primitives in JS is that when they are passed as arguments to a function, they are copied ("passed by value"). So for example:
The threatLevel inside inspireFear is a new number, initialized to the same value as the threatLevel outside of inspireFear. Giving these different variables the same name might cause confusion here. If we change the two variables to have different names we get the exact same behavior:
In contrast, when a function takes an object, it actually takes a reference to that very object. So changes you make to the object in the function persist after the function is done running. This is sometimes called a side effect.
Bringing it home
Back to our solution:
So when we pass btnNum to the outer anonymous function as its one argument, we create a new number inside the outer anonymous function called frozenBtnNum that has the value that btnNum had at that moment (0, 1, or 2).
Our inner anonymous function is still a closure because it still reaches outside its scope, but now it closes over this new number called frozenBtnNum, whose value will not change as we iterate through our for loop.
Like several common interview questions, this question hinges on a solid understanding of closures and pass by reference vs pass by value. If you're shaky on either of those, look back at the examples in the solution.