Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

JavaScript Interview Question

cam.ly

Post reply on HN
Print view View original

21–30 of 63 posts

Re: JavaScript Interview Question

#21

Post by Timmy_C »

theoretical wrote: post #14
Wilduck wrote: post #4

Earlier quoted context omitted.

Please do.

It won't alert quite what you want - when you click on each element in the list, it will alert "4". This is because the function assigned to the click event of each li is bound to the "i" variable used in the loop by a closure. Variable i is incremented to 4 before the loop ends, so that is what each will print. You could use make the function used in the click handler take a parameter, then use partial function appl…

The function in the click handler does take a parameter 'e' (...or whatever you call it) which is an Event object. But I think you're on to something by using currying.

Re: JavaScript Interview Question

#22

Post by SMrF »

mustpax wrote: post #13
austintaylor wrote: post #5

I think they all alert '3' because of the missing 'var' keyword.

Just adding var wouldn't be enough, you're still referencing the variable from the outer scope. You need to create your own copy. Instead of: els[i].addEventListener('click', function(){alert(i);}); Do: els[i].addEventListener('click', function() { var j = i; alert(j); }); Edit: This is wrong, archgoon has the correct answer below. That'll teach me for jumping on closure problems in the morning :)

I think you want var j = i outside the function.

Edit: Oops, this is wrong as well. :-)

Re: JavaScript Interview Question

#23

Post by broquaint »

dmvaldman wrote: post #11

Spoiler Alert! each list item alerts 4 when clicked. This has to do with closures in js. The way I understood it (and please correct if inaccurate) is that each list item has an event listener that calls function: alert(i). However, it's not true that each list item has its own value for i. The value of i is figured out only when the link is clicked. Once script finishes, i has the value 4, and when clicked on, each…

The behaviour is due to the fact that variables in JavaScript are scoped to the function, although as that code is in the global scope and lacks a var declaration it will live under the global object (window in this case). So in that example each closure captures the same variable hence 4 being produced within each alert(). For more info see: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/C...

Re: JavaScript Interview Question

#24

Post by tremendo »

mustpax wrote: post #13
austintaylor wrote: post #5

I think they all alert '3' because of the missing 'var' keyword.

Just adding var wouldn't be enough, you're still referencing the variable from the outer scope. You need to create your own copy. Instead of: els[i].addEventListener('click', function(){alert(i);}); Do: els[i].addEventListener('click', function() { var j = i; alert(j); }); Edit: This is wrong, archgoon has the correct answer below. That'll teach me for jumping on closure problems in the morning :)

alert('"'+i+'"')

Re: JavaScript Interview Question

#25

Post by theoretical »

mustpax wrote: post #13
austintaylor wrote: post #5

I think they all alert '3' because of the missing 'var' keyword.

Just adding var wouldn't be enough, you're still referencing the variable from the outer scope. You need to create your own copy. Instead of: els[i].addEventListener('click', function(){alert(i);}); Do: els[i].addEventListener('click', function() { var j = i; alert(j); }); Edit: This is wrong, archgoon has the correct answer below. That'll teach me for jumping on closure problems in the morning :)

That won't quite work, as you're still just copying the value of i when that function is executed, which will be 4.

You could make the function take a parameter, then return a function which uses that parameter, or use currying.

Edit: I've posted a working version in my comment further down, http://news.ycombinator.com/item?id=2124559

Re: JavaScript Interview Question

#27

Post by [deleted] »

mustpax wrote: post #13
austintaylor wrote: post #5

I think they all alert '3' because of the missing 'var' keyword.

Just adding var wouldn't be enough, you're still referencing the variable from the outer scope. You need to create your own copy. Instead of: els[i].addEventListener('click', function(){alert(i);}); Do: els[i].addEventListener('click', function() { var j = i; alert(j); }); Edit: This is wrong, archgoon has the correct answer below. That'll teach me for jumping on closure problems in the morning :)

[deleted]
Post reply on HN