jQuery 4 (legacy code and migration to DOM APIs) Module 7
Migrating to modern DOM APIs interview questions
Interview questions on migrating to modern DOM APIs: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.
Warm-up questions
Short questions with short answers, each answered in full.
-
Mid
Is the size of jQuery a good reason to remove it?
Answered in the lesson Keep, upgrade or remove jQuery: a decision guide
-
Mid to senior
Why can't removeEventListener() remove a handler that jQuery's .on() added?
Answered in the lesson Running jQuery and native event code side by side
-
Mid to senior
What is a strangler migration, and why use one to remove jQuery?
Answered in the lesson Removing jQuery gradually: a strangler plan
-
Mid
Why is HTML's drag and drop not enough for a sortable list?
Answered in the lesson Replacing jQuery UI widgets with native HTML
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Mid to staff
Your team owns an internal app on its own jQuery 3.7.1, with about 150 jQuery calls in four files and five jQuery UI widgets. A manager asks what removing jQuery would cost compared with upgrading it. How do you answer?
- What it tests
- Estimating from counts with stated assumptions, knowing where the hours of a removal go, and presenting a range with its driver instead of one number nobody can check.
- First step
- Count before estimating: eslint-plugin-no-jquery's all config reports every call a removal rewrites, and its deprecated-4.0 rules report what an upgrade must change. Group the calls by kind, because a $() costs minutes and a widget costs hours.
- Follow-ups
-
- The manager wants one number, not a range. What do you give?
- Which assumption would you check first, and how?
- When would you recommend the removal anyway?
From the lesson Keep, upgrade or remove jQuery: a decision guide
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
After the first step of moving a product filter off jQuery, the server logs show each search arriving twice, and three times after a user reloads the filter panel. Tests pass. How do you find the cause and fix it for good?
- What it tests
- Knowing how jQuery and native listeners are added and removed, why duplicates pile up across setups, and how to make a binding's owner and its removal move together, with a test that counts runs.
- First step
- Count runs per event, not results: log every run of the search with the field's value. Then list who adds and who removes each listener: a jQuery handler that .off() removes, and native listeners that nothing removes, since .off() never sees them and an arrow function is new at every setup.
- Follow-ups
-
- Why did removeEventListener('input', search) change nothing?
- How do you make a reload unable to add a second listener?
- What test keeps the count at one?
From the lesson Running jQuery and native event code side by side
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to staff
A delivery form was rewritten in React, but it still uses the shop's jQuery slot picker. The field shows the chosen slot, yet the form submits an empty slot. Another team's Vue form with the same picker works. Explain and fix it.
- What it tests
- Knowing that frameworks listen natively, that .trigger() dispatches nothing, how React decides a controlled input changed, and how to write a value that React, Vue and native code all hear.
- First step
- Look at how the picker writes: if it calls .val(slot).trigger('change'), no real event reaches either framework. If it already sets input.value and dispatches input, Vue hears it because v-model reads the value on input, while React compares the value with the one its own value property remembered and sees no change.
- Follow-ups
-
- Why does Vue work where React does not?
- What exactly does the fixed picker do, and why both events?
- How would you test it without a browser?
From the lesson Running jQuery and native event code side by side
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Senior to staff
Your team must remove jQuery from a 200-file front end over the next year while shipping features every week. Outline the plan, the metric and the CI rules you would put in place, and how you would know you are done.
- What it tests
- Planning a gradual removal with a metric that only falls, ordering the work by risk, keeping shared pages correct, and defining done beyond a lint count.
- First step
- Measure before planning: run eslint-plugin-no-jquery's all config with ESLint's JSON formatter, count calls per module, and record that as the baseline of a CI gate that fails any commit in which a module's count rises, with new modules starting at zero. The count shows where the work is; the gate stops it growing from day one.
- Follow-ups
-
- In what order would you move the code, and why?
- What rules keep old and new code correct on one page?
- The count reaches zero. Are you done?
From the lesson Removing jQuery gradually: a strangler plan
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
Halfway through a migration, the cart badge stopped updating: adding items changes the cart, the badge keeps its first number, and there is no error. The cart code was moved to native code last week. How do you find and fix it?
- What it tests
- Knowing how jQuery's .data() caches what it reads, finding two owners of one value on a shared page, and fixing it with one owner and a check that would have caught it.
- First step
- Find every reader and writer of the badge's value. If the new cart writes dataset.count while old code reads .data('count'), the old code gets jQuery's stored copy: jQuery reads data-* attributes the first time .data() is called and never again, so the badge keeps the first number.
- Follow-ups
-
- Why is there no error?
- Why not move the cart back to .data() instead?
- What check would have caught it before release?
From the lesson Removing jQuery gradually: a strangler plan
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Mid to senior
A team replaced a jQuery UI confirmation with a dialog element. An accessibility audit now reports that screen readers announce "dialog" with no name, that Escape does nothing, and that the page behind it can still be tabbed to. Their jsdom tests all pass. What went wrong, and how do you fix and test it?
- What it tests
- Knowing what showModal() does and does not do, where a dialog's name comes from, and why jsdom-based tests cannot check a native dialog.
- First step
- Check how the dialog is opened: Escape doing nothing and a page that stays reachable mean show() or the open attribute, not showModal(), which makes the page inert and turns Escape into a close request. Then check the name: jQuery UI built one from its title, and a dialog element needs aria-labelledby on its heading.
- Follow-ups
-
- Why did the jsdom tests not catch any of this?
- Where should the focus go when the dialog opens, and when it closes?
- What would a test in a browser check?
From the lesson Replacing jQuery UI widgets with native HTML
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to staff
A travel booking form uses a jQuery UI datepicker showing dd/mm/yyyy, blocks public holidays, and allows dates from tomorrow to six months ahead. The team wants to drop jQuery UI. Should the field become a date input? Defend your answer.
- What it tests
- Knowing what a date input can express (min, max, step, an ISO value) and what it cannot (a fixed display format, blocked days), and weighing that against removing jQuery UI from the page.
- First step
- Split the requirements: the range from tomorrow to six months ahead maps to min and max, which the server can write each day. Blocking holidays and fixing the display to dd/mm/yyyy do not: the browser chooses the shown format, and a date input has no list of blocked days.
- Follow-ups
-
- Which requirement would you challenge first, and why?
- What changes on the server if the field becomes a date input?
- If you keep a scripted picker, what must it do for keyboard users?
From the lesson Replacing jQuery UI widgets with native HTML
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
All jQuery 4 (legacy code and migration to DOM APIs) interview questions · The jQuery 4 (legacy code and migration to DOM APIs) track