A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 19 commits ahead, 99 commits behind h5bp:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Translations
.editorconfig
CONTRIBUTING.md
LICENSE.md
README.md

README.md

#Front-end Job Interview Questions with my answers

The answers are mine or found. I don't claim to know them perfectly, just that I researched them.

This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.

Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.

Table of Contents

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Testing Questions
  6. Performance Questions
  7. Network Questions
  8. Coding Questions
  9. Fun Questions

Getting Involved

  1. Contributors
  2. How to Contribute
  3. License

General Questions:

  • What did you learn yesterday/this week?
    • I learned that $.data() receives either camelCase or dashed properties.
    • I learned how the CSS engine uses selectors
  • What excites or interests you about coding?
    • The fact that you can build by yourself the solution to other people's problems.
  • What is a recent technical challenge you experienced and how did you solve it?
  • !!! What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?
  • Talk about your preferred development environment.
    • I like the IDEs from JetBrains
  • Which version control systems are you familiar with?
    • Although I worked 4 years with SVN, I prefer git.
  • !!! Can you describe your workflow when you create a web page?
  • If you have 5 different stylesheets, how would you best integrate them into the site?
    • I would most likely use SASS or other CSS compiler and I would import them into one file and I would minify that file.
  • Can you describe the difference between progressive enhancement and graceful degradation?
    • So, graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.
    • Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.
  • How would you optimize a website's assets/resources?
    • As I said two questions up, I would compile all my css into one css file, I would put all my small images into one sprite and I would optimize it for the web, I would minify the js, css.
  • How many resources will a browser download from a given domain at a time?
    • IE7 allowed only two concurrent connections per host. But most browsers today allow more than that. IE8 allows 6 concurrent connections, Chrome allows 6, and Firefox allows 8. So if your web page only has 6 images, for example, then it'd really be pointless to spread your images across multiple subdomains.
    • What are the exceptions?
      • You can use subdomains to increase the concurrency level
  • Name 3 ways to decrease page load (perceived or actual load time).
    • Actual:
      • minify and gzip
      • add images to a sprite
    • Perceived:
      • showing a spinner
      • progressive loading/rendering - the way medium loads its images (small image at first + scale up + blur)
        • I think this is the same as content placeholder - the way facebook loads its post
        • Lazy loading - loading an image when it comes into the browser's viewport.
  • If you jumped on a project and they used tabs and you used spaces, what would you do?
    • I would probably go with the others use
  • !!! Describe how you would create a simple slideshow page.
  • If you could master one technology this year, what would it be?
    • Node
  • Explain the importance of standards and standards bodies.
    • Standards describe how a thing works and should work. This is extremely important because when a developer writes something he expects that thing to run the same in all browsers.
    • Standard bodies are the committees that regulate software and hardware (I think)
  • What is Flash of Unstyled Content? How do you avoid FOUC?
    • When a site appears, for a moment, with text without styling, and after that it applies the styling.
    • The styles should be placed in order that they are needed and it should be avoided applying styles from script
  • Explain what ARIA and screenreaders are, and how to make a website accessible.
    • ARIA - Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities.
    • alt
    • alt
    • Every browser has an accessibility API - interface between browser and screen reader
    • You should make your webpage syntactic, add alt to images.
  • Explain some of the pros and cons for CSS animations versus JavaScript animations.
    • CSS animations are best for some things - hardware accelerated (3d transform and opacity), hover states
    • If you want to create a timeline, pause, revert etc. it's almost impossible to do it in CSS3. You can easily to that with libraries like GASP
    • In CSS3 you can't animate multiple properties at once, and JS solutions allow you to animate any numeric property
    • Compatibility - CSS3 transitions don't work in older browsers and every browser engine handles them differently
  • What does CORS stand for and what issue does it address?
    • Cross Origin Resource Sharing
    • same-origin policy is an important concept in web security because it prevents a malicious script from obtaining sensitive data through the DOM
    • CORS defines a set of headers that allow the browser and server to communicate about which requests are (and are not) allowed.

