Get full access
NewAdvertise with us ->
Get full access

JavaScript Functions

Implement JavaScript functions like utility methods, polyfills, or DOM APIs.
Code in browser
Solved by ex-interviewers
Test cases

Questions List

JavaScript Coding InterviewsQuestion types to expect, important concepts to know and top practice questions to do
Guide
GUIDES
  • Make CounterImplement a function that accepts an integer value and returns a function that can be repeatedly called to return increasing values
    Languages
  • MeanImplement a function that finds the mean of the values inside an array
    Languages
  • Function.prototype.callImplement the Function.prototype.call() function that calls the function with a given `this` value and provided arguments
    Languages
  • Min ByImplement a function that finds the minimum element based on the specified criteria
    Languages
  • Type UtilitiesImplement utilities to determine primitive variable types in JavaScript
    Languages
  • useBooleanImplement a hook that manages a boolean state, with additional convenience utility methods
    Languages
  • useCounterImplement a hook that manages a counter state, with some additional convenience utility methods
    Languages
  • Array.prototype.reduceImplement the Array.prototype.reduce() method
    Languages
  • CycleImplement a function that takes one or more values and returns a function that cycles through those values each time it is called
    Languages
  • Type Utilities IIImplement utilities to determine non-primitive variable types in JavaScript
    Languages
  • useClickAnywhereImplement a hook that handles click events anywhere on the document
    Languages
  • useCounter IIImplement an optimized version of the useCounter hook
    Languages
  • useCycleImplement a hook that cycles through a sequence of values
    Languages
  • Count ByImplement a function that counts the number of times a value appears in an array based on a function or property name
    Languages
  • CurryImplement a function that transforms a function that takes multiple arguments into a function that can be repeatedly called with only one argument at a time
    Languages
  • DebounceImplement 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
    Languages
  • PromisifyImplement a function that takes a function following the common error-first callback style and returns a version that returns promises
    Languages
  • ThrottleImplement a function to control the execution of a function by limiting how many times it can execute over time
    Languages
  • useArrayImplement a hook that manages an array of items
    Languages
  • useDebounceImplement a hook that debounces a value
    Languages
  • useSetImplement a hook that manages a JavaScript set
    Languages
  • useTimeoutImplement a hook that invokes a callback function after a specified delay
    Languages
  • useWindowSizeImplement a hook that returns the current height and width of the window
    Languages
  • ClassnamesImplement a function that conditionally joins CSS class names together
    Languages
  • Data MergingImplement a function to merge rows of data from the same user
    Languages
  • Event EmitterImplement a class that can subscribe to and emit events that trigger attached callback functions
    Languages
  • FlattenImplement a function that recursively flattens an array into a single level deep
    Languages
  • getElementsByStyleImplement a function to get all DOM elements that are rendered using the specified style
    Languages
  • HTML SerializerImplement a function to serialize an object into an HTML string with indentation
    Languages
  • JSON.stringifyImplement a function that converts a JavaScript value into a JSON string
    Languages
  • List FormatImplement a function that formats a list of items into a single readable string
    Languages
  • MemoizeImplement a function that returns a memoized version of a function which accepts a single argument
    Languages
  • NEW
    MiddlewaresImplement a function that composes asynchronous middleware functions like in Koa.js
    Languages
  • Promise.allImplement the Promise.all() function that resolves to an array of results if all the input elements are resolved or rejects otherwise
    Languages
  • Promise.anyImplement the Promise.any() function that resolves when any of the input elements are resolved
    Languages
  • Squash ObjectImplement a function that returns a new object after squashing the input object into a single level of depth
    Languages
  • useInputControlImplement a hook that manages a controlled input value and tracks its dirty & touched state
    Languages
  • useMediaQueryImplement a hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.)
    Languages
  • useMediatedStateImplement a hook that is similar to useState, but supports a mediation process
    Languages
  • useQueryImplement a hook that manages a promise resolution
    Languages
  • Deep CloneImplement a function that performs a deep copy of a value
    Languages
  • Deep EqualImplement a function that determines if two values are equal
    Languages
  • getElementsByClassNameImplement a function to get all DOM elements that contain the specified classes
    Languages
  • Map Async LimitImplement a function that maps an array of items with an asynchronous mapping function while not exceeding the concurrency limit
    Languages
  • Deep OmitImplement a function that removes specified keys and their corresponding values from an object, including nested objects or arrays
    Languages
  • ClampPremiumImplement a function to clamp a number within the inclusive lower and upper bounds
    Languages
  • Function LengthPremiumImplement a function that returns the number of parameters expected by a function
    Languages
  • Number of ArgumentsPremiumImplement a function that returns the number of arguments it was called with
    Languages
  • SleepPremiumImplement a function that pauses for a specified duration before resuming execution
    Languages
  • Array.prototype.squarePremiumImplement a custom Array.prototype.square() method that squares the values in an array
    Languages
  • Cancellable IntervalPremiumImplement a function that acts like setInterval but returns a function to cancel the interval
    Languages
  • Cancellable TimeoutPremiumImplement a function that acts like setTimeout but returns a function to cancel the pending callback
    Languages
  • ChunkPremiumImplement a function that creates an array of elements split into smaller groups of a specified size
    Languages
  • CompactPremiumImplement a function that creates an array with all falsey values removed
    Languages
  • DifferencePremiumImplement a function that finds the difference in values between arrays
    Languages
  • Drop Right WhilePremiumImplement a function that excludes elements from the end of an array until the predicate returns false
    Languages
  • Drop WhilePremiumImplement a function that excludes elements from the beginning of an array until the predicate returns false
    Languages
  • FillPremiumImplement a function that fills an array with values within specified indices
    Languages
  • Find IndexPremiumImplement a function that returns the index of the first element in the array that satisfies the provided testing function
    Languages
  • Find Last IndexPremiumImplement a function that returns the index of the last element in the array that satisfies the provided testing function
    Languages
  • From PairsPremiumImplement a function that returns an object composed from key-value pairs
    Languages
  • Function.prototype.applyPremiumImplement the Function.prototype.apply() function that calls the function with a given `this` value and arguments as an array
    Languages
  • GetPremiumImplement a function to safely access deeply-nested properties in JavaScript objects
    Languages
  • In RangePremiumImplement a function to check if a number falls between two numbers
    Languages
  • IntersectionPremiumImplement a function that computes the intersection of arrays, returning a new array containing unique values present in all given arrays
    Languages
  • Max ByPremiumImplement a function that finds the maximum element based on the specified criteria
    Languages
  • Object MapPremiumImplement a function to transform values within an object
    Languages
  • OncePremiumImplement a function that accepts a callback and restricts its invocation to at most once
    Languages
  • Promise.rejectPremiumImplement a function to return a Promise object rejected with a reason
    Languages
  • RangePremiumImplement a function that returns a sequence of numbers in ascending order
    Languages
  • Range RightPremiumImplement a function that returns a sequence of numbers in descending order
    Languages
  • SingletonPremiumImplement a Singleton class that ensures a class has only one instance while providing a global point of access to that instance
    Languages
  • Unique ArrayPremiumImplement a function to remove all duplicate values from an array
    Languages
  • Array.prototype.atPremiumImplement the Array.prototype.at() method
    Languages
  • Array.prototype.filterPremiumImplement the Array.prototype.filter() method
    Languages
  • Array.prototype.mapPremiumImplement the Array.prototype.map() method
    Languages
  • ComposePremiumImplement a function that takes multiple functions as arguments and returns a new function that applies those functions in reverse
    Languages
  • Function.prototype.bindPremiumImplement the Function.prototype.bind() function that creates a new function with the `this` keyword set to a provided value
    Languages
  • jQuery.cssPremiumImplement a jQuery-like function that sets the style of a DOM element
    Languages
  • Promise.racePremiumImplement the Promise.race() function that resolves or rejects when any of the input elements are resolved or rejected
    Languages
  • SizePremiumImplement a function that returns the size of collection
    Languages
  • SumPremiumImplement 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
    Languages
  • useBoolean IIPremiumImplement an optimized version of the useBoolean hook
    Languages
  • useDefaultPremiumImplement a hook that returns the default value when state is null or undefined
    Languages
  • useEffectOncePremiumImplement a hook that runs an effect only once
    Languages
  • useFocusPremiumImplement a hook that enables programmatic focusing of an element
    Languages
  • usePreviousPremiumImplement a hook that returns the previous value of a state
    Languages
  • useStateWithResetPremiumImplement a hook that's similar to useState but with an additional reset function that resets the state to its initial value
    Languages
  • useTogglePremiumImplement a hook that manages a boolean toggle state
    Languages
  • Make Counter IIPremiumImplement a function that returns a counter object with methods to retrieve and manipulate the value
    Languages
  • Array.prototype.concatPremiumImplement the Array.prototype.concat() method
    Languages
  • Group ByPremiumImplement a function that groups values in an array based on a function or property name
    Languages
  • Intersection ByPremiumImplement a function that returns an array of unique values that are included in all given arrays based on a provided iteratee function
    Languages
  • Intersection WithPremiumComputes the intersection of arrays using a custom comparator function to determine equality between elements
    Languages
  • Is EmptyPremiumImplement a function to check if a value is an empty object, collection, map, or set
    Languages
  • LimitPremiumImplement a function that accepts a callback and restricts its invocation to at most N times
    Languages
  • Promise MergePremiumImplement a function to merge the results of two promises into a single value
    Languages
  • Promise.resolvePremiumImplement a function to resolve a given value to a Promise
    Languages
  • Promise TimeoutPremiumImplement a function that resolves a promise if it is fulfilled within a timeout period and rejects otherwise
    Languages
  • Promise.withResolversPremiumImplement a function that returns an object containing a new `Promise` object and two functions to resolve or reject it
    Languages
  • Promisify IIPremiumImplement a promisify function that allows the original function to override the return value
    Languages
  • TurtlePremiumImplement a Turtle class that moves a turtle on a 2D plane
    Languages
  • Union ByPremiumImplement a function that creates an array of unique values, in order, from all given arrays.
    Languages
  • useBreakpointPremiumImplement a hook that returns the current breakpoint name based on the current window width
    Languages
  • useClickOutsidePremiumImplement a hook that detects clicks outside of a specified element
    Languages
  • useCountdownPremiumImplement a hook that manages a countdown
    Languages
  • useEventListenerPremiumImplement a hook that subscribes to browser events
    Languages
  • useHoverPremiumImplement a hook that tracks whether an element is being hovered
    Languages
  • useIntervalPremiumImplement a hook that creates an interval that invokes a callback function at a specified delay
    Languages
  • useKeyPressPremiumImplement a hook that subscribes to keyboard events
    Languages
  • useMapPremiumImplement a hook that manages a JavaScript map
    Languages
  • useObjectPremiumImplement a hook that manages an object value
    Languages
  • useStepPremiumImplement a hook that manages a step counter for a multi-step process
    Languages
  • useThrottlePremiumImplement a hook that throttles a value
    Languages
  • Camel Case KeysPremiumImplement a function to convert all the keys in an object to camel case
    Languages
  • Compact IIPremiumImplement a function that returns an object with all falsey values removed
    Languages
  • Conforms ToPremiumImplement a function that checks if object conforms to source
    Languages
  • Curry IIPremiumImplement a function that transforms a function that takes multiple arguments into a function that can be repeatedly called with any number of arguments
    Languages
  • Debounce IIPremiumImplement a debounce function that comes with a cancel method to cancel delayed invocations and a flush method to immediately invoke them
    Languages
  • Event Emitter IIPremiumImplement a class that can subscribe to and emit events that trigger attached callback functions. Subscription objects are returned and can unsubscribe itself
    Languages
  • getElementsByTagNamePremiumImplement a function to get all DOM elements that match a tag
    Languages
  • Identical DOM TreesPremiumImplement a function to determine if two DOM trees are the same
    Languages
  • jQuery Class ManipulationPremiumImplement a set of jQuery-like functions that manipulates classes on a DOM element
    Languages
  • Map AsyncPremiumImplement a function that maps an array of items with an asynchronous mapping function
    Languages
  • Promise.allSettledPremiumImplement the Promise.allSettled() function that resolves to an array of outcomes when all the input elements are either resolved or rejected
    Languages
  • Resumable IntervalPremiumImplement a function that creates a resumable interval object
    Languages
  • Text SearchPremiumImplement a function to highlight text if a searched term appears within it
    Languages
  • useIdlePremiumImplement a hook that detects user inactivity
    Languages
  • Deep MapPremiumImplement a function to recursively transform values
    Languages
  • Text Search IIPremiumImplement a function to highlight text if searched terms appear within it
    Languages
  • Deep MergePremiumImplement a function that merges two objects together
    Languages
  • Memoize IIPremiumImplement a function that returns a memoized version of a function which accepts any number of arguments
    Languages
  • Curry IIIPremiumImplement a function which transforms a function which takes variadic arguments into a function that can be repeatedly called with any number of arguments
    Languages
  • Classnames IIPremiumImplement a function that conditionally joins CSS class names together and also handles de-duplication and function values
    Languages
  • Backbone ModelPremiumImplement a class resembling Backbone.Model which allows storing of attributes/values and responding to changes in specific attribute values
    Languages
  • Data SelectionPremiumImplement a function to filter rows of data matching a specified requirement
    Languages
  • getElementsByTagNameHierarchyPremiumImplement a function to get all DOM elements that match a tag hierarchy
    Languages
  • Table of ContentsPremiumImplement a function to construct a table of contents from an HTML document
    Languages
  • Deep Clone IIPremiumImplement a function that performs a deep copy of a value, but also handles circular references
    Languages
  • JSON.stringify IIPremiumImplement a function that converts a JavaScript value into a JSON string
    Languages

