When interviewing or hiring front-end developers, there is always a huge gap between expectations, reality, and needs. The interview is really a place to exchange ideas, challenge the way people think, and objectively analyze a given problem. They provide insight into how decisions are made, how passionate a person is about technology and problem solving, and who they might work with in the future.

Here are some of the questions we asked during the interview discussion, hoping that this list will help candidates and candidates set expectations, requirements and realities correctly during the interview.

Basic JavaScript issues

1. Make the following code work:

const a = [1, 2, 3, 4, 5];
// Implement this
a.multiply();
console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]Copy the code

2. The following code returns false to explain why this is the case:

// false
0.2 + 0.1 === 0.3Copy the code

3. What are the different data types in JavaScript?

Tip: There are only two types in JavaScript — primary data type and reference type (object), and there are six main data types.

4. Solve the following asynchronous code problems.

Gets and calculates the average score for each student belonging to a class (let’s say ID 75). Each student may take one or more courses in a year. The following apis can be used to get the required data.

// GET LIST OF ALL THE STUDENTS GET /api/students Response: [{ "id": 1, "name": "John", "classroomId": 75 }] // GET COURSES FOR GIVEN A STUDENT GET /api/courses? filter=studentId eq 1 Response: [{ "id": "history", "studentId": 1 }, { "id": "algebra", "studentId": 1 },] // GET EVALUATION FOR EACH COURSE GET /api/evaluation/history? filter=studentId eq 1 Response: { "id": 200, "score": 50, "totalScore": 100 }Copy the code

Write a function that takes the class ID and you will use this function to calculate the average score for each student in that class. The final output of this function should be a list of students with average scores:

[{" id ": 1," name ":" John ", "business" : 70.5}, {" id ": 3," name ":" Lois ", "business" : 67}.}Copy the code

Write the required functions using ordinary callbacks, Promises, Observables, Generator, or Async-wait. Try to solve this problem using at least 3 different techniques.

5. Simple data binding using JavaScript proxies

Tip: ES Proxy allows you to intercept calls to any object property or method. First, the DOM should be updated every time the underlying bound object changes.

6. Explain JavaScript’s concurrency model

Are you familiar with the concurrency model used in Elixir, Clojure, Java, and other programming languages?

Tips: event loops, task queues, call stacks, heaps, etc.

7. What does the “new” keyword do in JavaScript?

Tip: In JavaScript, new is the operator used to instantiate an object.

Also, notice [[Construct]] and [[Call]].

8. What are the different function call modes in JavaScript? Please explain in detail.

Tip: There are four modes, function call, method call,.call(), and.apply().

9. Introduce some new ECMAScript proposals that will be released soon.

Tip: As in 2018, BigInt, partial functions, pipe operators, etc.

10. What are iterators and iterable in JavaScript? Do you know of any built-in iterators?

11. Why are JavaScript classes considered an anti-pattern?

Are there other uses for JavaScript classes?

12. How do I serialize the following objects into JSON?

What happens if we convert the following object to a JSON string?

const a = {
    key1: Symbol(),
    key2: 10
}
// What will happen?
console.log(JSON.stringify(a));Copy the code

Are you familiar with Typed Arrays? If so, explain their usefulness and how they differ from traditional arrays?

14. Explain how the default parameters work.

What is the correct syntax if we use the default timeout when calling the makeAPIRequest function?

function makeAPIRequest(url, timeout = 2000, headers) {
   // Some code to fetch data
}Copy the code

15. Explain what TCO is — tail-call optimization. Is there a JavaScript engine that supports tail-call optimization?

Hint: As of 2018, no.

Second, JavaScript front-end application design problems

1. Explain one-way data flow and two-way data binding.

Angular 1.x is based on two-way data binding, while React, Vue, Elm and others are based on one-way data flow architectures.

2. Where is the one-way data flow architecture suitable for MVC?

MVC has a long history of about 50 years and has evolved into MVP, MVVM, and MV*. What is the relationship between the two? If MVC is an architectural pattern, what is one-way data flow? Can these models solve the same problem?

3. How is client-side MVC different from server-side or classic MVC?

Tip: Classic MVC is Smalltalk MVC for desktop applications. In Web applications, there are at least two different data MVC cycles.

4. What makes functional programming different from object-oriented or imperative programming?

Tips: Currization, point-free functions, partial function applications, higher-order functions, pure functions, independent side effects, record types (union, algebraic data types), etc.

5. How does functional programming relate to reactive programming in the context of JavaScript and front-end?

Hint: There is no right answer. But roughly speaking, functional programming is about using pure functions for small pieces of code, while reactive programming is about large pieces of code, that is, data flows between modules, linking components written in the style of FP. FRP – Functional reactive programming is a different but related concept.

