Implement map and render to DOM
Overview
This question evaluates a candidate's skills in vanilla JavaScript utility implementation and DOM rendering, covering array and plain-object iteration semantics, higher-order functions, input validation, error handling, and safe text rendering for browser environments.
LinkedIn
Sep 6, 2025, 12:00 AM
Software Engineer
HR Screen
Other / Miscellaneous
0
0
Build a Vanilla JS map-like Utility and DOM Renderer
Context
You are working in a basic browser environment with no frameworks or libraries. Implement a function that behaves like Array.prototype.map but must:
- Not use the built-in map method.
- Work for both arrays and plain key–value objects ("dictionaries").
Then use it to transform a list of objects into a render-friendly shape and render one div per transformed item into the DOM, with appropriate classes/attributes. Handle empty and error states.
Requirements
-
Implement a map-like function that:
- Accepts an input list (array or plain object), a callback, and an optional thisArg.
- For arrays: iterates items (skipping holes) and returns a new array of mapped results.
- For objects: iterates own enumerable keys and returns a new array of mapped results.
- Validates inputs and throws a helpful error if misused.
-
Implement a renderer that:
- Renders one div per transformed item into a container in the DOM.
- Applies classes and any attributes provided by the transformed items.
- Uses safe text rendering (no innerHTML for untrusted data).
- Shows an empty state if there are no items.
- Shows an error state if something goes wrong.
- Use only vanilla JavaScript in a script tag. No frameworks.
Solution
Login required
Show