LinkedIn·Software Engineer·Technical Phone Screen·Intermediate

Intermediate

May 2026

Summary

LinkedIn SWE interview where they had me write a custom map function from scratch in vanilla JS and wire it up to the DOM. No frameworks, no libraries, just a script tag and whatever you can remember about how the browser works.

Questions Asked (1)

Using only vanilla JavaScript in a script tag, implement a function similar to Array.prototype.map that works on both arrays and key-value objects, then use it to render one div per transformed item into the DOM with proper classes and attributes, and handle empty input and error states.

Technical Trade-offsAPI & IntegrationsAlgorithms & Data Structures

Author's notes

This is deceptively wide for a single question.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying requirements and edge cases, then implement a polymorphic map function that detects input type and applies the callback appropriately. After mapping, render the results into the DOM using safe element creation, and handle empty inputs and errors gracefully with clear feedback.

Pro tip: Mention that you would use a single implementation with type detection to avoid code duplication, and that you'd write unit tests for edge cases like empty arrays/objects and invalid callbacks to demonstrate production readiness.

1. Clarify requirements and edge cases

Ask about expected input types, callback signature, error handling expectations, and DOM rendering specifics (e.g., container, classes, attributes). Confirm whether the function should return a new array/object or mutate.

2. Design the polymorphic map function

Write a function that checks if input is an array or object, then iterates accordingly, applying the callback with (value, key/index, collection). Ensure it returns a new collection of the same type.

3. Implement DOM rendering

For each transformed item, create a div element, set its class and data attributes, set text content safely, and append to a container. Handle empty input by rendering nothing or a placeholder.

4. Add error handling

Validate input types and callback; throw or display user-friendly errors for invalid inputs. Use try-catch around DOM operations to handle potential failures.

5. Test and discuss trade-offs

Walk through examples (array, object, empty, error) and explain design choices like using a single function vs. separate ones, and performance considerations.

Key Points to Mention

Type detection using Array.isArray() and typeof to differentiate arrays from objects.
Callback signature: (value, key, collection) to mirror native map behavior.
Returning a new collection of the same type (array or object) to maintain immutability.
Safe DOM manipulation: using document.createElement, textContent, and setAttribute to avoid XSS.
Handling empty inputs by either returning empty collection or rendering a placeholder.
Error states: invalid input type, non-function callback, and DOM errors with clear messages.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.