HTML Questions:

  • What does a doctype do?
    • It's a way to tell the browser what type of document do you use. If it's omitted, browsers tend to guess and you may end up with some issues. It's also used for validating the document according to the mentioned doctype.
    • example <!DOCTYPE html>
  • What's the difference between full standards mode, almost standards mode and quirks mode?
    • As far as I know, at first developers wrote two version of a page: one for IE and another for Netscape. After the introduction of web standards they couldn't enforce those standards because they could brake a lot of pages, so the browsers implemented quirks mode (when a browsers emulates another browsers to support that page), almost standard mode (when browsers emulate only some of the quirks) and full standards (where the page is interpreted as the developer wanted it).
  • What's the difference between HTML and XHTML?
    • In HTML things are way more permissive over the correctness of the writing. Start tags don't necessarily have to end, attributes don't have to have quotes, only <br/>, <img/> and <link/> are permitted as self enclosed.
  • !!! Are there any problems with serving pages as application/xhtml+xml?
  • !!! How do you serve a page with content in multiple languages?
  • !!! What kind of things must you be wary of when design or developing for multilingual sites?
  • What are data- attributes good for?
    • They are good for storing necessary data and at the same time to be valid HTML.
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
    • section, article, video, canvas, audio, new form elements (email, telephone), SVG, web workers
  • Describe the difference between a cookie, sessionStorage and localStorage.
    • localStorage and sessionStorage are relatively new APIs (meaning not all legacy browsers will support them) and are near identical (both in APIs and capabilities) with the sole exception of persistence. sessionStorage (as the name suggests) is only available for the duration of the browser session (and is deleted when the window is closed) - it does however survive page reloads. These can contain JS primitives but not Objects or Arrays
    • cookies have a an expiration date and only store strings
  • !!! Describe the difference between <script>, <script async> and <script defer>.
  • Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? !!! Do you know any exceptions?
    • CSS should load first to avoid FOUC. Also if we add the script tags at the bottom, the user would be able to see the content of the page faster.
  • What is progressive rendering?
    • Progressive rendering is the name given to techniques used to render content for display as quickly as possible.
    • The answer from "Name 3 ways to decrease page load (perceived or actual load time)"
  • Have you used different HTML templating languages before?
    • Yes, I used underscore templates and handlebars templates.

