Show HN: A Javascript quiz that explores how javascript scopes its variables

Show HN: A Javascript quiz that explores how javascript scopes its variables(madebyknight.com)

15 points by Serplat 13 years ago | 10 comments

tantalor 13 years ago |

Since your quiz applies equally to any JavaScript engine, why not replace "window" with "this"?

See https://developer.mozilla.org/en-US/docs/JavaScript/Referenc...

> In the global context (outside of any function), this refers to the global object, whether in strict mode or not.

dschoon 13 years ago |

Yeah, I agree with the other comments -- the greatest JS scoping gotcha involves unbound methods.

    var o = { a:13, add:function(b){ return this.a + b; } };
    o.add(42); // => `55`
    var add = o.add;
    add(42); // => `NaN`, because `this.a` is (presumably) `undefined`
    var a = 3;
    add(42); // => `45`, because `this.a` is resolved to `window.a`, as `window` is the global variable used as the method context when we call an unbound function (which is stupid (`null` would have been a way better choice, Brandon)).

This is the sort of thing you learn and just get over to reach the level of javascript mastery. Yeah, some things are silly. But you know what? You only get to write one language to access the dynamic web.

dschoon 13 years ago | |

For unknown reasons, ARC has truncated my code-comment. It read:

// => `45`, because `this.a` is resolved to `window.a`, as `window` is the global variable used as the method context when we call an unbound function (which is stupid (`null` would have been a way better choice, Brandon)).

droppedonjapan_ 13 years ago |

You might want to consider including something about how passing objects between functions can be by reference or value for object oriented Javascript programming.

suyash 13 years ago | |

JavaScript only supports pass by value, @ author: Nice quiz, I failed the last one, it would be nice to add more quizes and test users knowledge of function scoping, just like the commenter said, since functions can be passed around like objects, function scoping is another tricky one to master for beginners.

japrescott 13 years ago | | |

not true. boolean, strings, numbers (int, float) are passed by value, while Objects, Arrays and Functions are passed by reference!

japrescott 13 years ago |

veryvery superb quiz! I like the way you mix questions with a tutorial, not just "HA, you suck, wrong", but really give detailed explanations, even when the correct answer is given. Maybe you can add some questions with strange return values or some "what happens if you modify the passed-in object within a function?";

function(){ var fn2=function(){} if (fn2()){ alert("nobody ever calls me"); } else{ alert("stop calling me!"); } } (no return value is a falsy value)

var data={a:"cow"}; function update(obj){ obj.a="fish"; } update(data); alert(data.a); //"fish"

vs.

var data="cow"; function update(str){ str="fish"; } update(data); alert(data); //"cow"

keep up the great work!

theuiguru 13 years ago |

Excellent quiz to test your knowledge on global and local variables.

pankajparashar 13 years ago |

Good & Informative quiz....Especially the tutorials section.

Vishnudas 13 years ago |

Nice Quiz. I just attempted with all right :)

var o = { a:13, add:function(b){ return this.a + b; } }; o.add(42); // => `55` var add = o.add; add(42); // => `NaN`, because `this.a` is (presumably) `undefined` var a = 3; add(42); // => `45`, because `this.a` is resolved to `window.a`, as `window` is the global variable used as the method context when we call an unbound function (which is stupid (`null` would have been a way better choice, Brandon)).