Front End Interview Questions

I’ve collected some interview questions for my next job. It’s almost 150+ questions. Wish me have a good luck!

Coding Questions

• Counter

  Build a simple counter which increments whenever a button is clicked.

• Array.prototype.map

  Implement the Array.prototype.map() method.

• Contact Form

  Build a contact form which submits user feedback and contact details to a back end API.

• Holy Grail

  Build the famous holy grail layout consisting of a header, 3 columns, and a footer.

• Curry

  Implement a function which transforms a function which takes multiple arguments into a function that can be repeatedly called with only one argument at a time.

• Debounce

  Implement a function to limit how many times a function can be executed by delaying the execution of the function until after a specified time after its last execution attempt.

• Flatten

  Implement a function that recursively flattens an array into a single level deep.

• Promise.all

  Implement the Promise.all() function that resolves to an array of results if all the input elements are resolved or rejects otherwise.

• Text Search

  Implement a function to highlight text if a searched term appears within it.

• Todo List

  Build a Todo list that lets users add new tasks and delete existing tasks.

• Deep Clone

  Implement a function that performs a deep copy of a value.

• Array.prototype.square

  Implement a custom Array.prototype.square() method which squares the values in an array.

• Get

  Implement a function to safely access deeply-nested properties in JavaScript objects.

• Unique Array

  Implement a function to remove all duplicate values from an array.

• Array.prototype.filter

  Implement the Array.prototype.filter() method.

• Array.prototype.reduce

  Implement the Array.prototype.reduce() method.

• Function.prototype.bind

  Implement the Function.prototype.bind() function that creates a new function with the this keyword set to a provided value.

• jQuery.css

  Implement a jQuery-like function that sets the style of a DOM element.

• Progress Bar

  Build a progress bar component which shows the percentage completion of an operation.

• Promise.race

  Implement the Promise.race() function that resolves or rejects when any of the input elements are resolved or rejected.

• Sum

  Implement a function that sums numbers by accepting a number and allows for repeated calling with more numbers until it is not called with any number.

• Temperature Converter

  Build a temperature converter widget that converts temperate values between Celsius and Fahrenheit.

• Tweet

  Build a component that resembles a Tweet from Twitter.

• Throttle

  Implement a function to control the execution of a function by limiting how many times it can execute over time.

• Camel Case Keys

  Implement a function to convert all the keys in an object to camel case.

• Classnames

  Implement a function which conditionally joins CSS class names together.

• Curry II

  Implement a function which transforms a function which takes multiple arguments into a function that can be repeatedly called with any number of arguments.

• getElementsByTagName

  Implement a function to get all DOM elements which match a tag.

• HTML Serializer

  Implement a function to serialize an object into a HTML string with indentation.

• Identical DOM Trees

  Implement a function to determine if two DOM trees are the same.

• jQuery Class Manipulation

  Implement a set of jQuery-like functions that manipulates classes on a DOM element.

• List Format

  Implement a function that formats a list of items into a single readable string.

• Promise.allSettled

  Implement the Promise.allSettled() function that resolves to an array of outcomes when all the input elements are either resolved or rejected.

• Promise.any

  Implement the Promise.any() function that resolves when any of the input elements are resolved.

• Squash Object

  Implement a function that returns a new object after squashing the input object into a single level of depth.

• Star Rating

  Build a star rating component that shows a row of star icons for users to select the number of filled stars corresponding to the rating.

• Deep Equal

  Implement a function that determines if two values are equal.

• Digital Clock

  Build a 7-segment digital clock which shows the current time.

• getElementsByClassName

  Implement a function to get all DOM elements that contain the specified classes.

• Text Search II

  Implement a function to highlight text if searched terms appear within it.

• Signup Form

  Build a signup form that does validation on user details and submits to a back end API.

• Data Selection

  Implement a function to filter rows of data matching a specified requirement.

• Table of Contents

  Implement a function to construct a table of contents from a HTML document.

• Deep Clone II

  Implement a function that performs a deep copy of a value, but also handles circular references.

• JSON.stringify

  Implement a function that converts a JavaScript value into a JSON string.

Knowledge questions

• 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?

• Describe the difference between a cookie, sessionStorage and localStorage.

• Describe the difference between <script>, <script async> and <script defer>

• What kind of things must you be wary of when designing or developing for multilingual sites?

• How do you serve a page with content in multiple languages?

