10 Advanced JavaScript Interview Questions

Whether you’re looking to prepare for an interview for JavaScript role, you’re an interviewer looking for inspiration or you just want to evaluate your JavaScript knowledge here are 10 advanced topics that a software engineer working with JavaScript should be able to answer. Bear in mind that answers here are kept minimal, there are lots of caveats not mentioned.

When would you use var in your declaration and when you wouldn’t?

Always use var. Not using var for variable declaration will traverse scopes all the way up till the global scope. If variable with that name is not found it will declare it in the global scope. Therefore not using var implicitly declares variable in the global scope (which, let me remind you, is a bad practice).

(function() {
   baz = 5;
   var bar = 10;
})();
 
console.log(baz); // outputs 5
//console.log(bar); // error: bar is not defined

Try it: http://jsfiddle.net/tnajdek/AKxn9/

A common mistake is to not use var in loops (e.g. for(i=0; i<10; i++) when i has not been previously declared) which will pollute the global scope and in some cases might bear unexpected results.

What does the attribute defer/async do when added to the script tag?

The defer attribute will cause browser to execute script after the document has been parsed. This attribute was first implemented in Internet Explorer 4, then added to HTML 4 and more recently HTML 5 spec. You might not have heard of it as it has not been supported by other browsers (Firefox support came in version 3.5 - Gecko 1.9.2). Async is another attribute that can affect how a script is loaded and executed, here is a quote from HTML 5 spec on how this is expected to work:

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Note: A somewhat (but not exactly) similar defer behavior can be achieved by placing your script tags at the end of the body tag and that's what is considered to be modern 'best practice'

What is the difference between == and ===? Which one would you use?

The equality (==) operator will compare for equality after doing necessary type casting, the identity operator (===) doesn't do any conversions. A good practice suggested by Douglas Crockford is to always use strict equality,  couple of examples from Douglas' book JavaScript: The Good Parts

'' == '0'          // false
0 == ''            // true
0 == '0'           // true
 
false == 'false'   // false
false == '0'       // true
 
false == undefined // false
false == null      // false
null == undefined  // true

How would you check if a variable is null/undefined?

//check if bar is null
bar === null
//check if bar is undefined
typeof bar === "undefined"

How do you check if a variable is an object
You can use typeof to determine if variable is an object, however bear in mind that null is actually an object! However null object is 'falsy' thus the following will work:

if(bar && typeof bar === "object") {
    console.log('bar is object and is not null');
}

Discuss  scoping in JavaScript.

JavaScript has lexical scoping based on functions but not blocks. Therefore:

//global scope
(function() {
    //anonymous function scope
    var foo = 1;
    function bar() {
        //bar function scope
        var foo = 2;
    }
    bar();
    console.log(foo); //outputs 1
    if(true) {
        var foo = 3; //redeclares foo
    }
    console.log(foo); //outputs 3
})();

Try it: http://jsfiddle.net/tnajdek/8y3XC/. Note: from within function scope everything in above scope(s) is available (see closures below)

Explain hoisting in JavaScript.

As some might not be familiar with the term 'hoisting' yet have the relevant experience this question could be asked indirectly

In JavaScript function declarations ( function foo() {} ) and variable declarations ( var bar  ) are 'hoisted' i.e. are silently moved to the very top of the scope. Consider the following code:

(function() {
    console.log(bar); //returns 'undefined'
    //console.log(baz) // error: baz is not defined
    foo(); // outputs 'aloha' to the console
 
    //function declaration AND its body is hoisted
    function foo() {
        console.log('aloha');
    }
    //variable declaration is hoisted but value assignment stays here
    var bar = 1;
    baz = 2; //defines baz in global scope
})();

See for yourself: http://jsfiddle.net/tnajdek/FxDrj/

What are closures?

(function() {
    function foo(x) {
        var baz = 3;
        return function (y) {
        console.log(x + y + (++baz));
        }
    }
var moo = foo(2); // moo is now a closure.
moo(1); // 7
moo(1); // 8!
})();

The inner function inside foo will close-over the variables of foo before leaving creating a closure.

Try it: http://jsfiddle.net/tnajdek/Rj6mK/

Explain prototypal/differential inheritance

Conceptually this is very simple: A new object can inherit properties of an old object.

(function() {
    var genericObject = {
        bar : "Hello World",
        get_bar : function() {
            return this.bar;
        }
    };
    var customObject = Object.create(genericObject);
    customObject.bar = "Aloha folks!";
    console.log(customObject.get_bar()); //outputs: "Aloha folks"
    delete customObject.bar;
    console.log(customObject.get_bar()); //fallbacks to the prototype's value, outputs: "Hello World"
})();

