Implement map and render to DOM

Q: Implement map and render to DOM

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.

Q: How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

Q: What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during HR Screen rounds at LinkedIn.

Q: What role is this question designed for?

This question is commonly asked for Software Engineer candidates at LinkedIn during technical interviews.

Question

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.

Implement map and render to DOM

Quick Overview

Implement map and render to DOM

Build a Vanilla JS map-like Utility and DOM Renderer

Context

Requirements

Write your answer