JavaScript interview questions

Posted in 'General, JavaScript' by James on June 7th, 2011

The questions below were asked in a preliminary check before the actual interview. The role itself was for a “JavaScript Engineer”. This particular set of questions is from a job I applied to over a year ago. I’ve chosen to share them here because I think readers of this blog would benefit from knowing what kind of things are expected if you’re applying to a JavaScript-centric role.

• What is the relationship between ECMAScript, Javascript and Jscript?

• What core types are available in Javascript?

• What do the following statements return and why?

  parseInt("07");
  parseInt("09");
  parseInt("010");
  
  "1" + 2 + 3;
  3 + 2 + "1";
  
  "1" == 1;
  "1" === 1;
  "1" == true;
  "1" === false;

• Alert the contents of the bar variable using the foo variable

var foo = "bar";
var bar = "foobar";

• Alert the string “foobar” after a 10 second delay.

• Implement Array.prototype.filter for IE.

• Create a Person class with public/private/privileged members and methods.

• Why does the statement 5 * 1.015 not return 5.075?

• Replace the string "The quick brown fox jumps over the lazy dog" with the string "The1 quick2 brown3 fox4 jumps5 over6 the7 lazy8 dog9".

• List several ways that you can communicate asynchronously with the server.

• How would you embed this URL in a link inside an XHTML document?

http://www.google.com/search?hl=en&q=%22xhtml%22

• How would you serve a StyleSheet only to IE users older than IE8?

• Write a jQuery plugin to display a list of images in a Lightbox.

What do you think of these questions? Fair?

Related:

• “Advanced JavaScript Interview Questions“
• “Commonly asked JavaScript interview questions“

Comments:

TiTiJune 7th, 2011 at 9:46 pm

#1.
ECMAScript = Define various detailled specs
Javascript = The language, general word
Jscript = A Microsoft implementation

(please don’t ask more :-p)

#2.
Boolean
Number
String
Date
Object?

(after a rapid search it seems the 2 last are wrong)

#3.

parseInt("07"); // -> 7
parseInt("09"); // -> 9? Hum i known there something with 08 / octal base
// I also know second parameter of parseInt (base) is very important, typically 10 for most conversions.
parseInt(”010”); // -> 10?[ok wrong for the 2 last again, and i really don't care why.
I just know that it works if you set the second argument to 10. Fuck it. Damn binary-octal-stupid parser^^]

"1" + 2 + 3; // -> "123" because of concatenation and `type priority` ; "1" + 2 = "12" ; "12" + 3 = "123"
3 + 2 + "1"; // -> "51" ; 3 + 2 = 5 ; 5 + "1" = "51"Do I just invented `type priority` ? Anyway i think i’m right even if i don’t know the real name used for the inner workings.

"1" == 1; // -> true
"1" === 1; // -> false (value & type checked)
"1" == true; // -> true (because "1" == 1)
"1" === false; // -> false

#4.

alert(eval(foo)); // eval is evil

#5.

setTimeout(function()
{
    alert("foobar");
}, 10000); // after a minimum of 10 seconds [likely a few ms after 10s passed]

#6.

uh I don’t really know it doesn’t exist in IE, I’m relying on higher level frameworks usually….
I guess something like (sorry, comment system broke the indentation):

if(!Array.prototype.filter)
{
    Array.prototype.filter = function(search)
    {
        var matches = [];
        for(var i = 0, len = this.length; i<len; i++) // yeah i know while(i--) stuff is better, also a little more obscure
        {
            if(this[i].toString().indexOf(search) != -1) // toString(), nope?
            {
                matches.push(this[i]);
            }
        }
        return matches;
    }
}

// Please don't hit me if this is a bad implementation, but help me with a better one (and comments!).

#7.

// This one is "easy" for me because i worked the question a few months back
// It's think it's an important question and the following model is not enough mentionned

function Person()
{
    this.publicMember = "foo";

    this.privilegedMethod = function()
    {
        return privateMethod();
    }

    var privateMember = "bar";

    function privateMethod()
    {
        return "hello";
    }

}
// Public methods
Person.prototype =
{
    getDate: function()
    {
        return new Date();
    },
    getWorld: function()
    {
        return "world";
    }
}
// Bonus: Public static method
Person.kill = function()
{
    return "dead";
}


// (I think the closure way to get private stuff is more known, but I prefer this one :-p)
// And I guess questions on .prototype, performance, closure and stuff like that could be interesting.

#8.

   1:  5 * 1.015 != 5.075 because of the way floats are stored internally (?+?+mantisse). Its an approximation. Leads to small variations when doing maths. Be really really careful for financial calculations!!5 * 1.015 // 5.074999999999999parseFloat((5 * 1.015).toFixed(3)) // 5.075parseFloat(Math.round((5 * 1.015) * Math.pow(10,3)) / Math.pow(10,3)) // 5.075.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); width: 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

#9.

*Challenge accepted*

   1:  //First draft:

   2:   

   3:  var tab = "The quick brown fox jumps over the lazy dog".split('');

   4:  var out = "";

   5:  for(var i = 0, len = tab.length; i<len; i++)

   6:  {

   7:      out += tab[i] + (i+1);

   8:  }

   9:  out; // WRONG: forgot spaces

  10:   

  11:   

  12:  //Second draft:

  13:   

  14:  var space = " ";

  15:  var tab = "The quick brown fox jumps over the lazy dog".split(space);

  16:  var out = "";

  17:  for(var i = 0, len = tab.length; i<len; i++)

  18:  {

  19:      out += tab[i] + (i+1) + space;

  20:  }

  21:  out; // WRONG: one more space at the end

  22:   

  23:   

  24:  //Third draft:

  25:   

  26:  var tab = "The quick brown fox jumps over the lazy dog".split(" ");

  27:  for(var i = 0, len = tab.length; i<len; i++)

  28:  {

  29:      tab[i] += (i + 1);

  30:  }

  31:  tab.join(" "); // RIGHT, and elegant enough for me
//Fourth draft
var i = 0;
"The quick brown fox jumps over the lazy dog with a spoiler".replace(/ |$/g, function(a) {
  return ++i + a;
});

// Fifth draft
var statement = "The quick brown fox jumps over the lazy dog";
var statement_new = statement.split(' ').map(function(word, index) {
  return word + index;
}).join(' ');

Dammit I forgot the replace method could take a function as second argument.
Hum wondering about perfs… Depending on string length, targetted browsers, …

#10.

-AJAX (XmlHttpRequest)
-Using flash & communication between flash and your javascript & flash remote connection

// And thoses which look terrible to me
-Creating a new element such as ,,
-Changing an iframe src
-AJAX with long polling (for server -> client)
[-page reload / change page location]

#11.

http://www.google.com/search?hl=en&q=%22xhtml%22

#12.

[meh, comment system is really broken on this one ; had to use < and > by myself]

<!– if [ IE < 8 ] –>
<style type="text/css" src="iefail.css" />
<!– [ endif ] –>

 

(i'm sure this is not exactly thoses chars but the idea is here)
(by the way i prefer NOT to use a separate stylesheet, also might be useful in some radical design decision ; and what about server sniffing to provide a different ?)

#13.

(function($)
{
	$.fn.lightBox = function()
	{
		//...
		return this.each(function()
		{
			var $this = $(this);
			$this.css('border', '1px solid red');
			$this.click(function()
			{
				//...
			});   //....
		});	
	}
})(jQuery)

//or Don’t reinvite the mass produced wheel