Skip to main content

Coding JavaScript utility functions in front end interviews

We are now part of GreatFrontEnd!

Front End Interview Handbook is now part of GreatFrontEnd! We are working to migrate the content over and you may find the latest version of this page on GreatFrontEnd.

These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focus on practical use cases. However, they can also be questions simply being the same LeetCode problem but you are required to answer in JavaScript.

Almost all existing utility functions you will be asked exist within the JavaScript language or famous third-party libraries like Lodash/Underscore, with the most famous being debounce and throttle. However, Lodash's implementation is extremely over-engineered — reusing a lot of abstract functions and supporting weird and obscure use cases for older browsers; you're not expected to handle such edge cases within an interview setting.

Basic examples

  • Implement Array.prototype functions: map, reduce, filter, sort
  • Implement Promise/Promise-related APIs: Promise, Promise.all, Promise.any
  • Implement Lodash functions: debounce(), throttle(), cloneDeep(), groupBy()
  • Lodash's chunk()/map() with follow up of mapAsync(Promise.all) then mapWithChunksAsync
  • Convert all keys within an object into snake_case/camelCase
  • DOM APIs: document.getElementByClassName(), document.getElementByTagName()
  • Observer pattern

The best way to prepare for JavaScript coding questions is to get your hands dirty by implementing them yourself and writing test cases for them.

Although the focus of such questions is not on algorithms, do pay attention to choice of data structures and the time complexity as well. Don't write a function that runs in O(n2) if it can pretty easily have an O(n) runtime with the use of hash maps.

Candidates are expected to take just around 10-15 minutes for a basic question. If you can tell that you received a basic question, try to finish within the suggested duration and do not intentionally take the entire interview to do one question. In most cases, you are expected to answer another coding question.

Advanced examples

Advanced questions are usually given to more senior candidates and expect around 25-30 minutes to complete or arrive at a minimally working solution.

  • Write a templating engine that does variables substitution and simple conditionals.
  • Implement JSON.stringify().
  • Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline).

Where to practice

Tips

  • Always strive to write pure functions, aka functions which don't rely on state outside of the function and doesn't cause side effects.
  • If you're writing a recursive function, ask whether there's a maximum stack depth limit.
  • Some nested data structures can have recursive references to itself. Do clarify that there are no self-references/cycles within the object/ask if you need to handle them (usually the answer is "No").