Front-End Engineering Interview Questions and Answers

Q1 : What is a Closure?
A : Closures are expressions, usually functions, which can work with variables set within a certain context. Or, to try and make it easier, inner functions referring to local variables of its outer function create closures.

Q2 : What is Web a Application?
A : A great question to feel out the depth of the applicants knowledge and experience.
A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

Q3 : What are This and That Keywords?
A : This and that are important to variable scope in JavaScript. Here are a few stackoverflow posts on this, that and self.

Q4 : Explain What is Ajax? Write an Ajax Call?
A : AJAX stands for asynchronous JavaScript and XML and allows applications to send and retrieve data to/from a server asynchronously (in the background) without refreshing the page. For example, your new Gmail messages appear and are marked as new even if you have not refreshed the page.

Q5 : What is Variable Scope?
A : JavaScript variables have functional scope.

Q6 : What is the Lazy Loading?
A : 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.

Q7 : What “this” is in Javascript?
A : In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

Q8 : Do you know what is Cors? How does it work?
A : 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.

Q9 : What Event Bubbling is?
A : Event bubbling causes all events in the child nodes to be automatically passed to its parent nodes. The benefit of this method is speed because the code only needs to traverse the DOM tree once.

Q10 : What is Event Delegation?
A : Event delegation allows you to avoid adding event listeners for specific nodes. Instead, you can add a single event listener to a parent element.

Q11 : How to clear a Floated Element?
A : A floated element is taken out of the document flow. To clear it you would need to do a clear:both or try overflow:auto on the containing div.

Q12 : What is the Importance of the Html Doctype?
A : DOCTYPE is an instruction to the web browser about what version of the markup language the page is written. Its written before the HTML Tag. Doctype declaration refers to a Document Type Definition (DTD).

Q13 : What is the difference between Call and Apply?
A : Apply lets you invoke the function with arguments as an array. call requires the parameters to be listed explicitly. Also, check out this stackoverflow answer.

Q14 : How to increase Page Performance?
A :

  • Sprites, compressed images, smaller images;
  • include JavaScript at the bottom of the page;
  • minify or concatenate your CSS and JavaScript; and
  • caching

Q15 : How do Browsers Read Css?
A : From right to left.

 Q16 : What is a Clear?
A : A clear is used when you don’t want an element to wrap around another element, such as a float.

Q17 : How to Optimize The Page Using Front End Code Or Technology?
A : Below is the list of best practices for front-end technology, which helps to optimize page.

  • Improve server response by reducing resource usage per page
    • Combine all external CSS files into one file
    • Combine all external JS files into one file
  • Use responsive design instead of making device based redirects
  • Use asynchronous Javascript and remove block level Javascript
  • Use Minify version of stylesheet and javascript.
  • Optimize Image and use correct format of Image. Use the lazy loading design pattern for large size of images.
  • Use browser side cache with Cache control.
  • Avoid plugins to drive functionality.
  • Configure view port and use CSS best practices.
  • Prioritize visible content.
  • Load style-sheets in header and script in footer.

Q18 : How to use a Function a Class?
A : function functionName(name) {
this.name = name;
}

// Creating an object

var functionName = new functionName(“WTEN”);
console.log(functionName.name); //WTEN

Q19 : What is an Iife?
A : IIFE stands for immediately-invoked function expression; it executes immediately after created by adding a () after the function.

Q20 : What is the difference between Null and Undefined?

A : null is an object with no value. undefined is a type.

typeof null; // “object”

typeof undefined; // “undefined”

Q21 : Explain Why Table-less Layout is very important?
A : There are several reasons why web designers should stop using tables for layouts, and adopt the use of CSS for controlling HTML layouts.

  1. It adheres to current W3C web standards and it improves accessibility of the information to a wider variety of users, using a wide variety of user agents.
  2. There are bandwidth savings as large numbers of semantically meaningless <table>, <tr> and <td> tags are removed from dozens of pages leaving fewer, but more meaningful headings, paragraphs and lists.
  3. Layout instructions are transferred into site-wide CSS stylesheets, which can be downloaded once and cached for reuse while each visitor navigates the site.
  4. If coded well, CSS makes it easy to apply global changes to the layout
  5. Web pages often have less code, and are much thinner when XHTML and CSS are used
  6. Sites may become more maintainable as the whole site can be restyled or re-branded in a single pass merely by altering the mark-up of the specific CSS, affecting every page which relies on that stylesheet.
  7. New HTML content can be added in such a way that consistent layout rules are immediately applied to it by the existing CSS without any further effort.

Q22 : What is an Anonymous Function?
A : Anonymous functions are functions without a name. They are stored in a variable and are automatically invoked (called) using the variable name.

var x = function(a, b) {
console.log(a * b)
}
x(3, 5); // 15

Q23 : Why do we need to use W3c Standard Code?
A : The goals of such standards are to ensure cross-platform compatibility and more compact file sizes. The focus of these standards has been to separate “content” from “formatting” by implementing CSS. It eases maintenance and development.

Q24 : Have you ever used a Css Preprocessor/precompiler? What are the Benefits?
A : CSS preprocessors, such as SASS, have numerous benefits, such as variables and nesting.

Q25 : How Do You Clear A Floated Element?
A : clear:both