--- title: JavaScript Interview Questions (Machine Coding) for Front End Interviews slug: coding/javascript-utility-function sidebar_label: JavaScript coding description: Master JavaScript machine coding for front end interviews. Practice debounce, throttle, Promise.all & essential utilities with real examples. --- :::info Latest version on GreatFrontEnd Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). ::: 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](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript) 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
These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can filter by frameworks, languages, and topics, each question also comes with automated test cases and an official solution authored by ex-FAANG senior engineers. Here are some questions you can start with: - [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Promise.all](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Flatten](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Classnames](https://www.greatfrontend.com/questions/javascript/classnames?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [List Format](https://www.greatfrontend.com/questions/javascript/list-format?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [getElementsByClassName](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free) - [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) ## 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").