6. What problems do immutable data structures solve?

Does immutable structure have any performance impact? Which libraries in the JS ecosystem provide immutable data structures? What are the advantages and disadvantages of these libraries?

Tip: Thread safety (do we really need to worry about this?) , side-effect-free functions, better state management, etc.

7. Should large applications use static typing?

  • What’s the difference between TypeScript or Flow and Elm, ReasonML, or PureScript? What are their advantages and disadvantages?
  • What are the main criteria for selecting a particular type of system?
  • What is type inference?
  • What is the difference between statically typed and strongly typed languages? What is the nature of JavaScript in this regard?
  • Do you know of any languages that are weakly typed but statically typed? Do you know of any languages that are dynamically typed but strongly typed?

Tips: Structured versus nominal type systems, type robustness, tool/ecosystem support, correctness over convenience.

8. What are the outstanding module systems in the JavaScript world? Please comment on the ES module system.

List some of the complexities involved in implementing interoperability between different module systems (mainly of interest in ES module and CommonJS interoperability).

9. How will HTTP2 affect JavaScript application packaging?

List some of the basic features that distinguish HTTP2 from its predecessors.

10. How does the Fetch API improve over traditional Ajax?

Are there any downsides or pain points to using the Fetch API? Is there anything Ajax can do that Fetch can’t?

11. Explain pull-based and push-based reaction systems.

Discuss concepts, meanings, uses, etc.

  • Mention inertia and early request in the discussion.
  • Singular and complex numerical dimensions are mentioned in the discussion.
  • Finally, the synchronous and asynchronous nature of value resolution.
  • Provides examples of each combination available in JavaScript.

Tip: An Observable is a lazy, push-based complex value construct with an asynchronous/synchronous scheduler.

12. Talk about some Promise related issues.

Tips: early evaluation, undo mechanism, then() method masquerading as map() and flatMap(), etc.

Third, front-end foundation and theoretical issues

1. What is the purpose of Doctype in HTML?

What happens for each of the following:

  • Doctype does not exist.
  • Use HTML4 Doctype, but HTML pages use HTML5 tags, such as
  • An invalid Doctype was used.

2. What is the difference between DOM and BOM?

Tip: BOM, DOM, ECMAScript, and JavaScript are all different things.

3. How does event handling work in JavaScript?

As shown in the figure below, we have three div elements. Each of them has a click handler associated with it. The handler performs the following tasks:

  • The external div handler prints Hello Outer to the console.
  • The internal div handler prints Hello inner to the console.
  • The innermost div handler prints Hello innerMost to the console.

Write code to assign these handlers so that the following sequence is always printed when the innermost div is clicked.

Hello inner → Hello innermost → Hello outer


Tip: Event capture and event bubbles.

4. What are the different ways to upload files to the server using a single-page application?

Tip: XMLHttpRequest2 (streaming media), FETCH (non-streaming media), File API

5. What is the difference between CSS Re-flow and REpaint?

Which CSS properties cause re-flow and Repaint when they change?

6. What is CSS selector specificity and how does it work?

Css-specific algorithms.

7. How are CSS pixels different from hardware/physical pixels?

Tip: a pixel that is not a pixel is not a pixel — PPK.

What is the sectioning algorithm?

Tip: It is also known as the HTML5 outline algorithm and is very important when building sites with semantic structure.

9. If you have used CSS Flex/CSS grids, why would you use them? What problems do they solve for you?

  • How is % different from FR when using CSS grids?
  • When using CSS Flexbox, sometimes flex-items/children do not consider the width/height of the container. Why is this?
  • Can YOU create a layout using a CSS grid? If so, how?
  • Explain CSS grid and CSS Flexbox terms.
  • How to render the floating element in CSS grid and Flexbox (float: left | right) ?

Tips: columns of equal height, vertical centers, complex grids, etc.

10. When should YOU use CSS animations instead of CSS transitions? What are the selection criteria?

11. If you are reviewing CSS code, what common problems do you look for in your code?

Example: Use magic number, such as width: 67px; , or using EM instead of REM, using media queries before generic code, abusing ids and classes, etc.

12. How to detect touch events through JavaScript?

Do you think detecting device support for touch events is a bad idea? If so, why? Compare touch events with pointer events. When devices support both touch and mouse events, what do you think should be the correct sequence of these events?

13. What are the async and defer properties defined for Script tags used for?

Now that we have HTTP2 and ES modules, are they really useful?



For more exciting content, please click on the top right corner to follow the small house

Harshal Patil, author of InfoQ