Frontend Developer Interview Questions and Answers (3)
Explain event delegation
http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
http://davidwalsh.name/event-delegate
http://code.tutsplus.com/tutorials/quick-tip-javascript-event-delegation-in-4-minutes--net-8961
Explain how this works in JavaScript
By default, this refers to the global object.
When a function is called as a property on a parent object, this refers to the parent object inside that function.
When a function is called with the new operator, this refers to the newly created object inside that function.
When a function is called using call or apply, this refers to the first argument passed to call or apply. If the first argument is null or not an object, this refers to the global object.
http://unschooled.org/2012/03/understanding-javascript-this/
Explain how prototypal inheritance works
http://javascript.info/tutorial/inheritance
http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html
How do you go about testing your JavaScript?
QUnit, looks interesting. QUnit is the unit testrunner for the jQuery project
Also, FireUnit, a FireBug extension, was recently launched. FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug.
Other: Mocha, Jasmine
http://www.slideshare.net/emwendelin/test-your-javascript
AMD vs. CommonJS?
http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
Explain why the following doesn't work as an IIFE: function foo(){ }();.
What needs to be changed to properly make it an IIFE?
It doesn’t work because brackets after a function declaration doesn’t invoke the function.The function can only be immediately invoked if its an expression.
Similarly the common practice of using IIFE is putting it within brackets.
(function (){console.log("I got executed");})()
The extra brackets just turns the function declaration into an expression and makes it invokable.You can transform your function declaration to an expression by putting it in an operator that expects expression.
https://iamabhik.wordpress.com/tag/why-the-following-doesnt-work-as-an-iife/
What's the difference between a variable that is: null, undefined or undeclared?
How would you go about checking for any of these states?
In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as:
var TestVar;
alert(TestVar); //shows undefined
alert(typeof TestVar); //shows undefined
null is an assignment value. It can be assigned to a variable as a representation of no value:
var TestVar = null;
alert(TestVar); //shows null
alert(typeof TestVar); //shows object
From the preceding examples, it is clear that undefined and null are two distinct types: undefinedis a type itself (undefined) while null is an object.
What is a closure, and how/why would you use one?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
http://howtonode.org/why-use-closure
What's a typical use case for anonymous functions?
Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions.
Anonymous functions are declared using the function operator instead of the function declaration. You can use the function operator to create a new function wherever it’s valid to put an expression. For example you could declare a new function as a parameter to a function call or to assign a property of another object.
If you need to create a function inside an if statement or a loop, always use a function operator. The function declaration will not have the effect that you intended because it will be hoisted to the top of the code (unless you and all the people who will ever use your script are using Firefox because then it will become a function statement). Function declarations that are in if statements or loops will never consistently do what you expect cross browser.
If you are going to declare a function and use it only once and straight away, the function operator syntax is more concise than the function declaration. It is ideal for things like single line JQuery event handlers that toggle some CSS class.
http://helephant.com/2012/07/14/javascript-function-declaration-vs-expression/
http://helephant.com/2008/08/23/javascript-anonymous-functions/
How do you organize your code? (module pattern, classical inheritance?)
What's the difference between host objects and native objects?
Both terms are defined in the ECMAScript specfication:
native object
object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment.
NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program.
Source: http://es5.github.com/#x4.3.6
host object
object supplied by the host environment to complete the execution environment of ECMAScript.
NOTE Any object that is not native is a host object.
Source: http://es5.github.com/#x4.3.8
A few examples:
Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like indexOfand replace, array methods, ...
Host objects (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ...
Difference between: function Person(){}, var person = Person(), and var person = new Person()?
The difference is that functionOne is defined at run-time, whereas functionTwo is defined at parse-time for a script block.
http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname
What's the difference between .call and .apply?
The main difference is that apply lets you invoke the function with arguments as an array; callrequires the parameters be listed explicitly.
Pseudo syntax:
theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)
Sample code:
function theFunction(name, profession) {
alert("My name is " + name + " and I am a " + profession + ".");}theFunction("John", "fireman");theFunction.apply(undefined, ["Susan", "school teacher"]);theFunction.call(undefined, "Claude", "mathematician");
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.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
When do you optimize your code?
https://developers.google.com/speed/articles/optimizing-javascript
When would you use document.write()?
Most generated ads still utilize document.write() although its use is frowned upon
A traditional script tag will block the page while it is loading and executing. A script loaded with document.write will work asynchronously. That's why you see this on ads or analytics, as such scripts don't influence the page content directly.
http://stackoverflow.com/questions/556322/why-use-document-write
What's the difference between feature detection, feature inference, and using the UA string
Feature detection checks a feature for existence, e.g.:
if (window.XMLHttpRequest) {
new XMLHttpRequest();}
Feature inference checks for a feature just like feature detection, but uses another function because it assumes is will also exist, e.g.:
if (document.getElementsByTagName) {
element = document.getElementById(id);}
Checking the UA string is an old practice and should not be used anymore. You keep changing the UA checks and never benefit from newly implemented features, e.g.:
if (navigator.userAgent.indexOf("MSIE 7") > -1){
//do something}
Explain AJAX in as much detail as possible
Ajax (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately. Ajax combines several programming tools including JavaScript, dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets (CSS), the Document Object Model (DOM), and the Microsoft object, XMLHttpRequest.
Ajax allows content on Web pages to update immediately when a user performs an action, unlike an HTTP request, during which users must wait for a whole new page to load. For example, a weather forecasting site could display local conditions on one side of the page without delay after a user types in a zip code.
Explain how JSONP works (and how it's not really AJAX)
http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about
Have you ever used JavaScript templating?
If so, what libraries have you used? (Mustache.js, Handlebars etc.)
Mustache
Underscore
HandlebarsJS
Jade templating
Embedded JS Templates
http://www.creativebloq.com/web-design/templating-engines-9134396
Explain "hoisting".
In Javascript, you can have multiple var-statements in a function. All of these statements act as if they were declared at the top of the function. Hoisting is the act of moving the declarations to the top of the function.
http://www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/
Describe event bubbling.
http://javascript.info/tutorial/bubbling-and-capturing
http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing
What's the difference between an "attribute" and a "property"?
Attributes are defined by HTML. Properties are defined by DOM.
Some HTML attributes have 1:1 mapping onto properties. id is one example of such.
Some do not (e.g. the value attribute specifies the initial value of an input, but the value property specifies the current value).
http://jquery-howto.blogspot.sg/2011/06/html-difference-between-attribute-and.html
Why is extending built in JavaScript objects not a good idea?
When you extend an object, you change its behaviour.
Changing the behaviour of an object that will only be used by your own code is fine. But when you change the behaviour of something that is also used by other code there is a risk you will break that other code.
When it comes adding methods to the object and array classes in javascript, the risk of breaking something is very high, due to how javascript works. Long years of experience have taught me that this kind of stuff causes all kinds of terrible bugs in javascript.
If you need custom behaviour, it is far better to define your own class (perhaps a subclass) instead of changing a native one. That way you will not break anything at all.
The ability to change how a class works without subclassing it is an important feature of any good programming language, but it is one that must be used rarely and with caution.
http://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice
Difference between document load event and document ready event?
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
What is the difference between == and ===?
What's the difference between == and ===: == uses type coercion, so "1" == 1. === doesn't, "1" !== 1. Type coercion uses quite complex rules and can have surprising results (for instance, "" == 0 is true).
=== means value AND type are the same.
Explain the same-origin policy with regards to JavaScript.
The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin.
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Make this work:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
Array.prototype.duplicate = function() {
var len = this.length;
for (var i = 0; i < len; i++) {
this[len + i] = this[i];
}
return this;
}
Array.prototype.duplicate = function () {
var array = this;
return array.concat(array);
};Why is it called a Ternary expression, what does the word "Ternary" indicate?
The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
What is "use strict";? what are the advantages and disadvantages to using it?
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
And:
Strict mode helps out in a couple ways:
It catches some common coding bloopers, throwing exceptions.
It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
It disables features that are confusing or poorly thought out.
Also note you can apply "strict mode" to the whole file... Or you can use it only for a specific function
http://cjihrig.com/blog/javascripts-strict-mode-and-why-you-should-use-it/
