Lessons learned from JavaScript quizzes

Nicholas answered three JavaScript quizzes in his blog. I am not interested in quiz like the one given below

1var num1 = 5,
2  num2 = 10,
3  result = num1++ + num2;
Copy

However some of the questions helped me learn a few things.

Questions from quiz

Recently there was a quiz out.

This was question #5 in the original blog. I have modified the quiz a little bit to suit my needs.

1var x = 10;
2var foo = {
3  x: 20,
4  bar: function () {
5    var x = 30;
6    return this.x;
7  },
8};
9
10// 1
11console.log(foo.bar());
12
13// 2
14console.log(foo.bar());
15
16// 3
17console.log(foo.bar.call());
Copy

I got the first two answers wrong. In JavaScript a variable and a property are two different things. When this.xyx is invoked then JavaScript engine is looking for property called xyz.

1var bar = function () {
2  var x = 30;
3  return this.x;
4};
5console.log(bar()); //=> undefined
Copy

In the above case output is undefined. This is because this refers to a property named x and since no such property was found undefined is the answer.

1var foo = {
2  x: 20,
3  bar: function () {
4    return x;
5  },
6};
7console.log(foo.bar());
Copy

Above code causes ReferenceError because x is not defined. Same theory applies here. In this case x is a variable and since no such variable was found code failed.

Coming back to the third part of the original question. This one uses call.

1console.log(foo.bar.call());
Copy

First argument of call or apply method determines what this would be inside the function. If no argument is passed then JavaScript engine assumes that this would be global scope which translates to this being window. Hence the answer is 10 in this case.

Questions from another quiz

There was another quiz .

In the original blog this is question #2.

1var x = 5,
2  o = {
3    x: 10,
4    doIt: function doIt() {
5      var x = 20;
6      setTimeout(function () {
7        alert(this.x);
8      }, 10);
9    },
10  };
11o.doIt();
Copy

The key thing to remember here is that All functions passed into setTimeout() are executed in the global scope .

In the original blog this is question #5.

1var o = {
2    x: 8,
3
4    valueOf: function () {
5      return this.x + 2;
6    },
7    toString: function () {
8      return this.x.toString();
9    },
10  },
11  result = o < "9";
12
13alert(o);
Copy

The thing to remember here is that when comparison is done then valueOf method is called on the object.

Questions from quiz

This is question #1 in the original blog.

1if (!("a" in window)) {
2  var a = 1;
3}
4alert(a);
Copy

I knew that all the variable declarations are hoisted up but somehow failed to apply that logic here. Please see the original blog for a detailed answer.

This is question #5 in the original blog.

1function a() {
2  alert(this);
3}
4a.call(null);
Copy

I knew that if nothing is passed to call method then this becomes global but did not know that if null is passed then also this becomes global.