JavaScript Basics Quiz

Let's look at some JavaScript questions.

Question 1

What's the output.

x = 90;
function f() {
  console.log(x);
  var x = 100;
}
f();

Answer 1

The result is undefined . In JavaScript a variable exists in the scope of a function and that variable can be defined anywhere in the function. To find out more about lexical scope read here and here .

Question 2

Go to prototype homepage open firebug and execute following code.

var a = ["a", "b", "c"];
var result = "\n";
for (i in a) {
  result += "index: " + i + " value:" + a[i] + "\n";
}

Now go to jQuery homepage and execute the same code. Notice the difference in output. Why the difference?

Answer 2

Prototype adds additional methods to Array using Array.prototype . Those methods show up when you iterate through them. If you want to ignore methods added through Array.prototype then use this code.

var a = ["a", "b", "c"];
var result = "\n";
for (i in a) {
  if (a.hasOwnProperty(i)) result += "index: " + i + " value:" + a[i] + "\n";
}

Question 3

In order to find if an element with id foo is present, one can do

if ($("#foo").length > 0) console.log("id foo is present");

How can you make the conditional statement shorter.

Answer 3

In JavaScript following items evaluate to false in a conditional statement: undefined, null, false, empty string, NaN, 0

if ($("#foo")) console.log("id foo is present");

Question 4

What is the output in this case. Notice that function bar is defined after the return statement.

function foo() {
  console.log(z);
  console.log(bar());
  return true;

  function bar() {
    return "this is bar";
  }

  var z = "zzz";
}

foo();

Answer 4

Output is

undefined
this is bar
true

Question 5

What's output in this case.

function logit(n) {
  console.log(n);
}

for (i = 1; i < 5; i++) {
  setInterval(function () {
    logit(i);
  }, 2000);
}

Answer 5

The result would be output 5 5 5 5 and all the four output will appear together in one shot. Then after 2 seconds another set of similar data would appear. This would continue forever.

Question is why do I see the output in one single shot and why do I see value 5 for all four cases.

Browsers execute JavaScript in a single thread. While that thread is busy executing 'for loop' the thread makes note of additional instructions like setInterval. Since the thread is already running 'for loop', the same thread can't run setInterval. So the thread finishes the 'for loop' and then looks up additional tasks to be performed. It find setInterval task to be waiting. It executes the function. While it is executing the function ,by virtue of closure, the value of i is 5. Hence you see 5 5 5 5 and you see all that in one single shot.

Correct implementation would be

function logit(n) {
  console.log(n);
}

var counter = 0;
var timer = setInterval(function () {
  logit(counter);
  counter++;
  if (counter == 5) {
    clearTimeout(timer);
  }
}, 2000);

Above code would print 0 1 2 3 4 at an interval of 2 seconds.

Question 6

What's the output in this case.

flight = { status: "arrived" };
console.log(typeof flight.status);
console.log(typeof flight.toString);
console.log(flight.hasOwnProperty("status"));
console.log(flight.hasOwnProperty("toString"));

Answer 6

string
function
true
false

Question 7

What's output in this case.

function Person(name) {
  this.name = name;
}
Person.prototype.welcome = function () {
  return "welcome " + this.name;
};

p = new Person("John");

console.log(p.welcome.call(p));

o = { name: "Mary" };

console.log(Person.prototype.welcome.call(o));

Answer 7

welcome John
welcome Mary

Question 8

JavaScript has Math library which can be used like this

Math.max(6, 7, 8); // result is 8

If I provide an array with certain values then how would you find the max value for that array.

a = [1, 2, 3];

Answer 8

This answer builds up on the answer provided in #7 .

You can try this but it will fail.

Math.max(a); //output is NaN

You can try this but it will fail too.

Math.max.call(Math, a); // output is NaN

This will work

Math.max.apply(Math, a); //output is 3

apply method works because it accepts an array as the argument. call method passes the individual params to the called method directly and hence it does not work. You can read more about JavaScript apply and call methods here .