While JavaScript has always been a prototype-oriented language, tools to work with prototypes were somewhat missing. Object.create used in the code snipped above has been added in ECMAScript 5 and has not been supported prior to Firefox 4, Chrome 5, IE 9

What is Strict Mode in JavaScript
Strict Mode has been introduced as part of ECMAScript 5 and introduces new, restricted variant of JavaScript which has following aims:

  • Throws errors for actions that are rather silly but previously didn't throw an error
  • Throws errors for potentially unsafe actions
  • Disables functions that are poorly thought out
  • Potentially code in strict mode could run faster by eliminating mistakes that would make it difficult for JavaScript engines to perform optimizations

Strict mode can be enabled for the entire source file or on per function basis by adding a string literal "use strict" on top of the file/function i.e.

function foo(){
  "use strict";
  // ... your code ...
}

For more detailed information about the strict mode consult relevant article on MDN

Extra topics for discussion:

  • What's your favorite browser, framework, JavaScript book
  • How do you approach debugging in JavaScript
  • What do you think of JSLint?
  • Browser detection vs. feature sniffing

Anything I missed? Had a surprising interview question I haven't covered? Let me know in comments below!

If liked my JavaScript interview questions, you might also enjoy reading about JavaScript quirks and JavaScript workflow automation.

Comments

  1. Vijetak says:

    Really nice article. I am deeply touched with the details of each sections.

  2. Joe says:

    This made me poop in my pants.

  3. […] Can you predict the output? You can find some good hints in my article listing common JavaScript interview questions. […]

  4. Krishna Patni says:

    simple and precise. the article content is in sync with the title.

  5. Ironic Penguin says:

    How do you prevent spambot comments using JS?

  6. Sanyam Agrawal says:

    Very important Questions to make your basics right and know where you exactly are with the knowledge of Javascript .

  7. Nitin Kulkarni says:

    Thanks a lot..helped me preparing for interview….some of questions given here were very closed to what i was asked :-)

  8. sAu says:

    different than usual.. nice content.

  9. pb says:

    Excellent stuff… thanks!

  10. LN says:

    For the question on closures, how do you know what value is “y”? It’s not defined anywhere :(

    (function() {
    	function foo(x) {
    		var baz = 3;
    		return function (y) {
    		console.log(x + y + (++baz));
    		}
    	}
    	var moo = foo(2); // moo is now a closure.
    	moo(1); // 7
    	moo(1); // 8!
    })();
    • Tom Najdek says:

      Function foo(x) will return a reference to an anonymous function which takes one argument and alerts result of a mathematical expression. This reference to a function is a closure, or in other words, a function together with referencing environment.

      When I call foo(2), what I get back is a reference to function that takes one argument (y) together with referencing environment (baz = 3 defined on top of the encompassing scope and x = 2 defined as an argument to a function).

      I then assign the above reference to a variable moo. Since moo is a closure (function + referencing environment) I can call it! I’m calling it with a single argument – an integer 1 hence inside that closure’s scope y = 1 (comes from an argument) and x = 2 and (initially) baz = 3 (coming from the referencing environment).

      This is why first call to moo() will alert 7 (x = 2, ++baz = 4, y = 1) and second call alerts 8 (x = 2, ++baz = 5, y=1).

    • Cory Parrish says:

      This is an example of currying.

      What is currying you ask? When you pass a variable into a higher order function that returns a function, the variable passed into the higher order function is now binded to the returned function when used inside of it. This process is currying.

      In the above example, ‘x’ is the “curried” variable, function foo is the higher order function and the anonymous inner function is where the curried variable ‘x’ is binded to.

      Effective javascript is a great read if you want to understand core javascript.

  11. anbu says:

    Hi Sir,

    I have one clarification in above answer mentioned by Tom Najdek that i think x=2 //foo(2).

    please correct me

    Thank you

  12. samiyuru says:

    Great article

  13. Ezz says:

    One of the best articles, I got an advanced knowledge about JavaScript, it is like a guid for who want to learn JavaScript in the right way :)

    Thank you so much

  14. Nikita says:

    Simply Great!!

  15. Gaurav jha says:

    Thanks buddy for publishing this useful things

  16. siddharth shivhare says:

    Hi Tom,

    You have very cleary explained these important topics which are very often asked in interviews nowadays.Thanks a lot for clearing my doubts.one should go through these topics.

Add Comment

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>