This page needs a newer browser to run its tools. You can still read everything here.

jQuery 4 (legacy code and migration to DOM APIs) Module 5

Upgrading to jQuery 4 interview questions

Interview questions on upgrading to jQuery 4: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.

18 questions: 6 warm-ups and 12 with model answers · Levels: Fresher to staff

Warm-up questions

Short questions with short answers, each answered in full.

Fresher to mid

What is CVE-2020-11023, and which jQuery releases have it?

Answered in the lesson Why upgrade jQuery: CVEs, support and browsers
Fresher to mid

What does npm ls jquery --all tell you before an upgrade?

Answered in the lesson Audit a jQuery codebase before you upgrade
Fresher to mid

Why load the development build of jQuery Migrate while you upgrade?

Answered in the lesson The upgrade path with jQuery Migrate 3 and 4
Fresher to mid

Which methods did jQuery 4 remove from jQuery objects, and what replaces them?

Answered in the lesson APIs removed in jQuery 4 and their replacements
Fresher to mid

Why does require('jquery') throw "jQuery requires a window with a document" in Node.js with jQuery 4, when the same line worked with jQuery 3?

Answered in the lesson jQuery 4 as ES modules: bundlers, Node, TypeScript
Fresher to mid

What does script-src 'self' allow, and what does it refuse?

Answered in the lesson jQuery 4 with strict CSP and Trusted Types

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Mid to senior

A scanner reports CVE-2020-11022 and CVE-2020-11023 on a client's site, which runs jQuery 3.4.1. The client asks whether the site has been hacked and what to do this week. How do you answer?
What it tests

Reading an advisory's range and the path it needs, telling a finding from an incident, and turning both into a short plan the client can follow.

First step

Confirm the finding on the live page: jQuery.fn.jquery says 3.4.1, inside both ranges, which 3.5.0 closed. Then say plainly that a finding means the release has a known flaw, not that anyone has used it, and look for the path: code that passes HTML from other people to .html(), .append() or a similar method.
Follow-ups
- The site sanitises all HTML with a library before .html(). Is it safe?
- The theme's slider breaks on 3.7.1. What do you do?
- How do you show the client that the risk is closed?
From the lesson Why upgrade jQuery: CVEs, support and browsers
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.
Choose a pass I have a 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 staff

Your manager asks for a one-paragraph case for moving a shop from jQuery 1.12.4 to jQuery 4, and asks why the team should not simply stop at 3.7.1. What do you write?
What it tests

Building a case from facts someone else can check, advisories, paths, support and browsers, and weighing 3.7.1 against 4.0.0 honestly.

First step

State what runs and what applies: 1.12.4 has four advisories, among them CVE-2020-11023, which CISA lists as exploited, while 3.7.1 and 4.0.0 have none. Then name what separates the two targets: 3.x gets critical fixes only, 4.x every fix, and 4.x drops Internet Explorer 10 and older.
Follow-ups
- The analytics show 2 % of visitors on Internet Explorer 10. Does your answer change?
- The manager asks for a number of days. What do you give?
- Why not jump straight from 1.12.4 to 4.0.0?
From the lesson Why upgrade jQuery: CVEs, support and browsers
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A client wants a fixed price for moving a 40-page shop with nine jQuery plugins to jQuery 4, by tomorrow. How do you produce a number you can defend, and what do you send tomorrow?
What it tests

Turning an audit into an estimate: what to count, how to state assumptions, where the risk sits, and how to answer a demand for a fixed number honestly.

First step

Group the 40 pages into kinds and run the inventory on one page of each. Count the removed and deprecated calls with ESLint and TypeScript, and list the nine plugins with their status: updated for jQuery 4, pinned below 4.0.0, or a vendor's script with its own copy.
Follow-ups
- Three plugins have no release that accepts jQuery 4. How does that change the number?
- The client insists on one figure. What do you give?
- How would you narrow the range in the first week?
From the lesson Audit a jQuery codebase before you upgrade
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

ESLint with eslint-plugin-no-jquery's deprecated-4.0 rules reports nothing on a codebase, yet pages break when it moves to jQuery 4. How can both be true, and what would you add to the audit?
What it tests

Knowing what a linter can and cannot see: variable names, behaviour changes, code outside the linted files, and the passes that cover each gap.

First step

List what the rules cannot see. They know a jQuery object only by a $-named variable or a $() chain, so rows.push() passes. They see calls, not results, so .css('fontSize', 18) passes. And they read only the files you give them, not the themes, plugins and inline scripts the pages load.
Follow-ups
- Which of the gaps does TypeScript close, and which does it not?
- How do you find code that no linted file contains?
- What would you put in CI so the gap stays closed?
From the lesson Audit a jQuery codebase before you upgrade
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
Mid to senior

A WordPress site shows a clean console with the platform's own jQuery Migrate 3.4.1 and SCRIPT_DEBUG on. The client asks whether its theme and plugins are ready for jQuery 4. What do you answer, and how do you check?
What it tests

Knowing which Migrate reports which changes, why an older Migrate 3 misses calls that jQuery 4 breaks, and how to test for jQuery 4 without changing the live site.

