JS

Question 1

What is a constructor in JS?

Answer 1

• Constructors, in fact all functions, automatically get a property named prototype which by default holds an empty object derived from Object.prototype. A constructor function call (invoked with the new keyword) creates and returns new objects linked to the constructor function’s prototype.
• There is also a .constructor property of the function’s prototype object. When the function is called the constructor that produces the function runs some code like this:this. prototype = {constructor = this};
  a. constructor === Foo; // true
• a’s .constructor reference is also delegated up the prototype chain to Foo.prototype. If you create a new object and then replace Foo’s prototype, the newly created object won’t have a ‘.constructor’ property on it by default, so it’s not a reliable reference to the function that produced the object.

Question 2

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

Answer 2

• An Ajax call is an actual HTTP request from your client directly to a server. Because of the same-origin security protection, Ajax calls can only be made to the same server that web page came from.
• JSONP (JSON with Padding) are interesting hack with the script tag that allows cross-origin communication. You load a script tag allows callback=xxxx query parameter in it. The script request (via script injection) is sent by the browser to a foreign server. The browser just thinks it’s requesting some JS code. The server then creates some special JS for the purposes of the call, and in that JS that will get executed when it’s returned the server puts the callback function named in the callback=xxxx query parameter.
• Only Ajax can be synchronous.

Question 3

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

Answer 3

Feature detection: directly checking whether a feature is implemented in a browser:

if (typeof Promise === 'undefined') {
  // load polyfils
}

Feature inference: when you assume that if one feature is implemented another feature must be available as well. E.g., if there is a Promise, other ES6 features must be implemented.

User Agent string is natively exposed by the browser via navigator.userAgent. It’s considered a bad practice to use it, though it’s slightly better than using feature inference.

Question 4

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

Answer 4

It’s a code execution mode which trows more errors and disables some of the problematic features of the language:

- Assigning to undeclared variables, which prevents you from polluting the global scope.
- Disallows duplicate keys in objects
- Disallows duplicate arguments in functions
- Makes function's `arguments` immutable.

It prevents you from making some of the most common coding mistakes, makes debugging a bit easier, and it can sometimes make your code run faster.

The disadvantage is that when codes written in strict and unrestricted modes are concatenated bugs may occur.

I always use strict mode but never have to explicitly declare it since ES6 modules (and functions and classes in them) are always run in strict mode.

Question 5

What will be the output of:

for (var i = 0; i < 3; i++) {
  setTimeout(() => alert(i), 1000 + i);
}

Answer 5

Three “3” alerts after 1, 1.1 and 1.2s

To make it output 0, 1 and 2:

for (var i = 0; i < 3; i++) {
  ((i) => { setTimeout(() => alert(i), 1000 + i); })(i);
}