JavaScript coding interview questions for front end interviews

In technical interviews, you may be asked to write utility functions similar to those found in libraries like Lodash/Underscore, create polyfills for JavaScript language features, or manipulate the DOM directly. Mastering these skills is crucial for demonstrating your ability to handle complex coding tasks efficiently and effectively.

Our JavaScript Coding questions are designed to help you develop and refine these essential skills. You'll work on challenges that require you to implement various functions in JavaScript, covering a range of topics from utility functions to polyfills and DOM API manipulation. These questions are aligned with the expectations of modern front end interviews, ensuring that your preparation is both relevant and comprehensive.

Key features

  1. Expertly crafted questions: Each question is carefully developed by experienced engineers who understand the intricacies of front end interviews. These questions reflect the types of tasks you'll encounter in real interviews, such as implementing utility functions, creating polyfills, and manipulating DOM elements.
  2. Wide range of practical challenges: Our question set covers a broad spectrum of topics, from writing efficient utility functions to developing polyfills that extend JavaScript capabilities and handling direct DOM manipulations. These challenges are selected to build your proficiency in key areas of JavaScript development that are frequently tested in interviews.
  3. In-depth solutions in JavaScript: Each question is accompanied by a detailed solution written in JavaScript, providing a clear explanation of the logic and best practices behind the implementation. These solutions help you understand how to approach and solve similar problems in real interview scenarios.
  4. Real-world coding environment: Practice coding directly in your browser with a workspace that mimics the conditions of actual front end coding interviews. Our environment allows you to write and test your JavaScript code in a setting that closely resembles real interview scenarios.
  5. Instant feedback with automated testing: To optimize your learning, we provide automated test cases that give you immediate feedback on your solutions. This real-time evaluation helps you quickly identify and correct errors, ensuring continuous improvement as you prepare for front end development interviews.