First step

Say that the clean console answers a narrower question: Migrate 3.4.1 reports what jQuery 3 deprecated, and on this lesson's coverage page it said nothing about 13 of 28 calls that jQuery 4 removes, changes or deprecates. Then plan a staging test with jQuery 4.0.0 and the development build of Migrate 4.0.2.
Follow-ups
- How do you load jQuery 4 on a staging copy when WordPress registers its own jQuery?
- The test shows WARN entries in a plugin you do not maintain. What then?
- Is Migrate 3.6.0 with 3.7.1 a useful halfway check?
From the lesson The upgrade path with jQuery Migrate 3 and 4
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
Mid to staff

A team wants to ship jQuery 4 with jQuery Migrate 4 on the live site "for safety", and fix the old calls later. What do you advise, and under what conditions would you accept it?
What it tests

Weighing Migrate as a stop-gap: what it restores and what it does not, its cost in bytes and behaviour, and how to make a temporary measure end.

First step

Separate the two builds: the development build is for finding calls and does not belong on the live site, while the compressed one restores the removed APIs silently, so nobody learns which calls still depend on it. Then name what Migrate does not restore, such as the px for numbers passed to .css().
Follow-ups
- What would you log, so the team knows which pages still need Migrate?
- How do you set an end date that holds?
- Does Migrate 4 on the live site protect against the old advisories?
From the lesson The upgrade path with jQuery Migrate 3 and 4
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

After the move to jQuery 4, a cart's quantity field rejects every number. The change shows $.isNumeric(qty) replaced by Number.isFinite(qty), as the upgrade guide suggests. Explain the bug, and fix the test so the field accepts what it should.
What it tests

Knowing how Number.isFinite treats strings, what $.isNumeric accepted, and how to choose and prove a replacement for one field instead of copying a one-line suggestion.

First step

Look at the type of qty: it comes from .val(), so it is always a string, and Number.isFinite() never converts its argument, so "42" fails. Then decide what the field accepts, whole numbers from 1 up, before writing the new test.
Follow-ups
- Why not Number.isFinite(Number(qty))?
- How do you prove the new test accepts what the old one did, where it should?
- Where else in the codebase would the same mistake hide?
From the lesson APIs removed in jQuery 4 and their replacements
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
Mid to staff

A colleague proposes running eslint --fix with eslint-plugin-no-jquery's deprecated-4.0 rules over the whole codebase before the jQuery 4 upgrade, in one commit. What do you say, and how would you run it safely?
What it tests

Judging automated rewrites: which ones are safe, which ones change behaviour, how to review them, and how to keep a large change testable.

First step

Separate the rules. Some rewrites are one-to-one, such as $.isArray to Array.isArray or $.now to Date.now. Others are not: the rewrite of .hover(over, out) is .on("hover", over, out), which binds an event that never fires since jQuery 1.9.
Follow-ups
- Which autofixes would you allow, and how do you run only those?
- How do you review a fix that touches 400 files?
- What test would have caught the .hover() rewrite?
From the lesson APIs removed in jQuery 4 and their replacements
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
Mid to senior

After a page's scripts move into a bundle with import { $ } from 'jquery', a classic plugin throws ReferenceError: jQuery is not defined, although the entry sets window.jQuery on the line before the plugin's import. Explain why, and fix it so the page's inline scripts keep working too.
What it tests

Knowing the evaluation order of ES modules, that jQuery 4's module build sets no global, and the difference between a global for the whole page and a name rewritten inside the bundle.

First step

Point at the order of evaluation: an ES module runs all of its imports before its own body, so the plugin runs before the assignment on line 2. Then note that jQuery 4's module build sets no window.jQuery of its own, so nothing else provides it.
Follow-ups
- Why does esbuild's inject option fix the plugins but not the inline scripts?
- How would you write a test that catches this before release?
- What changes if the plugin is a UMD module that calls require('jquery')?
From the lesson jQuery 4 as ES modules: bundlers, Node, TypeScript
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

After the move to jQuery 4, a shop's bundle grew from about 280 KB to about 540 KB, and $('#delivery').datepicker() now throws "is not a function". The plugin's newest release still declares jquery below 4. Diagnose it, and say what you would ship this week and what later.
What it tests

Reading npm's tree and a bundle's inputs, knowing how a dependency range creates a nested copy, and weighing an override against waiting for or replacing a plugin.

First step

Run npm ls jquery --all: the plugin's range, >=3.4.0 <4.0.0, made npm install jquery 3.7.1 inside its folder. The bundle's metafile then lists both copies, and the plugin added datepicker to its own copy, not to the $ the page uses.
Follow-ups
- How do you make two copies fail the build from now on?
- What exactly does an npm override change, and what does it not?
- When would you replace the plugin instead?
From the lesson jQuery 4 as ES modules: bundlers, Node, TypeScript
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
Mid to senior

After a shop switches on a strict Content Security Policy, the "Add to cart" buttons that a jQuery plugin renders with .html() and onclick attributes do nothing, and the console shows violations. Plan the fix without 'unsafe-inline', and say how you would roll the policy out safely.
What it tests

