Top Front End Programmer Interview Questions & Answers:

1. Explain what is the lazy loading?

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

Lazy loading is loading code only once user needs it. For Example, there is a button on the page, which shows different layout once user pressed it. So there is no need to load code for that layout on initial page load.

2. Explain what is the Difference between null and undefined?

null is an object with no value. undefined is a type.
typeof null; // "object"
typeof undefined; // "undefined"

3. What is variable scope?

JavaScript variables have functional scope.

4. Explain what is an IIFE?

IIFE stands for immediately-invoked function expression; it executes immediately after created by adding a () after the function.

5. What is a callback function?

JavaScript is read line by line. Sometimes, this can result in what seems like a subsequent line of code being executed prior to an earlier line of code. A callback function is used to prevent this from happening, because it is not called until the previous line of code has fully executed.

6. Tell me why do we recommend external CSS or Javascript versus inline?

Inline CSS or Javascript has bad impact on site performance.

Your HTML code will weigh more as you use inline scripts, whereas external scripts reduces HTML file size which helps fast rendering of webpage.

HTML code will never be cached so inline scripts. Contrary to that, external dependencies, such as CSS and JavaScript files, will be cached by the visitor's web browser. So it reduces https requests each time user click through web pages.

It is hard to maintain Inline CSS and Javascript code. Where having code in just one centralized location is a lot more preferable than changing exactly the same kind of code snippets spread all over the files in the web site.

7. Explain what "this" is in JavaScript?

In JavaScript, 'this' normally refers to the object which 'owns' the method, but it depends on how a function is called.

8. Do you know what is CORS? How does it work?

Cross-origin resource sharing (CORS) is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. It's a mechanism supported in HTML5 that manages XMLHttpRequest access to a domain different.

CORS adds new HTTP headers that provide access to permitted origin domains. For HTTP methods other than GET (or POST with certain MIME types), the specification mandates that browsers first use an HTTP OPTIONS request header to solicit a list of supported (and available) methods from the server. The actual request can then be submitted. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.

9. What is the difference between JSON and JSONP?

JSONP is JSON with padding.

10. Tell me how would you call a function directly on a string?

See section on using prototypes to call functions on common data types in JavaScript Objects & Prototypes.