Template Engine — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/Template Enginemedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

Template Engine

medium25 min

Render Mustache-like placeholders using own-property lookup, dotted paths, and escaped output by default.

Requirements

Export renderTemplate(template, data) as named and default. Substitute {{ name }} and dotted paths such as {{ user.name }}; optional whitespace around a path is allowed.
Path segments contain ASCII letters, digits, underscores, or dollar signs. Resolve only own properties. Missing paths and null/undefined values produce an empty string; otherwise use String(value), preserving 0 and false.
Double braces escape &, <, >, double quotes, and single quotes as &, <, >, ", and '. Triple braces {{{ path }}} explicitly insert unescaped text.
Never traverse __proto__, constructor, or prototype; treat those paths as missing. Do not evaluate expressions, call functions, mutate data, or rescan inserted values as templates.
Unsupported expressions such as {{ a + b }} and malformed empty placeholders remain unchanged. Sections, loops, partials, custom delimiters, and context-specific URL/script escaping are outside scope. Triple-brace content is intended for trusted markup.

Example 1

Input: renderTemplate("Hello {{ user.name }}!", { user: { name: "Ada" } })
Output: "Hello Ada!"

Example 2

Input: renderTemplate("{{ value }} / {{{ value }}}", { value: "<b>Hi</b>" })
Output: "&lt;b&gt;Hi&lt;/b&gt; / <b>Hi</b>"

Implement the exported function in index.js or index.ts. Tests provide fixtures for the required behavior.

What the tests check

References

StringsTemplatingEscaping

Preparing your workspace…