Use arrow functions to preserve this in components

src/javascripts/components/back-to-top.mjs

@@ -26,14 +26,10 @@ BackToTop.prototype.init = function () {
   let subNavIsIntersecting = false
   let subNavIntersectionRatio = 0
 
-  const observer = new window.IntersectionObserver(function (entries) {
+  const observer = new window.IntersectionObserver((entries) => {
     // Find the elements we care about from the entries
-    const footerEntry = entries.find(function (entry) {
-      return entry.target === $footer
-    })
-    const subNavEntry = entries.find(function (entry) {
-      return entry.target === $subNav
-    })
+    const footerEntry = entries.find((entry) => entry.target === $footer)
+    const subNavEntry = entries.find((entry) => entry.target === $subNav)
 
     // If there is an entry this means the element has changed so lets check if it's intersecting.
     if (footerEntry) {
@@ -58,7 +54,7 @@ BackToTop.prototype.init = function () {
     } else {
       this.$module.classList.remove('app-back-to-top--hidden')
     }
-  }.bind(this))
+  })
 
   observer.observe($footer)
   observer.observe($subNav)

src/javascripts/components/cookie-banner.mjs

@@ -41,9 +41,9 @@ CookieBanner.prototype.init = function () {
   this.$acceptButton.addEventListener('click', this.acceptCookies.bind(this))
   this.$rejectButton.addEventListener('click', this.rejectCookies.bind(this))
 
-  this.$cookieBannerHideButtons.forEach(function ($cookieBannerHideButton) {
+  this.$cookieBannerHideButtons.forEach(($cookieBannerHideButton) => {
     $cookieBannerHideButton.addEventListener('click', this.hideBanner.bind(this))
-  }.bind(this))
+  })
 }
 
 CookieBanner.prototype.hideBanner = function () {

src/javascripts/components/cookie-functions.mjs

@@ -170,7 +170,7 @@ export function resetCookies () {
       // Fetch the cookies in that category
       const cookiesInCategory = COOKIE_CATEGORIES[cookieType]
 
-      cookiesInCategory.forEach(function (cookie) {
+      cookiesInCategory.forEach((cookie) => {
         // Delete cookie
         Cookie(cookie, null)
       })

src/javascripts/components/cookies-page.mjs

@@ -15,10 +15,10 @@ CookiesPage.prototype.init = function () {
   this.$cookieFormFieldsets = this.$cookieForm.querySelectorAll('.js-cookies-page-form-fieldset')
   this.$successNotification = this.$cookiePage.querySelector('.js-cookies-page-success')
 
-  this.$cookieFormFieldsets.forEach(function ($cookieFormFieldset) {
+  this.$cookieFormFieldsets.forEach(($cookieFormFieldset) => {
     this.showUserPreference($cookieFormFieldset, getConsentCookie())
     $cookieFormFieldset.removeAttribute('hidden')
-  }.bind(this))
+  })
 
   // Show submit button
   this.$cookieForm.querySelector('.js-cookies-form-button').removeAttribute('hidden')
@@ -32,12 +32,12 @@ CookiesPage.prototype.savePreferences = function (event) {
 
   const preferences = {}
 
-  this.$cookieFormFieldsets.forEach(function ($cookieFormFieldset) {
+  this.$cookieFormFieldsets.forEach(($cookieFormFieldset) => {
     const cookieType = this.getCookieType($cookieFormFieldset)
     const selectedItem = $cookieFormFieldset.querySelector(`input[name=${cookieType}]:checked`).value
 
     preferences[cookieType] = selectedItem === 'yes'
-  }.bind(this))
+  })
 
   // Save preferences to cookie and show success notification
   setConsentCookie(preferences)

src/javascripts/components/navigation.mjs

@@ -30,23 +30,23 @@ Navigation.prototype.setHiddenStates = function () {
       this.$nav.setAttribute('hidden', '')
     }
 
-    this.$navLinks.forEach(function ($navLink) {
+    this.$navLinks.forEach(($navLink) => {
       $navLink.setAttribute('hidden', '')
     })
 
-    this.$navButtons.forEach(function ($navButton) {
+    this.$navButtons.forEach(($navButton) => {
       $navButton.removeAttribute('hidden')
     })
 
     this.$navToggler.removeAttribute('hidden')
   } else if (this.mql === null || this.mql.matches) {
     this.$nav.removeAttribute('hidden')
 
-    this.$navLinks.forEach(function ($navLink) {
+    this.$navLinks.forEach(($navLink) => {
       $navLink.removeAttribute('hidden')
     })
 
-    this.$navButtons.forEach(function ($navButton) {
+    this.$navButtons.forEach(($navButton) => {
       $navButton.setAttribute('hidden', '')
     })
 
@@ -57,7 +57,7 @@ Navigation.prototype.setHiddenStates = function () {
 Navigation.prototype.setInitialAriaStates = function () {
   this.$navToggler.setAttribute('aria-expanded', 'false')
 
-  this.$navButtons.forEach(function ($button, index) {
+  this.$navButtons.forEach(($button, index) => {
     const $nextSubNav = $button.parentNode.querySelector(subNavJSClass)
 
     if ($nextSubNav) {
@@ -97,7 +97,7 @@ Navigation.prototype.bindUIEvents = function () {
     }
   }.bind(this))
 
-  $navButtons.forEach(function ($button) {
+  $navButtons.forEach(($button) => {
     $button.addEventListener('click', function (event) {
       const $nextSubNav = $button.parentNode.querySelector(subNavJSClass)
 

src/javascripts/components/search.mjs

@@ -60,12 +60,12 @@ Search.prototype.renderResults = function () {
   if (!searchIndex || !documentStore) {
     return searchCallback(searchResults)
   }
-  const lunrSearchResults = searchIndex.query(function (q) {
+  const lunrSearchResults = searchIndex.query((q) => {
     q.term(lunr.tokenizer(searchQuery), {
       wildcard: lunr.Query.wildcard.TRAILING
     })
   })
-  searchResults = lunrSearchResults.map(function (result) {
+  searchResults = lunrSearchResults.map((result) => {
     return documentStore[result.ref]
   })
   searchCallback(searchResults)
@@ -100,7 +100,7 @@ Search.prototype.inputValueTemplate = function (result) {
 
 Search.prototype.resultTemplate = function (result) {
   function startsWithFilter (words, query) {
-    return words.filter(function (word) {
+    return words.filter((word) => {
       return word.trim().toLowerCase().indexOf(query.toLowerCase()) === 0
     })
   }
@@ -121,7 +121,7 @@ Search.prototype.resultTemplate = function (result) {
       const aliases = result.aliases.split(', ')
 
       // Aliases containing words that start with the query
-      const matchedAliases = aliases.reduce(function (aliasesFiltered, alias) {
+      const matchedAliases = aliases.reduce((aliasesFiltered, alias) => {
         const aliasWordsMatched = startsWithFilter(alias.match(/\w+/g) || [], searchQuery)
 
         return aliasWordsMatched.length
@@ -177,9 +177,9 @@ Search.prototype.init = function () {
   })
 
   const searchIndexUrl = $module.getAttribute('data-search-index')
-  this.fetchSearchIndex(searchIndexUrl, function () {
+  this.fetchSearchIndex(searchIndexUrl, () => {
     this.renderResults()
-  }.bind(this))
+  })
 }
 
 export default Search

src/javascripts/components/search.tracking.mjs

@@ -22,18 +22,14 @@ export function trackConfirm (searchQuery, searchResults, result) {
   const searchTerm = stripPossiblePII(searchQuery)
   const products =
     searchResults
-      .map(function (result, key) {
-        return {
-          name: result.title,
-          category: result.section,
-          list: searchTerm, // Used to match an searchTerm with results
-          position: (key + 1)
-        }
-      })
-      .filter(function (product) {
-        // Only return the product that matches what was clicked
-        return product.name === result.title
-      })
+      .map((result, key) => ({
+        name: result.title,
+        category: result.section,
+        list: searchTerm, // Used to match an searchTerm with results
+        position: (key + 1)
+      }))
+      // Only return the product that matches what was clicked
+      .filter((product) => product.name === result.title)
 
   addToDataLayer({
     event: 'site-search',
@@ -60,14 +56,12 @@ export function trackSearchResults (searchQuery, searchResults) {
 
   const hasResults = (searchResults.length > 0)
   // Impressions is Google Analytics lingo for what people have seen.
-  const impressions = searchResults.map(function (result, key) {
-    return {
-      name: result.title,
-      category: result.section,
-      list: searchTerm, // Used to match an searchTerm with results
-      position: (key + 1)
-    }
-  })
+  const impressions = searchResults.map((result, key) => ({
+    name: result.title,
+    category: result.section,
+    list: searchTerm, // Used to match an searchTerm with results
+    position: (key + 1)
+  }))
 
   addToDataLayer({
     event: 'site-search',

src/javascripts/components/tabs.mjs

@@ -26,9 +26,9 @@ AppTabs.prototype.init = function () {
   this.enhanceMobileTabs()
 
   // Add bindings to desktop tabs
-  this.$desktopTabs.forEach(function ($tab) {
+  this.$desktopTabs.forEach(($tab) => {
     $tab.addEventListener('click', this.onClick.bind(this))
-  }.bind(this))
+  })
 
   // Reset all tabs and panels to closed state
   // We also add all our default ARIA goodness here
@@ -72,7 +72,7 @@ AppTabs.prototype.onClick = function (event) {
  */
 AppTabs.prototype.enhanceMobileTabs = function () {
   // Loop through mobile tabs...
-  this.$mobileTabs.forEach(function ($tab) {
+  this.$mobileTabs.forEach(($tab) => {
     // ...construct a button equivalent of each anchor...
     const $button = document.createElement('button')
     $button.setAttribute('aria-controls', $tab.getAttribute('aria-controls'))
@@ -85,7 +85,7 @@ AppTabs.prototype.enhanceMobileTabs = function () {
     // ...and replace the anchor with the button
     $tab.parentNode.appendChild($button)
     $tab.parentNode.removeChild($tab)
-  }.bind(this))
+  })
 
   // Replace the value of $mobileTabs with the new buttons
   this.$mobileTabs = this.$module.querySelectorAll('.js-tabs__heading button')
@@ -95,12 +95,12 @@ AppTabs.prototype.enhanceMobileTabs = function () {
  * Reset tabs and panels to closed state
  */
 AppTabs.prototype.resetTabs = function () {
-  this.$panels.forEach(function ($panel) {
+  this.$panels.forEach(($panel) => {
     // We don't want to hide the panel if there are no tabs present to show it
     if (!$panel.classList.contains('js-tabs__container--no-tabs')) {
       this.closePanel($panel.id)
     }
-  }.bind(this))
+  })
 }
 
 /**
@@ -140,7 +140,7 @@ AppTabs.prototype.closePanel = function (panelId) {
  */
 AppTabs.prototype.getMobileTab = function (panelId) {
   let result = null
-  this.$mobileTabs.forEach(function ($tab) {
+  this.$mobileTabs.forEach(($tab) => {
     if ($tab.getAttribute('aria-controls') === panelId) {
       result = $tab
     }