Recognising inline handlers in HTML strings as blocked code, rewriting them with delegation, and using report-only mode to find the rest before enforcing.

First step

Read the violations: script-src-attr refused the onclick attributes in the HTML that .html() inserted. The fix is to stop putting code in markup: data- attributes on the buttons, and one delegated handler bound in a file the policy allows.
Follow-ups
- The plugin is third-party and minified. What are your options?
- Why not hash the handlers and add 'unsafe-hashes'?
- How do you know nothing else breaks when you enforce?
From the lesson jQuery 4 with strict CSP and Trusted Types
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A security audit asks you to switch on Trusted Types for an admin that runs jQuery 3.7.1 and renders customer reviews with .html(). What happens if you enforce it today, and what is your plan?
What it tests

Knowing that jQuery 3.7.1 fails at start-up under Trusted Types, that jQuery 4 accepts TrustedHTML, and how to move rendering to safe calls and a sanitiser's policy.

First step

Say what enforcing would do today: jQuery 3.7.1 assigns a string to innerHTML in a start-up support test, so it would not start at all. Then plan report-only mode first, the upgrade to jQuery 4, and the rewrite of every HTML sink the reports name.
Follow-ups
- How do you render the reviews under Trusted Types?
- What does the trusted-types directive list, and why does the list matter?
- Would a default policy make the switch easier, and what does it cost?
From the lesson jQuery 4 with strict CSP and Trusted Types
Model answer, Pro.
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes

The lessons of this module

Why upgrade jQuery: CVEs, support and browsers Free lesson, Pro answers: 20 minutes
Audit a jQuery codebase before you upgrade Free lesson, Pro answers: 20 minutes
The upgrade path with jQuery Migrate 3 and 4 Free lesson, Pro answers: 15 minutes
APIs removed in jQuery 4 and their replacements Free lesson, Pro answers: 25 minutes
jQuery 4 as ES modules: bundlers, Node, TypeScript Free lesson, Pro answers: 25 minutes
jQuery 4 with strict CSP and Trusted Types Free lesson, Pro answers: 30 minutes

All jQuery 4 (legacy code and migration to DOM APIs) interview questions · The jQuery 4 (legacy code and migration to DOM APIs) track

Warm-up questions

What is CVE-2020-11023, and which jQuery releases have it?

What does npm ls jquery --all tell you before an upgrade?

Why load the development build of jQuery Migrate while you upgrade?

Which methods did jQuery 4 remove from jQuery objects, and what replaces them?

Why does require('jquery') throw "jQuery requires a window with a document" in Node.js with jQuery 4, when the same line worked with jQuery 3?

What does script-src 'self' allow, and what does it refuse?

Questions with model answers

A scanner reports CVE-2020-11022 and CVE-2020-11023 on a client's site, which runs jQuery 3.4.1. The client asks whether the site has been hacked and what to do this week. How do you answer?

Your manager asks for a one-paragraph case for moving a shop from jQuery 1.12.4 to jQuery 4, and asks why the team should not simply stop at 3.7.1. What do you write?

A client wants a fixed price for moving a 40-page shop with nine jQuery plugins to jQuery 4, by tomorrow. How do you produce a number you can defend, and what do you send tomorrow?

ESLint with eslint-plugin-no-jquery's deprecated-4.0 rules reports nothing on a codebase, yet pages break when it moves to jQuery 4. How can both be true, and what would you add to the audit?

A WordPress site shows a clean console with the platform's own jQuery Migrate 3.4.1 and SCRIPT_DEBUG on. The client asks whether its theme and plugins are ready for jQuery 4. What do you answer, and how do you check?

A team wants to ship jQuery 4 with jQuery Migrate 4 on the live site "for safety", and fix the old calls later. What do you advise, and under what conditions would you accept it?

After the move to jQuery 4, a cart's quantity field rejects every number. The change shows $.isNumeric(qty) replaced by Number.isFinite(qty), as the upgrade guide suggests. Explain the bug, and fix the test so the field accepts what it should.

A colleague proposes running eslint --fix with eslint-plugin-no-jquery's deprecated-4.0 rules over the whole codebase before the jQuery 4 upgrade, in one commit. What do you say, and how would you run it safely?

After a page's scripts move into a bundle with import { $ } from 'jquery', a classic plugin throws ReferenceError: jQuery is not defined, although the entry sets window.jQuery on the line before the plugin's import. Explain why, and fix it so the page's inline scripts keep working too.

After the move to jQuery 4, a shop's bundle grew from about 280 KB to about 540 KB, and $('#delivery').datepicker() now throws "is not a function". The plugin's newest release still declares jquery below 4. Diagnose it, and say what you would ship this week and what later.

After a shop switches on a strict Content Security Policy, the "Add to cart" buttons that a jQuery plugin renders with .html() and onclick attributes do nothing, and the console shows violations. Plan the fix without 'unsafe-inline', and say how you would roll the policy out safely.

A security audit asks you to switch on Trusted Types for an admin that runs jQuery 3.7.1 and renders customer reviews with .html(). What happens if you enforce it today, and what is your plan?