CSS Questions:

  • What is the difference between classes and IDs in CSS?
    • Classes can be applied to more elements.
    • Ids only to one element
    • Id selectors always trump classes selector
  • What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
    • Resetting: Removing all styling from every element - margins, padding, etc. All elements will have the same font-size, same line-height and no spacing.
    • Normalizing: Making elements render consistently across browsers. So all h1s will have the same size across browsers
    • Normalizing - reasons are in the definition
  • Describe Floats and how they work.
    • It’s hard to handle it because it not only affects the element you’re targetting, but also the surroundings: the parent, the siblings, the following elements…
    • The thing is, a float will take an element out of the flow, a bit like position absolute or position fixed but not exactly. I say not exactly because the surrounding elements are mostly aware that the floated element is still there (they will wrap around it), but the parent won’t. The float is directly related to the clear property, which reintroduces the floated element in the flow, by placing a cleared element after the floated one. There are other clear techniques, like putting a float or an overflow visible on the parent, but it only delay the issue. So I usually use a cleared element.
    • A parent with only floated childs will have a height of zero, as if the children weren’t there.
  • Describe z-index and how stacking context is formed.
    • In DOM you have a tree and every element is a leaf/branch. According to their position, they also are more up front or in the back and they receive an index. The z-index property overrides that hierarchy, but it also has to have position: relative.
  • !!! Describe BFC(Block Formatting Context) and how it works.
  • !!! What are the various clearing techniques and which is appropriate for what context?
  • Explain CSS sprites, and how you would implement them on a page or site.
    • CSS sprites are a composite of multiple images. Although you can create sprites manually, I would use grunt (or a similar tool) to automate the process and instead of using coordinates for that image, I would use a unique name.
  • !!! What are your favourite image replacement techniques and which do you use when?
  • How would you approach fixing browser-specific styling issues?
    • I would start with a normalizing css.
  • !!! How do you serve your pages for feature-constrained browsers?
    • !!! What techniques/processes do you use?
  • !!! What are the different ways to visually hide content (and make it available only for screen readers)?
  • Have you ever used a grid system, and if so, what do you prefer?
    • I've used the grid system from Foundation and Bootstrap. I don't have a favourite because they both are very similar, but I worked more with Foundation.
  • Have you used or implemented media queries or mobile specific layouts/CSS?
    • Yes. @media (max-device-width: 480px) {}
  • Are you familiar with styling SVG?
    • No. What I know about SVG is that it a vectorial way to create images and it has XML syntax.
  • How do you optimize your webpages for print?
  • What are some of the "gotchas" for writing efficient CSS?
    • One part of the answer I've given three questions down.
  • What are the advantages/disadvantages of using CSS preprocessors?
    • Describe what you like and dislike about the CSS preprocessors you have used.
      • Preprocessors help you organize your css code better. You can have multiple files and after compilation have only one. Also for writing inside those files it's easier to write because you can add children's properties inside a parent.
      •   /* SCSS */
          .parent {
              color: blue;
        
              .child {
                  color: red;
              }
          }
        
      •   /* CSS */
          .parent {
              color: blue;
          }
          .parent .child {
              color: red;
          }
        
  • !!! How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
    • Let's say we have #test .class-test ul li. The CSS engine will find at first all the li's, then all the ul's that have li, then the elements that have a class-test that have an ul and then the id test that has a class-test. That's why it's more efficient to have a unique selector because the engine will find it much faster.
  • Describe pseudo-elements and discuss what they are used for.
    • ::after, ::before, ::first-letter, ::first-line etc. You will find them sometimes with double colons (::) instead of just one, because this is CSS3 attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.
    • ::after, ::before are used to match a virtual child of the selected elements. It is typically used to add cosmetic content to an element by using the content CSS property.
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
    • Every element on a page is a rectangular. The box model refers to the way that rectangular is formed and how its size is calculated.
    • What gives a div the ability to implement the box model is the css property box-sizing. It can have three values:
      • content-box: the default value. width = content
      • border-box: width = content + padding + border
      • padding-box: width = content + padding
  • What does * { box-sizing: border-box; } do? What are its advantages?
    • I know that it was the default value of IE and the most popular option because it makes it easier to create responsive layouts.
  • List as many values for the display property that you can remember.
    • none, block, inline-block, inline, table, table-cell, flex
  • What's the difference between inline and inline-block?
    • Inline can't have width and height set, but inline-block can.
  • What's the difference between a relative, fixed, absolute and statically positioned element?
    • Static is the default value. The left, top etc. values don't work.
    • The fixed element is positioned fixed regarding to the viewport. Even when the user scrolls the page, the element remains in the same spot.
    • Relative is used if you like the static position but you want it changed a little.
    • Absolute is used to position an element to a specified position according to the closest parent that has the position set to fixed/absolute/relative, or the original container.
  • The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?
    • The CSS priority (or specificity) from down to up:
      • type selector: div, h1, pseudo-elements: :before
      • class selector: .class-example, attribute selector: [type="radio"], pseudo-classes: :hover
      • id selector: #myId
      • inline CSS
      • the !important exception
  • What existing CSS frameworks have you used locally, or in production? !!! How would you change/improve them?
    • Foundation Zurb with SASS.
  • Have you played around with the new CSS Flexbox or Grid specs?
    • No, I just read about it. I know they are useful for responsive design.
  • How is responsive design different from adaptive design?
    • Responsive is when elements are moved and changed according to the screen in real time, and adaptive design is when they change on specific sizes (they snap).
  • !!! Have you ever worked with retina graphics? If so, when and what techniques did you use?
  • !!! Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?
My CSS Questions
  • !!! Types of positions and how they affect the flow of the page

