Bootstrap v6 — AST Pattern Analysis Report

In modern JS, x != null covers both undefined and null. Or use optional chaining ?. / nullish coalescing ?? for safe access.

typeof x !== 'undefined'

x !== undefined
— or —
x?.prop ?? fallback

When iterating object entries, Object.entries() gives both key and value. Object.keys(x).includes(y) can be Object.hasOwn(x, y).

for (const key of Object.keys(obj)) { ... }
Object.keys(obj).includes(name)

for (const [key, val] of Object.entries(obj)) { ... }
Object.hasOwn(obj, name)

Checking Object.keys(x).length allocates an array just to count properties. This is a minor performance consideration — acceptable for infrequent calls, but worth noting in hot paths.

if (!Object.keys(obj).length) { ... }

// Acceptable pattern, but allocates an array
// Consider extracting to a utility for hot paths

While Object.assign(el.style, {...}) works, consider if individual el.style.prop = val assignments or CSS class toggles would be cleaner. Note: cssText overwrites all inline styles, while Object.assign merges.

Object.assign(el.style, { left: x, top: y })

el.style.left = `${x}px`
el.style.top = `${y}px`
— or CSS class toggle —
el.classList.add('positioned')

element.className = 'foo' replaces all classes. Prefer classList.add()/classList.toggle() for safer class manipulation, or classList.value for full replacement.

el.className = 'my-class'

el.classList.add('my-class')
— or for full set —
el.classList.value = 'my-class'

Multiple createElement + className + innerHTML chains can be replaced with <template> elements or a single innerHTML string for cleaner DOM construction. Note: createElement is fast for simple elements — review on case-by-case basis.

const el = document.createElement('div')
el.className = 'foo'
el.innerHTML = '...'

const tpl = `<div class="foo">...</div>`
container.insertAdjacentHTML('beforeend', tpl)

innerHTML triggers full HTML parsing and can be an XSS vector. Consider textContent for text-only, or replaceChildren() + DOM nodes for structured content. Bootstrap sanitizes, but it is worth auditing.

el.innerHTML = userContent

el.textContent = text        // for plain text
el.replaceChildren(...nodes)  // for DOM nodes

parentNode can return non-Element nodes (Document, DocumentFragment). parentElement is safer when you expect an Element. Also consider .closest(selector) for ancestor traversal.

element.parentNode

element.parentElement       // guaranteed Element|null
element.closest('selector') // ancestor lookup

ARIA IDL properties like el.ariaExpanded, el.ariaSelected, el.ariaLabel provide direct property access instead of string-based setAttribute(). Cleaner syntax and avoids string typos. Supported in Chrome 81+, Firefox 119+, Safari 12.1+.

el.setAttribute('aria-expanded', 'true')
el.removeAttribute('aria-current')

el.ariaExpanded = 'true'
el.ariaCurrent = null

Removing ARIA attributes can be done via IDL property assignment. Setting the property to null removes the underlying attribute.

el.removeAttribute('aria-current')

el.ariaCurrent = null

element.matches('selector') is more flexible and readable than comparing tagName. It handles case-insensitive matching and supports complex selectors.

el.tagName === 'A'
/input|textarea/i.test(el.tagName)

el.matches('a')
el.matches('input, textarea')

Manual removeEventListener requires keeping a reference to the handler. AbortController + { signal } option provides cleaner lifecycle management — call controller.abort() to remove all listeners at once.

el.addEventListener('click', handler)
// later...
el.removeEventListener('click', handler)

const ac = new AbortController()
el.addEventListener('click', handler, { signal: ac.signal })
// later...
ac.abort() // removes all listeners

ES2022 Error cause option chains errors for better debugging. When re-throwing or wrapping errors, include { cause: originalError }. Note: only useful when wrapping another error — standalone throws may not need it.

throw new Error('Something failed')

throw new Error('Something failed', { cause: err })