• Consider HTML5 as an open web platform. What are the building blocks of HTML5?

• What are data- attributes good for?

• What does a DOCTYPE do?

• What is progressive rendering?

• Why you would use a srcset attribute in an image tag?

  Explain the process the browser uses when evaluating the content of this attribute.

• Are you familiar with styling SVG?

• Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

• Can you give an example of an @media property other than screen?

• Describe Block Formatting Context (BFC) and how it works.

• Describe floats and how they work.

• Describe pseudo-elements and discuss what they are used for.

• Describe what you like and dislike about the CSS preprocessors you have used.

• Describe z-index and how stacking context is formed.

• Explain CSS sprites, and how you would implement them on a page or site.

• Explain how a browser determines what elements match a CSS selector.

• Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

• Have you ever used a grid system, and if so, what do you prefer?

• Have you ever worked with retina graphics?

  If so, when and what techniques did you use?

• Have you played around with the new CSS Flexbox or Grid specs?

• Have you used or implemented media queries or mobile-specific layouts/CSS?

• How do you serve your pages for feature-constrained browsers?

  What techniques/processes do you use?

• How is responsive design different from adaptive design?

• How would you approach fixing browser-specific styling issues?

• How would you implement a web design comp that uses non-standard fonts?

• Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?

• What are some of the “gotchas” for writing efficient CSS?

• What are the advantages/disadvantages of using CSS preprocessors?

• What are the different ways to visually hide content (and make it available only for screen readers)?

• What are the various clearing techniques and which is appropriate for what context?

• What does * { box-sizing: border-box; } do?

  What are its advantages?

• What existing CSS frameworks have you used locally, or in production?

  How would you change/improve them?

• What is CSS selector specificity and how does it work?

• What is the CSS display property and can you give a few examples of its use?

• What’s the difference between a relative, fixed, absolute and static-ally positioned element?

• What’s the difference between inline and inline-block?

• What’s the difference between “resetting” and “normalizing” CSS?

  Which would you choose, and why?

• Can you describe the main difference between a .forEach loop and a .map() loop?

  Why you would pick one versus the other?

• Can you give an example for destructuring an object or an array?

• Can you give an example of a curry function and why this syntax offers an advantage?

• Can you offer a use case for the new arrow => function syntax?

  How does this new syntax differ from other functions?

• 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

• Describe event bubbling

• Difference between document load event and document DOMContentLoaded event?

• Difference between: function Person(){}, var person = Person(), and var person = new Person()?

• ES2015 Template Literals offer a lot of flexibility in generating strings, can you give an example?

• Explain Ajax in as much detail as possible.

• Explain event delegation

• Explain Function.prototype.bind

• Explain “hoisting”

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

• Explain how prototypal inheritance works

• Explain how this works in JavaScript

• Explain the difference between mutable and immutable objects

• Explain the difference between synchronous and asynchronous functions

• Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

• Explain the same-origin policy with regards to JavaScript

• Explain what a single page app is and how to make one SEO-friendly

• Explain why the following doesn’t work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE?

• How can you share code between files?

• How do you organize your code?

  Do you use module pattern, classical inheritance, something else?

• What advantage is there for using the arrow syntax for a method in a constructor?

• What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

• What are the advantages and disadvantages of using Ajax?

• What are the benefits of using spread syntax and how is it different from rest syntax?

• What are the differences between ES2015 class and ES5 function constructors?

• What are the differences between variables created using let, var or const?

• What are the pros and cons of using Promises instead of callbacks?

• What do you think of AMD vs CommonJS?

• What is a closure, and how/why would you use one?

• What is event loop?

  What is the difference between call stack and task queue?

• What is the definition of a higher-order function?

• What is the difference between == and ===?

• What is the extent of your experience with Promises and/or their polyfills?

• What is "use strict";?

  What are the advantages and disadvantages to using it?

• What language constructions do you use for iterating over object properties and array items?

• What tools and techniques do you use for debugging JavaScript code?

• What’s a typical use case for anonymous functions?

• What’s the difference between a variable that is: null, undefined or undeclared?

  How would you go about checking for any of these states?"

• What’s the difference between an “attribute” and a “property”?

• What’s the difference between .call and .apply?

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

• What’s the difference between host objects and native objects?

• When would you use document.write()?

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

• Why is it called a Ternary expression, what does the word “Ternary” indicate?

• Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

• 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?

• Why you might want to create static class members?

Last modified on 2022-10-01