Backbone Model
Problem statement
Before modern UI libraries like React, Angular, and Vue, Backbone.js was a popular library for building web applications. It provided structure through models, views, collections, and routers.
In this question, implement a subset of Backbone.Model. The model should store attributes and allow listeners to respond when attribute values change.
Constructor
new BackboneModel([initialValues])Creates a model instance with optional initial attribute/value pairs. Attributes and callbacks must be isolated per model instance.
Required APIs
model.get(attribute): returns the value for an attribute.model.set(attribute, value): sets one attribute.model.set(attributes): sets multiple attributes from an object.model.has(attribute): returns true when an attribute exists and its value is notundefined.model.unset(attribute): removes an attribute from the model.model.on(eventName, callback): registers a callback for an event.model.off(eventName, [callback]): removes one callback, or all callbacks for the event if no callback is provided.model.trigger(eventName, ...args): manually triggers an event.
Supported Events
change: called once after one or more attributes change.change:attributeName: called when a specific attribute changes.
Event Behavior
- Only trigger change events when a value actually changes.
- Use
Object.isfor equality soNaNis treated correctly. change:attributeNamereceives(model, newValue, oldValue).changereceives(model, changes), wherechangesis shaped like{ attr: { oldValue, newValue } }.
Requirements & constraints
- Do not use Backbone or external libraries.
- Callbacks must be isolated per model instance.
- Change events should fire only when values actually change.
- Methods that mutate the model should return the model instance for chaining.
Examples
Example 1
Input: const model = new BackboneModel({ name: 'Ada' }); model.get('name');
Output: 'Ada'
Example 2
Input: model.on('change:name', (_, next) => console.log(next)); model.set('name', 'Grace');
Output: logs 'Grace'
How to approach Backbone Model
The strategy an interviewer expects you to reach for.
A Backbone-style model is attributes plus change events — tiny reactive state before React took over. Naive move Publicly mutate a plain object and hope UI polls it. Where it breaks Without events, subscribers never learn about updates. set must support both set(key, val) and set({…}), and only emit when values actually change. The fix Keep attributes plus an events Map. get reads attributes. set writes and triggers change listeners. on/off manage subscriptions. Remember: Attributes are the source of truth; events notify — do not skip the change check. Say this in the interview: I'd store attributes on the model, update them through set, and notify listeners via an internal event map so views can react to changes.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Runnable editor with the hidden test suite
- Progressive hints that unlock as you get stuck
- Senior-level reference solution with a line-by-line walkthrough
Already a member? Log in to open the workspace.