JS Questions:

  • Explain event delegation

    • Event delegation is based on event bubbling. Let's say that you have a div with a span inside. You add an event listener on the div and you click the span. The click event happens on the span and then notifies his parent and bubbles up the event. That is event bubbling. In combination with the target property of the event, you can use event delegation.
    • Event delegation is useful because you can have only one event listener and you can find out if a specific element inside your page was clicked. This is also useful if you add elements dynamically and you can have only one event listener on the parent.
  • Explain how this works in JavaScript !!!complete this answer!!!

    • this is changed based on how a function is called.
    • The this object is bound at runtime based on the context in which a function is executed:
      • when used inside global functions,this is equal to window in nostrict mode and undefined in strict mode.
      • whereas this is equal to the object when called as an object method.
      • as a constructor
      • call and apply
      • bound functions
      • as dom event handler
  • Explain how prototypal inheritance works !!!complete this answer!!!

    • When an object rabbit inherits from another object animal, in JavaScript that means that there is a special property rabbit.__proto__ = animal.

      alt

    • When a rabbit property is accessed, and the interpreter can’t find it in rabbit, it follows the __proto__ link and searches in animal.

    • It's not a good practice to modify the __proto__ property because in Opera (I don't know if it still applies) and IE < 9 you don't have access to this property. It's also good to know that the __proto__ property was implemented by Firefox/Chrome without being standardized first. Instead you should use Object.create

        var animal = { eats: true };
        rabbit = Object.create(animal);
        alert(rabbit.eats); // true
    • Another way to the above:
    var animal = { eats: true };
    
    function Rabbit(name) { 
      this.name = name
    }
    
    Rabbit.prototype = animal;
    
    var rabbit = new Rabbit('John');
    
    alert( rabbit.eats );// true, because rabbit.__proto__ == animal
  • What do you think of AMD vs CommonJS?

    • CommonJS is a project to define a common API and ecosystem for JavaScript. One part of CommonJS is the Module specification. Node.js and RingoJS are server-side JavaScript runtimes, and yes, both of them implement modules based on the CommonJS Module spec.
    • AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously - that means modules are loaded in parallel, as opposed to blocking the execution by waiting for a load to finish.
    • AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment - for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browser.
    • My opinion ... !!!complete this answer!!! (also give code examples)
  • Explain why the following doesn't work as an IIFE: function foo(){ }();.

    • What needs to be changed to properly make it an IIFE?
      • If you don't wrap the function with parentheses, the JS parser will treat it as a function declaration, not a function expression. A function expression can be called immediately, but a function declaration cannot.
      • Function Expression - var test = function() {};
      • Function Declaration - function test() {};
      • To be an IIFE you only have to do (function (){ })(); or (function (){ }())
  • What's the difference between a variable that is: null, undefined or undeclared?

    • How would you go about checking for any of these states?
      • A variable is undeclared if it isn't declared with a var/let/const. console.log(a) => Uncaught ReferenceError: a is not defined
      • It's undefined if it doesn't have a value attributed to it. var a; and if you do console.log(a) => undefined
      • A variable is attributed this value to specifically tell that this variable is empty. var a = null; console.log(a) => null
  • What is a closure, and how/why would you use one?

    • In short, a closure is a way to keep access to variables in a function after that function has returned.
    • Or
    • Closures are functions that have access to variables from anthor function's scope. This is often accomplished by creating a function inside a function.
    • Found a very good explanation here.
    function stillAClosure(anotherLongLivedVariable) {
          var innerFunction = function inner() {
              return anotherLongLivedVariable;
          };
          return innerFunction;
      }
      var closure = stillAClosure("The same string");
      closure(); // returns "The same string"
      closure(); // returns "The same string"
      closure(); // returns "The same string"
      //And here’s even more proof:
      
      var closure1 = stillAClosure("String 1");
      closure1(); // returns "String 1"
      closure1(); // returns "String 1"
      
      var closure2 = stillAClosure("String 2");
      closure2(); // returns "String 2"
      closure2(); // returns "String 2"
      
      // And here's the kicker
      closure1(); // returns "String 1"  
    • A closure is good to keep state in an application, to keep private things private (separation of concern).
  • What's a typical use case for anonymous functions?

    • IIFE
    • event handler
  • How do you organize your code? (module pattern, classical inheritance?)

    • I prefer using babel so I would use classes and inheritance based on ES2015. (Not a complete answer, bring in the design patters used)
  • What's the difference between host objects and native objects?

    • Native objects are those objects supplied by JavaScript. Examples of these are String, Number, Array, Image, Date, Math, etc.
    • Host objects are objects that are supplied to JavaScript by the browser environment. Examples of these are window, document, forms, etc.
  • Difference between: function Person(){}, var person = Person(), and var person = new Person()?

    • The first is a function declaration.
    • The second is a declaration of a variable with an invocation of a function Person and sets the value to its returned value.
    • The third creates a new instance of an object based on the Person function. The variable person in now an object with its prototype having the constructor the declared function.
  • What's the difference between .call and .apply?

    • With both you call a function in a scope (you bind a scope to the function). The difference is when you send parameters. With foo.call(scope, param1, param2) and with foo.apply(scope, [param1, param2])
  • Explain Function.prototype.bind.

    • When bind() is called, it creates a new function that has its this keyword set to the provided value and it can receive also a sequence of arguments.
  • When would you use document.write()?

    • If you write document.write("<h1>JS is awesome!</h1>"); it will replace the entire content of the document with that header.
    • It seems that the only “approved” time to use document.write() is for third party code to be included (such as ads or Google Analytics). Since document.write() is always available (mostly) it is a good choice for third party vendors to use it to add their scripts. They don’t know what environment you're using, if jQuery is or isn’t available, or what your onload events are. And with document.write() they don’t have to.
  • 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 it 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 is short for Asynchronous Javascript + XML. The technique consisted of making server requests for additional data without unloading the page,resulting in a better user experience.
  • What are the advantages and disadvantages of using Ajax?

    • Advantages:
      • Easier navigation inside a application.
      • You don't have to reload the whole page.
      • You can have a only one page with all the interactions on it (SPA) without the need for other pages
    • Disadvantages:
      • If you don't have a way to update your routes (urls), the back and refresh button become useless, also there will be no way to have deep linking.
      • If someone has JS disabled on their browser, your page is not accessible by that user.
  • Explain how JSONP works (and how it's not really Ajax).

    • Say you're on domain example.com, and you want to make a request to domain example.net. To do so, you need to cross domain boundaries, a no-no in most of browserland.

      The one item that bypasses this limitation is <script> tags. When you use a script tag, the domain limitation is ignored, but under normal circumstances, you can't really do anything with the results, the script just gets evaluated.

      Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle.

      For example, say the server expects a parameter called "callback" to enable its JSONP capabilities. Then your request would look like:

      http://www.example.net/sample.aspx?callback=mycallback

      Without JSONP, this might return some basic JavaScript object, like so:

      { foo: 'bar' }

      However, with JSONP, when the server receives the "callback" parameter, it wraps up the result a little differently, returning something like this:

      mycallback({ foo: 'bar' });

      As you can see, it will now invoke the method you specified. So, in your page, you define the callback function:

      mycallback = function(data){
        alert(data.foo);
      };

      And now, when the script is loaded, it'll be evaluated, and your function will be executed. Voila, cross-domain requests!

      It's also worth noting the one major issue with JSONP: you lose a lot of control of the request. For example, there is no "nice" way to get proper failure codes back. As a result, you end up using timers to monitor the request, etc, which is always a bit suspect. The proposition for JSONRequest is a great solution to allowing cross domain scripting, maintaining security, and allowing proper control of the request.

      These days (2015), CORS is the recommended approach vs. JSONRequest. JSONP is still useful for older browser support, but given the security implications, unless you have no choice CORS is the better choice.

  • Have you ever used JavaScript templating?

    • If so, what libraries have you used?
      • Is this the same as "Have you used different HTML templating languages before?"?
  • Explain "hoisting".

    • If you have:
    (function() { 
      alert(myVar); // undefined 
      var myVar = 'local value'; 
    })();
    • it will show undefined because only the var myvar is lifted (hoisted) on top, without the initialization.
  • Describe event bubbling.

    • Event bubbling
    • alt text
    • Event capturing
    • alt text
    • In all browsers, except IE<9, there are two stages of event processing. The event first goes down - that’s called capturing, and then bubbles up. This behavior is standartized in W3C specification. You can use capturing if you do this element.addEventListener(type, handler, phase) where phase can be true or false, where true means that the handler is set to capturing mode.
  • !!! What's the difference between an "attribute" and a "property"?

  • !!! Why is extending built-in JavaScript objects not a good idea?

  • Difference between document load event and document DOMContentLoaded event?

    • The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
  • What is the difference between == and ===?

    • JavaScript has both strict and type-converting equality comparison. For strict equality the objects being compared must have the same type and:
      • Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
      • Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.
      • Two Boolean operands are strictly equal if both are true or both are false.
      • Two objects are strictly equal if they refer to the same Object.
      • Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]
  • 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. It is a critical security mechanism for isolating potentially malicious documents.
    • Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages. The following table gives examples of origin comparisons to the URL http://store.company.com/dir/page.html:
    URL Outcome Reason
    http://store.company.com/dir2/other.html Success
    http://store.company.com/dir/inner/another.html Success
    https://store.company.com/secure.html Failure Different protocol
    http://store.company.com:81/dir/etc.html Failure Different port
    http://news.company.com/dir/other.html Failure Different host
  • Make this work:

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
    function duplicate(arr) {
        return arr.concat(arr);
    }
  • Why is it called a Ternary expression, what does the word "Ternary" indicate?
    • A unary operand accepts one parameter, e.g. -1, where - is the operand, and 1 is the parameter.

      A binary operand accepts two parameters, e.g. 2 + 3, where + is the operand, and 2 and 3 are the parameters.

      So a ternary operand accepts three parameters.

    • In programming the ternary operand we use is a rewrite of an if statement. condition ? true_block : false_block

  • What is "use strict";? what are the advantages and disadvantages to using it?
    • This enables Strict Mode that allows you to place a program or a function in a strict operating context. This prevents certain actions to be taken and throws more exceptions.
    • It catches some common coding bloopers, throwing exceptions. (ex. assigning foo = 'bar'; without first defining foo will throw an exception)
    • 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.
    • More about Strict Mode here.
  • 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 (var i = 1; i < 100; i++) {
            if (i%3 == 0 && i%5 == 0) {
                console.log('fizzbuzz');
            } else if (i%3 == 0) {
                console.log('fizz');
            } else if (i%5 == 0) {
                console.log('buzz');
            }
        }
      
  • Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
    • It’s harder to read the code and reason about it when variables seem to appear out of thin air (but really from the global scope).
    • Anyone can update a global variable from any point in the program at any time (and from any thread if there’s more than one going).
    • General code smell - if you're too lazy to put the variable only where it needs to be then what other corners are you cutting?
    • It’s probable that you'll encounter global variable name clashes. Since there’s only one namespace you're more likely to double up on a variable name.
  • !!! 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?
  • Explain what a single page app is and how to make one SEO-friendly.
    • I consider a SPA a web application that is built on JS MVC frameworks. I don't consider a SPA a infinity scrolling page (pinterest) or a single page theme on wordpress.
    • A problem might be with the router of your web app. If it's not configured to use true urls (using the new HTML5 History API), the robots parsing your site will have trouble interpreting pages with url/#/my/page, because they will consider it to be the same page as before the #.
  • What is the extent of your experience with Promises and/or their polyfills?
    • I didn't use promises much as described in ES2015 (then, catch), but I bumped into the concept while using $.ajax (done, fail, always).
    •   var promise = new Promise((resolve, reject) => {
            if(true) {
              resolve(value);
            } else {
              reject();
            }
        });
      
      Promise.all(iterable); //return a promise that fulfills if all the promises are met
      Promise.race(iterable); //returns a promise that fulfills/rejects if at least one of them fulfills/rejects
      
  • What are the pros and cons of using Promises instead of callbacks?
    • Pros:
      • You get rid of the callback hell
      • alt
    • Cons:
      • You don't need to use a promise if you only have one callback. Callbacks have their place.
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
    • I didn't have the chance to use TypeScript or Elm or other language that compiles into JS, but here is what I heard:
      • You can write your code in more OO/functional way
      • You don't have to worry about ES2015, ES2016 etc, your language doesn't change
      • You don't really know JS and this means that you can't contribute to the JS community
      • You can't use npm packages out of the box, you have to create a wrapper for them
  • What tools and techniques do you use debugging JavaScript code?
    • Chrome developer tools, debugger in code, console.log
  • What language constructions do you use for iterating over object properties and array items?
    • Arrays:
      • for(var i = 0; i < arr.length; i++)
      • arr.forEach((element) => {}); - doesn't support break - use instead arr.every((element) => {})
    • Objects:
      • for(value in object) - iterates over property keys, including inherited ones
      • Object.keys(obj) and then apply one of the above (from arrays)
      • Object.entries(obj) it returns [key, value] pairs. Is an experimental technologies, not yet standardized.
  • Explain the difference between mutable and immutable objects.
    • Answer: A mutable object can have its values and keys changed, where as a immutable object can't be changed whatsoever.
    • What is an example of an immutable object in JavaScript?
      • Strings and numbers are immutable but they're not considered objects. You can obtain an immutable object using Object.freeze().
      •   var o = {a: 1, b:2};
        
          o.a = 3;
          //nothing happens, o remains the same (this will fail silently or by throwing a TypeError (most commonly, but not exclusively, when in strict mode)
      • But the freeze only works one level.
    • What are the pros and cons of immutability?
      • Pros:
        • Immutability and virtual DOM make the React apps to be blazing fast.
        • You don't need to worry about how an object may evolve over time because each time you have a new object.
        • One copy of an object is just as good as another, so you can cache objects or re-use the same object multiple times.
        • This also makes debugging easier because you can see the state of your application in any point in time.
      • Cons:
        • It needs more attention when working with it, because mutability comes to us more naturally
        • Allocating lots and lots of small objects rather than modifying ones you already have can have a performance impact. Usually the complexity of either the allocator or the garbage collector depends on the number of objects on the heap. This would be a valid point if we were to add immutability all over the place.
        • It’s not recommended on small data sets.
    • How can you achieve immutability in your own code?
      • _You can use Immutable.js. If you don't want to use this, you can also use (for Objects) Object.assign({}, obj) or (if not in ES2015) _.extend({}, obj) or $.extend({}, obj)
      • For arrays [].contact(list)
  • Explain the difference between synchronous and asynchronous functions.
    • Synchronous way: It waits for each operation to complete, after that only it executes the next operation.
    • Asynchronous way: It never waits for each operation to complete. The result of each operation will be handled once the result is available.
  • !!! What is event loop?
    • !!! What is the difference between call stack and task queue?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
    • In reality, nothing is actually wrong with using either style, and they both work. However, there is one very basic situation where the shorthand style won't yield the result you're looking for, and the reason is fairly obvious and simple. Only the first one is an actual function declaration, whereas the shorthand method is just a regular variable declaration with an anonymous function assigned to it as its value. Here is the most basic scenario:
    • var foo = 'bar';
      
      alert(foo); // alerts 'bar'
      
      alert(baz); // alerts 'undefined'
      
      var baz = 'thunk';
      
    • More info here
My JS Questions:
  • What is the difference between target and currentTarget in an event?
    • target is the clicked element and currentTarget is the element on which the handler is bound.
  • Why would you use an IIFE?
    • You can easily create a scope.
  • What is eval?
    • It evaluates JS code represented as a string. It returns a string containing the response of the code given or undefined if the response is empty.
    • If you use the eval function indirectly, by invoking it via a reference other than eval, as of ECMAScript 5 it works at global scope rather than local scope; this means, for instance, that function declarations create global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.
    function test() {
      var x = 2, y = 4;
      console.log(eval("x + y"));  // Direct call, uses local scope, result is 6
      var geval = eval;
      console.log(geval("x + y")); // Indirect call, uses global scope, throws ReferenceError because `x` is undefined
    }
  • What are the pitfalls of using eval?
    • If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code.
    • It's also slower because it needs to invoke the JS interpreter. (it needs compilation)
  • !!! What is __proto__ vs prototype?
  • What does the new keyword do?
    • When the code new Foo(...) is executed, the following things happen:
      • A new object is created, inheriting from Foo.prototype.
      • The constructor function Foo is called with the specified arguments, and with this bound to the newly created object. new Foo is equivalent to new Foo(), i.e. if no argument list is specified, Foo is called without arguments.
      • The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)
  • Difference between typeof and instanceOf.
    • Use instanceof for custom types:
    •   var ClassFirst = function () {};
        var ClassSecond = function () {};
        var instance = new ClassFirst();
        typeof instance; // object
        typeof instance == 'ClassFirst'; //false
        instance instanceof Object; //true
        instance instanceof ClassFirst; //true
        instance instanceof ClassSecond; //false 
    • Use typeof for simple built in types:
    •   'example string' instanceof String; // false
        typeof 'example string' == 'string'; //true
        
        'example string' instanceof Object; //false
        typeof 'example string' == 'object'; //false
        
        true instanceof Boolean; // false
        typeof true == 'boolean'; //true
        
        99.99 instanceof Number; // false
        typeof 99.99 == 'number'; //true
        
        function() {} instanceof Function; //true
        typeof function() {} == 'function'; //true
    • Use instanceof for complex built in types:
    •   /regularexpression/ instanceof RegExp; // true
        typeof /regularexpression/; //object
        
        [] instanceof Array; // true
        typeof []; //object
        
        {} instanceof Object; // true
        typeof {}; //object
        
        typeof null; //object
  • How do you create a new class using es5? How do you extend using es5?
    //creation of a class a.k.a. a function
    function Hello(name) {
      this.name = name;
    }
    
    //adding a method to a prototype - there are two advantages: every other class that extends this one
    //will have this method and this method will not be recreated for each instance of the Hello class
    Hello.prototype.hello = function hello() {
      return 'Hello ' + this.name + '!';
    };
    
    //adding a method only to the Hello class. Every other class that extends this one, will not have this method.
    Hello.sayHelloAll = function () {
      return 'Hello everyone!';
    };
    
    //(1) extending the Hello class
    function HelloWorld() {
      Hello.call(this, 'World');
    }
    
    //(2) extending the Hello class. Setting the Hello prototype to the HelloWorld prototype. (setting the prototype chain)
    HelloWorld.prototype = Object.create(Hello.prototype);
    
    //While not strictly necessary, it's there to preserve some useful invariants. Since the assignment to HelloWorld.prototype 
    //kills the existing Hello.prototype.constructor (which was set to HelloWorld when the HelloWorld constructor was created), we restore it.
    HelloWorld.prototype.constructor = HelloWorld;
    
    //(3) using the same method for HelloWorld
    HelloWorld.sayHelloAll = Hello.sayHelloAll;
    
    //Instead of (1), (2) and (3) couldn't you just make the following?????
    var HelloWorld2 = Object.create(Hello, {name: 'World2'});
    
    HelloWorld.prototype.echo = function echo() {
      alert(Hello.prototype.hello.call(this));
    };
    
    var hw = new HelloWorld();
    hw.echo();
    • Detailed explanation here
  • Is string an object in JS?
    • "Everything is an object"... that's one of the big misconceptions that exist all around the language. Not everything is an object, there are what we call primitive values, which are string, number, boolean, null, and undefined. That's true, a string is a primitive value, but you can access all the methods inherited from String.prototype as if it were an object. The property accessor operators (the dot and the bracket notation), temporarily convert the string value to a String object (coercion), for being able to access those methods.
  • !!! What do you know about functional programming? What are the ups and downs?
  • !!! Give examples of some functional programming concepts.
  • !!! What JS design patterns do you know?
    • Singleton:
    • Factory:

