Commonly asked JavaScript interview questions

February 7, 2010

1. Difference between window.onload and onDocumentReady?

The onload event does not fire until every last piece of the page is loaded, this includes css and images, which means there’s a huge delay before any code is executed.
That isnt what we want. We just want to wait until the DOM is loaded and is able to be manipulated. onDocumentReady allows the programmer to do that.

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

The == checks for value equality, but === checks for both type and value.

3. What does “1″+2+4 evaluate to? What about 5 + 4 + “3″?

Since 1 is a string, everything is a string, so the result is 124. In the second case, its 93.

4. What is the difference between undefined value and null value?

undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value.
Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.
Unassigned variables are initialized by JavaScript with a default value of undefined. JavaScript never sets a value to null. That must be done programmatically.

5. How do you change the style/class on any element?

document.getElementById(“myText”).style.fontSize = “20″;
-or-
document.getElementById(“myText”).className = “anyclass”;

6. What are Javascript closures?When would you use them?

Two one sentence summaries:

* a closure is the local variables for a function – kept alive after the function has returned, or
* a closure is a stack-frame which is not deallocated when the function returns.

A closure takes place when a function creates an environment that binds local variables to it in such a way that they are kept alive after the function has returned. A closure is a special kind of object that combines two things: a function, and any local variables that were in-scope at the time that the closure was created.

The following code returns a reference to a function:

function sayHello2(name) {
var text = ‘Hello ‘ + name; // local variable
var sayAlert = function() { alert(text); }
return sayAlert;
}

Closures reduce the need to pass state around the application. The inner function has access to the variables in the outer function so there is no need to store the information somewhere that the inner function can get it.

This is important when the inner function will be called after the outer function has exited. The most common example of this is when the inner function is being used to handle an event. In this case you get no control over the arguments that are passed to the function so using a closure to keep track of state can be very convenient.

7. What is unobtrusive javascript? How to add behavior to an element using javascript?

Unobtrusive Javascript refers to the argument that the purpose of markup is to describe a document’s structure, not its programmatic behavior and that combining the two negatively impacts a site’s maintainability. Inline event handlers are harder to use and maintain, when one needs to set several events on a single element or when one is using event delegation.

<input type="text" name="date" />

Say an input field with the name “date” had to be validated at runtime:

document.getElementsByName("date")[0].
                   addEventListener("change", validateDate, false);

function validateDate(){
// Do something when the content of the 'input' element with the name 'date' is changed.
}

Although there are some browser inconsistencies with the above code, so programmers usually go with a javascript library such as JQuery or YUI to attach behavior to an element like above.

8.  What is Javascript namespacing? How and where is it used?

Using global variables in Javascript is evil and a bad practice. That being said, namespacing is used to bundle up all your functionality using a unique name. In JavaScript, a namespace is really just an object that you’ve attached all further methods, properties and objects. It promotes modularity and code reuse in the application.

9.  What datatypes are supported in Javascript?
Number, String, Undefined, null, Boolean

10. What is the difference between innerHTML and append() in JavaScript?

InnerHTML is not standard, and its a String. The DOM is not, and although innerHTML is faster and less verbose, its better to use the DOM methods like appendChild(), firstChild.nodeValue, etc to alter innerHTML content.

About these ads

38 Responses to “Commonly asked JavaScript interview questions”

  1. [...] Commonly asked JavaScript interview questions February 20102 comments 3 [...]

  2. [...] images, which means there’s a huge delay before any code is executed. That isnt what we… [full post] vikasvrao Random Ramblings! interviews 0 0 0 0 0 [...]

  3. juhi said

    Thanks, it’s really good collection

  4. [...] “Commonly asked JavaScript interview questions“ [...]

  5. [...] Commonly asked JavaScript interview questions « Random Ramblings! (tags: javascriptref professionalism resume) [...]

  6. [...] JavaScript Interview QuestionsStack Overflow – Advanced JavaScript Interview QuestionsVikas’ Commonly Asked JavaScript Interview Questions Short URL 0 CommentsNo comments yet.Leave a Reply Click here to cancel [...]

  7. [...] “Commonly asked JavaScript interview questions“ [...]

  8. Prestaul said

    In your answer to #9, shouldn’t you include Array, Object, Date, and RegExp? There may be others I am missing as well…

    • vikasvrao said

      You are right and wrong,
      typeof new Date();
      typeof [];
      typeof new RegExp();

      All return “object”.

      typeof true returns boolean, typeof undefined returns “undefined”.

      Where I am wrong is on the typeof null which is an object.

      • Prestaul said

        You didn’t ask what the possible return values of “typeof” were… You asked which datatypes are available in javascript. If anyone’s answer did not include Object and Array I would not bother asking more questions, and if it didn’t include Date and RegExp then it would be more excusable, but still not correct. Another interesting question would be, “How to you tell if an object is an array?”

      • Ashish said

        you can simply check if object is array or not like:

        arr instanceof Array —-> will return true if arr is an Array.

  9. praveen said

    Very good one dude…please keep post…………..

  10. gary said

    Comic Sans? Are you kidding me?

  11. yazir said

    window.onload(‘Hey’)

  12. rak said

    nice one!

  13. JavaPins said

    Commonly asked JavaScript interview questions « Random Ramblings!…

    Thank you for submitting this cool story – Trackback from JavaPins…

  14. epq said

    Good collection, thanks. Why would you say it is “better” to use the dom methods instead of innerHTML? Been going back and forth on this in previous years, but right now I prefer innerHTML, simply because it’s faster. Especially on mobile afaik.

    • vikasvrao said

      I agree on the convenience of using innerHTML over DOM methods, however, there are situations where problems arise from having event listeners on elements and then “deleting” elements by setting innerHTML to “” and so on. Using innerHTML can be fine if you know what the side-effects might be IMHO.

  15. You have made some good points there. I checked on the net to find out more about the issue and found most people will go along with your views on this web site.

  16. naresh said

    give me latest java script interview questions

  17. enlighten said

    I was asked in an interview what is the challenging Java script function that you have implemented?

  18. RUPESH said

    REALLY GOOD STUFF

  19. pravin kumar said

    really nice…….

  20. [...] http://vikasrao.wordpress.com/2010/02/07/common-javascript-interview-questions/ Like this:LikeBe the first to like this. This entry was posted in Uncategorized. Bookmark the permalink. ← JavaScript interview questions and answers | TechInterviews JavaScript Interview Questions StartupCTO → [...]

  21. Manoj Kalla said

    Very good ..keep it up. . .

  22. Sarath said

    Few more advanced pratical tasks

  23. Use toString.call(object) for identifying object type.

    Let’s say
    var exp = new RegExp();

    if you call toString.call(exp), it will return “[object RegExp]”

    Likewise
    number – [object Number]
    boolean – [object Boolean]
    String – [object String] etc.

  24. Mann said

    Nice Questions

  25. Danuta said

    I am genuinely delighted to read this website posts which contains tons of useful information, thanks for providing such statistics.

  26. sowmya said

    Very nice post.

  27. Govind from khammam said

    Very good collections thank you somuch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 28 other followers

%d bloggers like this: