There is a lot of noise in the air

Translator: UC International R&D Jothy



Write in the front: welcome to the “UC International technology” public number, we will provide you with client, server, algorithm, test, data, front-end and other related high-quality technical articles, not limited to original and translation.


With the advent of the JavaScript ES2015 specification, everything changed. The specification is big — the new JavaScript language is getting a new lease of life with native support for Modules and growing functional programming. And continue to launch ES2016, ES2017 every year…

However, when it comes to interview or hiring front-end development, there is a huge gap between expectations, reality and needs. As Laurie Voss says in this NPM video:

97% of the code in Web apps today comes from NPM.
Video address: https://www.youtube.com/watch?time_continue=238&v=Qa4dxW-Qi2s

Are we actually writing code or are we just stacking up code like Legos?



At the end of 2018, the majority of candidates who were asked about AJAX still said they were using jQuery. Here are some typical examples of this gap:



CSS Grid and Flexbox are already widely supported. However, at the time of the interview, I was still discussing how to use float in CSS to achieve multi-column layout and center block-level elements within a row.



Module Bundler is a specification designed for large-scale applications. When it comes to architecture, however, we’re talking about minification and concatenation. How many times did we actually discuss Webpack during the interview?



If 97% of the code comes from NPM, but the focus of the interview is on sorting arrays or iterating objects. What’s more, you’re still interested in finding the value of Typeof null. Why not take a more rational approach to choosing the right library, framework, or tool?



We still give candidates a classic inheritance on top of the prototype, but not to validate the need for such false ideas. We have more method patterns. Of course, JavaScript classes and the introduction of new private and static properties are also worth discussing. This can help us better understand what the interviewer is thinking, thinking about key decisions and so on.



Discussion of caching is still limited to Cache Control Headers and CDN. Technologies like IndexDB, HTTP/2, or Service Workers are just passers-by.



There are a lot of interviewees, but there is a big gap between the interview assessment and the actual needs of the job. On the one hand, we have made great strides in front end technology, but on the other hand, our large community has not yet embraced these new technologies. A broken neighborhood is never a good sign. This is a path to disaster. The gap always gives rise to something new, something powerful enough to destroy everything we have created so far. I can’t imagine Java developers using GWT to write another Facebook.



Interviews are a great way to catalyze change and pool talent. As an interviewer, if you treat an interview as just an “interview,” you will only inflate yourself and get nowhere.



For an interview to be successful, it must be discussed. It must be a place for the exchange of ideas. It should cause people to think and analyze the given problem objectively. It has to help us understand how people make decisions. It has to help us understand a person’s passion for technology and problem solving. It means getting to know potential future colleagues. All those puzzles, tricks or Typeof null are not really interviews.


Here are some of the questions we ask during our interview discussions. We hope it will help interviewers and interviewees see expectations, needs and realities accurately.



We have to think of ourselves as the interviewer first.




Basic JavaScript issues

1. Make the following code work properly:



The following code returns’ false ‘in JavaScript. Please explain why:





What are the different data types in JavaScript?

Tip: There are only two types – the primary data type and the reference type (object). There are six main types.


4. Solve the following asynchronous code problems.

Retrieves and calculates the average score for each student belonging to the same classroom, in this example classroom ID 75. Each student may take one or more courses in a year. The following APIS can be used to retrieve the required data.





Write a function that takes a classroom ID and calculates the average value for each student in that classroom based on that function. The final output of this function should be a list of students with average scores: 

[{"id": 1, "name": "John"."average": 70.5}, {"id": 3."name": "Lois"."average": 67}}Copy the code
Write the required functions using plain callbacks, promises, observables, generators, or async-wait. Try to solve this problem using at least three different techniques.



5. Simple data binding using JavaScript Proxy

Tip: ES Proxy allows you to intercept calls to any object property or method. First, the DOM should be updated whenever the underlying binding object is changed.



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

Tips: Event loop, task queue, call stack, heap, etc.



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

Tip: In JavaScript, new is the operator used to instantiate an object. The goal here is to look at breadth of knowledge and memory.

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



What are the different function call patterns in JavaScript? Explain in detail. Tip: There are four patterns, function call, method call,.call(), and.apply().



9. Explain any new ECMAScript proposals that will be released soon.

BigInt, partial function, Pipeline operator, etc.



10. What are iterators and iterables in JavaScript? Do you know what a built-in iterator is?



How to serialize the following objects in JSON?

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







12. Are you familiar with Typed Arrays? If so, how do they compare to traditional arrays in JavaScript?



13. How do default parameters work?

If we must use the default value of timeout when calling the makeAPIRequest function, what is the correct syntax?





Explain tco-tail Call Optimization. Is there a JavaScript engine that supports tail-call optimization?

Hint: As of 2018, no.





JavaScript front-end application design issues



1. Explain unidirectional data flow and bidirectional data binding.

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



2. In what ways is the unidirectional 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 correlation between the two? If MVC is an architectural pattern, what is a one-way data flow? Do these competing models solve the same problem?



3. What is the difference between client-side MVC and 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.



What are the key factors that make functional programming different from object-oriented or imperative programming?

Hint: Currying, point-free, Partial function applications, higher-order functions, pure functions, independent side effects, Record (associative, algebraic data types), etc.



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

Hint: There is no right answer. But roughly speaking, functional programming is about small coding, and writing pure functions and responsive programming is big coding, which is the flow of data between modules, connecting components written in THE FP-style. Frp-functional Reactive Programming is a different but related concept.



6. What problems do immutable data structures solve?

Does the 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 it in browser JavaScript?) , side-effect free functions, better state management, etc.



Should large applications use static typing?

How do YOU compare TypeScript/Flow with JS translation languages like Elm/ReasonML/PureScript? What are the pros and cons of these approaches?



What should be the main criteria for choosing a particular type of system?



What is type inference?



What’s the difference between a statically typed language and a strongly typed language? What is the nature of JavaScript in this regard?



Are there weakly typed but statically typed languages that you know of? Are there any dynamically typed but strongly typed languages that you know of? One or two examples.



Tip: Structural and Nominal type systems, type robustness, tool/ecosystem support, correctness over convenience.



8. What module systems stand out in JavaScript? Evaluate the ES module system.

Lists some of the complexities involved in implementing interoperability between different module systems (mainly interested in ES module and CommonJS interoperability)



9. How will HTTP/2 affect JavaScript application packaging?

List the basic differences between HTTP/2 and its predecessor.



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

What are the drawbacks/difficulties of using the Fetch API?

What can Ajax do that FETCH can’t?



11. Discuss issues related to promises.

Tip: Early evaluation, awkward cancellation mechanism, camouflage map() and flatMap() with then() methods, etc.





Front-end basic and theoretical issues



What is the purpose of a Doctype in HTML?

Specifically, what happens in each of the following situations:



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


What’s the difference between DOM and BOM?

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



How does event handling in JavaScript work?

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



  • The Outer div click handler prints hello Outer to the console.
  • The Inner div Click handler prints the Hello Inner to the console.
  • The Innermost div Click handler prints hello Innermost to the console.


Write code to assign these tasks so that the following sequence is always printed when you click on the innermost div?



→ hello innermost → hello outer





Event bubble and capture

Tip: Event capture and event bubble



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

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



5. What’s the difference between CSS rearranges and redraws?

Which CSS properties cause rearrangements and redraws?



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



7. How is pixel in CSS different from pixel in hardware/physics?

Tip: A pixel is not a pixel is not a pixel-ppk.



What is the sectioning algorithm?

Tip: It’s also known as the HTML5 outline algorithm. This is especially important when building websites with semantic structure.



9. If you have used CSS Flex/CSS Grid, why do you use it? What problem did it solve for you?



Using CSS Grid, what is the difference between % and FR units?

With CSS Flexbox, sometimes flex-items/children don’t care about the width/height of the Flex container setting? Why is that?

Can I create a navigation layout using CSS Grid? If so, how?

Explain CSS Grid and CSS Flexbox terms?

The floating element (float: left | right;) How to render in CSS Grid and FleXbox?



Tips: Contour columns, vertical centers, complex grids, etc.



10. When should you use CSS animations instead of CSS Transitions? What criteria did you use to make that decision?



11. If you are reviewing CSS code, what problems do you often encounter in your code?

Example: Use magic numbers such as width: 67px; Or use em instead of REM, write media queries before generic code, abuse ids and classes, etc.



12. How to detect touch events in JavaScript?

Do you think the detection device will support touch events? If so, why? Compare touch events to click events.

When devices support both touch and mouse events, what do you think is or should be the correct sequence of events for these events?



13. What is the use of the ‘async’ and ‘defer’ attributes defined for the script tag?

Now that we have HTTP/2 and ES modules, are they really useful?



The list is just a glimpse of an infinite number of points we might discuss in an interview. There are many things, such as Web Components, CORS, Security, Cookies, CSS Transform, Web Assembly, Service Workers, PWA, CSS architecture, etc., that we have not considered. We also did not address the specific issues of frameworks or libraries.



Hope this guide can help the community in the interview friends find their own direction.



English original text:

https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514



UC Technology International is committed to sharing high quality technical articles with you

Welcome to follow our official account and share the article with your friends