Testing Questions:

  • What are some advantages/disadvantages to testing your code?
    • Advantages:
      • If someone changes something in the code, it can be caught at unit testing (refactoring made easy with a safety net)
      • For a new-comer, reading the unit tests could shed light on the written code
    • Disadvantages:
      • It takes time
      • It takes time to maintain the tests if the logic changes
  • What tools would you use to test your code's functionality?
    • I used mocha and chai for asserting and now I'm using Enzyme for testing React components. I also fiddled around with Jest.
  • What is the difference between a unit test and a functional/integration test?
    • A unit test tests the functionality of the code and an integration test test how something works in the bigger picture (sometimes with interaction, databases and it's much more complex)
  • What is the purpose of a code style linting tool?
    • It's good to use a linting tool because it helps you be more constant in your writing and if someone reads your code, the chances that he could understand your code increase.

Performance Questions:

  • !!! What tools would you use to find a performance bug in your code?
  • !!! What are some ways you may improve your website's scrolling performance?
  • !!! Explain the difference between layout, painting and compositing.

Network Questions:

  • !!! Traditionally, why has it been better to serve site assets from multiple domains?
  • !!! Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.
  • !!! What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • !!! Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
    • GET - The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data.
    • HEAD - Same as GET, but transfers the status line and header section only.
    • POST - A POST request is used to send data to the server, for example, customer information, file upload, etc. using HTML forms.
    • PUT - Replaces all current representations of the target resource with the uploaded content.
    • DELETE - Removes all current representations of the target resource given by a URI.
    • CONNECT - Establishes a tunnel to the server identified by a given URI.
    • OPTIONS - Describes the communication options for the target resource.
    • TRACE - Performs a message loop-back test along the path to the target resource.

Coding Questions:

Question: What is the value of foo?

var foo = 10 + '20';

'1020';

Question: How would you make this work?

add(2, 5); // 7
add(2)(5); // 7

var add = function(x) {
    return function(y) { return x + y; };
}

Question: What value is returned from the following statement?

"i'm a lasagna hog".split("").reverse().join("");

"goh angasal a m'i"

Question: What is the value of window.foo?

( window.foo || ( window.foo = "bar" ) );

"bar"

Question: What is the outcome of the two alerts below?

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

"Hello World"

and 

Uncaught ReferenceError: bar is not defined

Question: What is the value of foo.length?

var foo = [];
foo.push(1);
foo.push(2);

2

Question: What is the value of foo.x?

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

//--THIS IS KIND OF TRICKY--//
foo.x == undefined;
//why?
/* Because bar now keeps the reference from the first declaration of foo, that is
  bar == {n: 1}
  Now foo.x is {n: 2}, but then foo is overwritten by {n: 2}. That's why
  foo == {n: 2}
  bar == {n: 1, x: {n: 2}}
 */

Question: What does the following code print?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

'one'
'three'
'two'

/* Although timeout of 0 would mean that it should be run immediatelly, in JS priority have the operations that are on the top level */

Fun Questions:

  • What's a cool project that you've recently worked on?
  • What are some things you like about the developer tools you use?
    • In PHP Storm I like the git, eslint, testing integrations
  • What inspires you in the front-end community?
    • The dynamic of this field can be exhausting and thrilling. The fact that as time goes by, JS reaches new and new frontiers (React Native/Node/Electron) ... makes me think, where will it end?
  • Who inspires you in the front-end community?
    • Eric Elliott - because he combines the love for this field with the love to teach others and improve the human condition
  • Do you have any pet projects? What kind?
    • I have a project that I work on for a humanitarian non-profit. It's built with Laravel, Backbone and SCSS.
  • !!! What's your favorite feature of Internet Explorer?
  • How do you like your coffee?
    • I don't drink coffee :)

Contributors:

This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

It has since received contributions from over 100 developers.