Bootstrap v6 — ESLint Modernization Report

globalThis is the standard way to access the global object across all JS environments (browser, Node, workers, Deno). window only works in browsers and fails in SSR/testing contexts.

window.addEventListener(...)

globalThis.addEventListener(...)

The spread operator [...iterable] is more readable and often faster than Array.from(), [].concat(), or String#split("").

[].concat(...arrays)
Array.from(nodeList)
str.split("")

[...arrays].flat()
[...nodeList]
[...str]

element.dataset provides a clean API for data-* attributes. No need for manual string manipulation with getAttribute("data-...").

el.getAttribute("data-bs-interval")
el.setAttribute("data-bs-foo", val)

el.dataset.bsInterval
el.dataset.bsFoo = val

Array#flat() is the standard, readable way to flatten arrays. The old [].concat(...arr) pattern was a workaround before flat() existed.

[].concat(...nestedArray)

nestedArray.flat()

If a variable was destructured from an object, always use the destructured variable instead of accessing the property again on the original object.

const { foo } = obj
console.log(obj.bar)

const { foo, bar } = obj
console.log(bar)

Logical assignment operators combine a logical operation with assignment in a single, concise expression. Reduces boilerplate and makes intent clearer.

x = x || defaultValue
if (!x) { x = fallback }

x ||= defaultValue
x ||= fallback

typeof x !== "undefined" is a legacy pattern. Since ES5, undefined is non-writable on the global object, so direct comparison x !== undefined is safe and shorter.

if (typeof x !== "undefined") { ... }

if (x !== undefined) { ... }

These are action items left by the Bootstrap team specifically for the v6 release. They should be resolved now.

// TODO: v6 revert #37011 & change markup

(resolve the TODO — implement the change)

replaceAll() is clearer than replace(/pattern/g, ...) for simple string replacements. No need to escape regex special characters.

str.replace(/foo/g, "bar")

str.replaceAll("foo", "bar")

Array#at(-1) is the modern way to access elements from the end. More readable than arr[arr.length - 1].

items[items.length - 1]

items.at(-1)

Named capture groups (?<name>...) make regex matches self-documenting. Accessing match.groups.name is clearer than match[1].

const match = /^(\d+)-(\w+)$/.exec(str)

const match = /^(?<num>\d+)-(?<id>\w+)$/.exec(str)

Methods with complexity > 20 are hard to test and maintain. Consider breaking into smaller, focused functions.

function bigMethod() { /* 24 branches */ }

function bigMethod() { /* split into helpers */ }

String.raw avoids double-escaping backslashes in template literals, making regex patterns and file paths more readable.

"\\d+"

String.raw`\d+`

querySelector is more flexible and consistent with other DOM querying methods. It uses CSS selector syntax uniformly.

document.getElementById("myId")

document.querySelector("#myId")