Lessons learned from JavaScript quizzes

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

var num1 = 5,
  num2 = 10,
  result = num1++ + num2;

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.

var x = 10;
var foo = {
  x: 20,
  bar: function () {
    var x = 30;
    return this.x;
  },
};

// 1
console.log(foo.bar());

// 2
console.log(foo.bar());

// 3
console.log(foo.bar.call());

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.

var bar = function () {
  var x = 30;
  return this.x;
};
console.log(bar()); //=> undefined

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.

var foo = {
  x: 20,
  bar: function () {
    return x;
  },
};
console.log(foo.bar());

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.

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

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.

var x = 5,
  o = {
    x: 10,
    doIt: function doIt() {
      var x = 20;
      setTimeout(function () {
        alert(this.x);
      }, 10);
    },
  };
o.doIt();

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.

var o = {
    x: 8,

    valueOf: function () {
      return this.x + 2;
    },
    toString: function () {
      return this.x.toString();
    },
  },
  result = o < "9";

alert(o);

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.

if (!("a" in window)) {
  var a = 1;
}
alert(a);

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.

function a() {
  alert(this);
}
a.call(null);

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.