JS Questions

1. Explain event delegation, what’s event bubbling/event propagation?

jQuery on DOM event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

The basic idea behind this notation is DOM event bubbling. Say you have a structure like this:

<html>
<body>
<div id="container">
<ul id="list">
<li><span><a href="http://www.google.com">This is a link</a></span></li>
<li><span><a href="http://www2.google.com">This is a link</a></span></li>
<li><span><a href="http://www3.google.com">This is a link</a></span></li>

</ul>

</div>
</body>
</html>

when you click the text area ‘This is a link’, this ‘click’ event will bubble up to the DOM tree:

a -> span -> li -> ul -> div  -> body -> html -> document root.

So if you register a click event handler to the ul element, it will capture the ‘click’ event happened in a link.

// Attach a delegated event handler
$( "#list" ).on( "click"function( event ) {
var elem = $( this );
if ( elem.is( "[href^='http://www1']" ) ) {//match the element
elem.attr( "target", "_blank" );
}
});

Here you click ‘a’ event, the default action is to trigger some link to follow, to prevent this, use  event.preventDefault(). If you want to stop the bubbling process call event.stopPropagation().

2. Explain how prototypal inheritance works

Inheritance and the prototype chain

JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain. Kinda of inheritance.

3. Explain why the following doesn’t work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE? => (function foo(){})();

4. What’s the difference between a variable that is: null, undefined or undeclared?

Null is null value, undefined is for declared variable which has undefined value, undeclared means the variable is not declared before using it.

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

6. What’s a typical use case for anonymous functions? for loop. array.map

7. What’s the difference between host objects and native objects?

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

The previous is to assign the function call result to person. Using new is to create an instance of the Person object.
9. What’s the difference between .call and .apply?

For .call you pass the parameters comma separated (like normal). For .apply you pass the parameters in an array.

10. Explain Function.prototype.bind.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

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

Seldom use.

12. What’s the difference between feature detection, feature inference, and using the UA string?

Browser object navigator.userAgent to detect the browser specific objects is feature detection. Feature inference is to use it as a method to guess some features in the browser.

13. Explain Ajax in as much detail as possible.

XMLHTTPREUEST.

14. What are the advantages and disadvantages of using Ajax?

Not updating the whole page.

15. Explain how JSONP works (and how it’s not really Ajax).

Return JSON data as callback in a Script manner to bypass same-origin policy.

16. Have you ever used JavaScript templating?
If so, what libraries have you used?
Handlerbar.

17. Explain “hoisting”.

E.g. call(); function call() { console.log(‘I am declared after the call, but it is ok.’)}

18. What’s the difference between an “attribute” and a “property”?
HTML tag attributes. and JS object property.

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

May lead bugs if someone else is to use the default function.

20. Difference between document load event and document DOMContentLoaded event?

Load event is fired after all page resources are loaded, DOMContentLoaded event is fired as soon as DOM tree is finished loading.

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

== for equality of values, and === for equality of values and types.

22. Explain the same-origin policy with regards to JavaScript.
JS can only work variables within the same global window environment from the same origin domain.

23. Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

duplicate(arr){ return arr.concat(arr);}

24. Why is it called a Ternary expression, what does the word “Ternary” indicate?

a ? b : c. Ternary means three parameters are present in this operand expression.

25. What is “use strict”;? what are the advantages and disadvantages to using it?

More stricter syntax check to expose bugs earlier.

26. 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

for i: 100: if (i%3 == 0) fizz;  if (i%5 == 0) buzz; if (i%15 == 0) fizzbuzz ;

27. Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

Preserve the global value as it is, and you never know how others will use it. Save for reducing bugs.

28. 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?

Page load event can be used to detect all resources are loaded. Maybe use it to process DOM nodes or to trick CSS.

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

SPA. Use semantics HTML.

30. What is the extent of your experience with Promises and/or their polyfills?
What are the pros and cons of using Promises instead of callbacks?

There are some cross-browsers support issues. Promise can handle asynchronous code more easily or construct good code blocks. more readable.

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

No trial before. Possible Compilation and debug may be hard with a nice or strict syntax.

32. What tools and techniques do you use debugging JavaScript code?

Chrome Dev Tools.

33. What language constructions do you use for iterating over object properties and array items?

for in loop for object properties and for of loop for array items. Or array.forEach for array items.

34. What do you think of AMD vs CommonJS?

35. Explain the difference between mutable and immutable objects.
What is an example of an immutable object in JavaScript?
What are the pros and cons of immutability?
How can you achieve immutability in your own code?

Mutable object can be changed after its creation, which immutable object doesn’t allow the change of itself. In JS, like strings and numbers are immutable. Say a = {x:2, y:203}, you can mutate it like this a.x = 20; If writing a large web app, there is loss of control on data objects in JS, and hence may cause many data inconsistencies or bugs when displaying data in JS.

Build immutable objects need not to change the original objects. Each change will create a new object and preserve the previous object.

Use Object.assign({target}, source) to perform mutation of objects.

35. Explain the difference between synchronous and asynchronous functions.

Synchronous function needs to wait for its execution completion and return the results back. It stops the other code running in a single-thread environment. While asynchronous function fires the execution and continues to run the other code. It returns the result to interrupt the current code execution once completed.

36. What is the difference between call stack and task queue?

Call stack is a data structure to store method calls within a programme, while task queue is to use to store the sequential tasks to run. Each task could be a small programme.

Advertisements

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