Back to Home

JavaScript Interview Questions

July 24, 2015

  1. Explain event delegation

    2. Event delegation is tagetting element may not exist in current DOM and attach the event when they show up. Here is the example. $(this) is the special variable represents the target element.

    #index.html <ol class='dog-group'> </ol> #main.js $(".dog-group").on('click', 'li', function() { $(this).addClass('highlight'); });

    This function will get the element of '.dog-group' and target 'li' and attach the function which addClass 'highlight'.

  2. Explain how 'this' works in JavaScript

    3. 'This' is in general referring to the objects that the function can be called. For instance within a function this.name = name; means whatever instance of the object's name will be called. In summary, 'this' in general refer something left side of dog notation. If not, it is usually refer 'window'. Because everything ouside of the scoup of the function belongs to 'window'

  3. Explain how prototype inheritance works

    4. In object oriented concept, prototype will inherite whatever right side of prototype notation to be inherited to left side of the object. prototype can also inherite constructor function so that left side of the object can be a constructor for other objects with 'new' keyword.

  4. What do you think of AMD vs CommonJS?

  5. Explain why the following doesn't work as an IIFE: function foo(){ }();.

    6. First, to invoke the function we need to wrap the whole function within '()'. so (foo(){})(); this could invoke the function immediately.

  6. What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

    7. variable = null; is intentionally to make the value as a null. variable = undefined is something is declared but not assigned. For instance,

    var Foo = function(sound) { var its_sound = sound; } bar = new Foo('bowwow!'); bar.its_sound //undefined

    Because it is simply undefined because the scope of var its_sound is only valid inside of Foo function.

  7. What is a closure, and how/why would you use one?

    8. To simply put, a closure is the function that returns other function to reveal variables inside of the function. The reason this is important is that we can call the function later (or as a matter of fact) whenever we want.

    var foo = function() { var bar = 'my friend'; return function() { console.log("im inside of a closure, " + bar); } }; var newfn = foo(); newfn(); //im inside of a closure, my friend

    For this case, the returned function will access variable 'bar' and print out.

  8. What's a typical use case for anonymous functions?

    9. Anoymous function is useful when it is asigned to other varialbes. This is called Anonymous Function Expression. Look at this example.

    var addNumber = function(num1, num2) { result = num1 + num2; return result; };

    When we call addNumber(4,5), addNumber variable is invoking anonymous function to add two parameters.

  9. How do you organize your code? (module pattern, classical inheritance?)

  10. What's the difference between host objects and native objects?

  11. Difference between: function Person(){}, var person = Person(), and var person = new Person()?

    12. function Person(){} is a constructor function so that can be instanciate other Person type object. var person = new Person() is exactly how to do it. person is going to inherite all of traits from Person constructor.

  12. What's the difference between .call and .apply?

    13. .call will call the function with arguments that are passing. The difference between .call and .apply is that apply will take array as an arguments.

  13. Explain Function.prototype.bind.

  14. When would you use document.write()?

  15. What's the difference between feature detection, feature inference, and using the UA string?

  16. Explain AJAX in as much detail as possible.

  17. Explain how JSONP works (and how it's not really AJAX).

    18. JSONP is 'JSON with padding'. It's the hacky way of calling XMLHTTPRequest without violating SOP(Same Origin Policy). SOP prevent any unknown server calling API request so JSONP with callback function is pretending the request calls are from a server.

    Better Interpretation: JSONP is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy(SOP).

  18. Have you ever used JavaScript templating?

  19. If so, what libraries have you used?

  20. Explain "hoisting".

    21. If function is created with the'var' keyward, it will be hosisted to the top of the function so it can be called wherever in the script.

    function foo() { var message = 'hello'; console.log(message); (function bar() { console.log(message); })(); }; foo(); //hello hello *****compare with this***** function foo() { var message = 'hello'; console.log(message); (function bar() { console.log(message); var message = 'hi there!'; })(); }; foo(); //hello undefined

    This is caused by hoisting. var message; is hoisted but the expression is not so it resulted in undefined.

  21. Describe event bubbling.

    22. When there is series of targets selected for the event, it triggers for all the elements. For instance,

    <ol class='articles'> <li>article1</li> <li>article2</li> <li>article3</li> </ol> #main.js $(".articles").click(function() { **This will invoke functions for every li elements }); ***compare with this*** $(".articles").on('click', 'li', function() { $(this).addClass('highlight'); });
  22. What's the difference between an "attribute" and a "property"?

  23. Why is extending built-in JavaScript objects not a good idea?

  24. Difference between document load event and document ready event?

  25. What is the difference between == and ===?

    26. In short, unless you know exactly what you are doing, you should never use'=='. '===' which is strick equal sign confirms that the two objects in right and left sides are same in every way like type and value. In performance wise, to determine two objects are '==', a machine have to go through significant process to try to match up two objects. The example of how dangerous to use '==' is '1' == 1 returns 'true'

  26. Explain the same-origin policy with regards to JavaScript.

  27. Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
    28. var duplicator = function(args) { var newarr = []; for (var i=0; i"<"args.length; i++) { newarr.push(args[i]) } for (var i=0; i"<"args.length; i++) { newarr.push(args[i]) } return newarr; }; ***or*** function duplicator(input) { return input + "," + input };
  28. Why is it called a Ternary expression, what does the word "Ternary" indicate?

  29. What is "use strict";? what are the advantages and disadvantages to using it?

  30. Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
    31. for (var i=1; i<101; i++) { if (i % 3 ===0 && i % 5 === 0) { console.log('fizzbuzz'); } else if (i % 3 ===0) { console.log('buzz'); } else if (i % 5 === 0) { console.log('fizz'); } else { console.log(i); } };
  31. Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

    32. Probably because global scope can be used literally globally, you will never know where it is ended up.

  32. Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?

  33. Explain what a single page app is and how to make one SEO-friendly.

  34. What is the extent of your experience with Promises and/or their polyfills?

  35. What are the pros and cons of using Promises instead of callbacks?

  36. What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

  37. What tools and techniques do you use debugging JavaScript code?
  38. What language constructions do you use for iterating over object properties and array items?

  39. Explain the difference between mutable and immutable objects.

  40. What is an example of an immutable object in JavaScript?

  41. What are the pros and cons of immutability?

  42. How can you achieve immutability in your own code?