From fa3fe2eede0c784bd94b71614755aa4604768b63 Mon Sep 17 00:00:00 2001
From: Jean-Yves Perrier <jypenator@gmail.com>
Date: Mon, 8 Aug 2022 14:24:34 +0200
Subject: [PATCH] Use arrow functions for anonymous functions where possible
 (part #8) (#19191)

* Use arrow functions

* const

* Spaces

* Spaces

* Spaces

* spaces

* spaces

* Space

* Add comment

* spaces

* syntax + comments

* indent

* indent + this

* indent + this

* const + for...of

* Revert to innerHTML

* clean

* remove Hungarian notation + indent

* let -> const

* Indent

* fix indent

* shorten string

* indent

* indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent

* Fix indent + template strings

* Fix indent

* Fix indent

* Fix indent

* indent - Hungarian notation

* Fix indentation

* Fix spaces

* Update index.md

* Update files/en-us/web/api/web_audio_api/simple_synth/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_audio_api/simple_synth/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_audio_api/simple_synth/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_audio_api/using_iir_filters/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_audio_api/using_iir_filters/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update index.md

* Update files/en-us/web/api/web_workers_api/using_web_workers/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_workers_api/using_web_workers/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_workers_api/using_web_workers/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/web_workers_api/using_web_workers/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/websockets_api/writing_websocket_server/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Revert over-correction

* Update files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Remove extraneous brace

* Update files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Update files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* small improvement

* Update files/en-us/web/api/window/location/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Remove Hungarian left-over

* Update files/en-us/web/api/window/location/index.md

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

* Fix logs

* add parentheses

* Update index.md

* Update index.md

* Changes

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 files/en-us/web/api/touch/pagey/index.md      |   2 +-
 files/en-us/web/api/touch/screenx/index.md    |   2 +-
 files/en-us/web/api/touch/target/index.md     |   2 +-
 .../touch_events/using_touch_events/index.md  |   2 +-
 .../en-us/web/api/touchevent/altkey/index.md  |   2 +-
 .../api/touchevent/changedtouches/index.md    |   2 +-
 .../en-us/web/api/touchevent/touches/index.md |   2 +-
 files/en-us/web/api/touchlist/item/index.md   |   2 +-
 files/en-us/web/api/touchlist/length/index.md |   2 +-
 .../en-us/web/api/userproximityevent/index.md |   2 +-
 files/en-us/web/api/vibration_api/index.md    |   2 +-
 files/en-us/web/api/videotrack/label/index.md |   4 +-
 .../api/visualviewport/resize_event/index.md  |   4 +-
 .../api/visualviewport/scroll_event/index.md  |   4 +-
 .../vrdisplay/cancelanimationframe/index.md   |   6 +-
 .../en-us/web/api/vrdisplay/depthfar/index.md |   2 +-
 .../web/api/vrdisplay/depthnear/index.md      |   2 +-
 .../web/api/vrdisplay/exitpresent/index.md    |   6 +-
 .../web/api/vrdisplay/getframedata/index.md   |   6 +-
 .../en-us/web/api/vrdisplay/getpose/index.md  |   6 +-
 files/en-us/web/api/vrdisplay/index.md        |   6 +-
 .../web/api/vrdisplay/isconnected/index.md    |  10 +-
 .../web/api/vrdisplay/ispresenting/index.md   |   4 +-
 .../vrdisplay/requestanimationframe/index.md  |   6 +-
 .../web/api/vrdisplay/requestpresent/index.md |  12 +-
 .../web/api/vrdisplay/resetpose/index.md      |   2 +-
 .../web/api/vrdisplay/submitframe/index.md    |   6 +-
 .../web/api/vrdisplaycapabilities/index.md    |   2 +-
 .../web/api/vrdisplayevent/display/index.md   |   2 +-
 files/en-us/web/api/vrdisplayevent/index.md   |   2 +-
 .../web/api/vrdisplayevent/reason/index.md    |   2 +-
 files/en-us/web/api/vreyeparameters/index.md  |   6 +-
 files/en-us/web/api/vrfieldofview/index.md    |   2 +-
 .../web/api/vrframedata/timestamp/index.md    |   6 +-
 files/en-us/web/api/vrlayerinit/index.md      |   8 +-
 .../en-us/web/api/vrstageparameters/index.md  |   4 +-
 .../using_the_web_animations_api/index.md     |  16 +-
 .../api/web_audio_api/best_practices/index.md |  15 +-
 .../api/web_audio_api/simple_synth/index.md   |  46 +-
 .../web_audio_api/using_iir_filters/index.md  |  82 +--
 .../using_web_audio_api/index.md              |  42 +-
 .../web_audio_spatialization_basics/index.md  | 326 ++++++-----
 files/en-us/web/api/web_midi_api/index.md     |   2 +-
 .../using_the_web_speech_api/index.md         |  36 +-
 .../using_the_web_storage_api/index.md        |   2 +-
 .../using_web_workers/index.md                | 533 +++++++++---------
 .../basic_2d_animation_example/index.md       |  21 +-
 .../by_example/canvas_size_and_webgl/index.md |  15 +-
 .../by_example/detect_webgl/index.md          |  18 +-
 .../webgl_api/by_example/hello_glsl/index.md  |  37 +-
 .../hello_vertex_attributes/index.md          |  56 +-
 .../by_example/raining_rectangles/index.md    |  25 +-
 .../by_example/scissor_animation/index.md     |  32 +-
 .../by_example/textures_from_code/index.md    |  47 +-
 .../animating_textures_in_webgl/index.md      |   4 +-
 .../tutorial/using_textures_in_webgl/index.md |   2 +-
 .../webgl_api/webgl_best_practices/index.md   |   4 +-
 .../webgl_model_view_projection/index.md      |  12 +-
 .../webgl_lose_context/losecontext/index.md   |   2 +-
 .../restorecontext/index.md                   |   2 +-
 .../en-us/web/api/webglcontextevent/index.md  |   2 +-
 .../webglcontextevent/statusmessage/index.md  |   2 +-
 .../connect_peers/answer_a_call/index.md      |  34 +-
 .../create_a_peer_connection/index.md         |   2 +-
 .../connect_peers/creating_a_call/index.md    |  24 +-
 .../connect_peers/end_a_call/index.md         |  12 +-
 .../connect_peers/show_hide_html/index.md     |  30 +-
 .../signaling_and_video_calling/index.md      |  80 ++-
 .../web/api/webrtc_api/using_dtmf/index.md    |  20 +-
 .../web/api/websocket/binarytype/index.md     |  19 +-
 .../web/api/websocket/close_event/index.md    |   2 +-
 .../web/api/websocket/error_event/index.md    |   2 +-
 files/en-us/web/api/websocket/index.md        |   4 +-
 .../web/api/websocket/message_event/index.md  |   2 +-
 .../index.md                                  |   6 +-
 .../writing_websocket_server/index.md         |  69 ++-
 .../webvr_api/using_the_webvr_api/index.md    | 102 ++--
 .../using_vr_controllers_with_webvr/index.md  |  59 +-
 .../web/api/webxr_device_api/inputs/index.md  |   2 +-
 .../api/window/appinstalled_event/index.md    |   4 +-
 .../window/beforeinstallprompt_event/index.md |   4 +-
 .../window/deviceorientation_event/index.md   |  21 +-
 .../web/api/window/hashchange_event/index.md  |   2 +-
 .../api/window/languagechange_event/index.md  |   4 +-
 files/en-us/web/api/window/location/index.md  | 121 ++--
 .../web/api/window/popstate_event/index.md    |  14 +-
 .../web/api/window/sessionstorage/index.md    |   2 +-
 .../web/api/window/speechsynthesis/index.md   |   2 +-
 .../window/unhandledrejection_event/index.md  |   2 +-
 .../web/api/window/unload_event/index.md      |   8 +-
 .../window/vrdisplayactivate_event/index.md   |   4 +-
 .../api/window/vrdisplayblur_event/index.md   |   4 +-
 .../window/vrdisplayconnect_event/index.md    |   4 +-
 .../window/vrdisplaydeactivate_event/index.md |   4 +-
 .../window/vrdisplaydisconnect_event/index.md |   4 +-
 .../api/window/vrdisplayfocus_event/index.md  |   4 +-
 .../vrdisplaypointerrestricted_event/index.md |   4 +-
 .../index.md                                  |   4 +-
 .../vrdisplaypresentchange_event/index.md     |   8 +-
 files/en-us/web/api/windowclient/index.md     |   4 +-
 100 files changed, 1096 insertions(+), 1124 deletions(-)

diff --git a/files/en-us/web/api/touch/pagey/index.md b/files/en-us/web/api/touch/pagey/index.md
index 9c4399ab99756d2..002505469c59022 100644
--- a/files/en-us/web/api/touch/pagey/index.md
+++ b/files/en-us/web/api/touch/pagey/index.md
@@ -39,7 +39,7 @@ are accessed via the event's {{domxref("TouchEvent.changedTouches")}} list.
 // Register a touchmove listeners for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchmove', function(e) {
+src.addEventListener('touchmove', (e) => {
   // Iterate through the touch points that have moved and log each
   // of the pageX/Y coordinates. The unit of each coordinate is CSS pixels.
   for (let i = 0; i < e.changedTouches.length; i++) {
diff --git a/files/en-us/web/api/touch/screenx/index.md b/files/en-us/web/api/touch/screenx/index.md
index 2755fff3e56247d..21977ee005f2605 100644
--- a/files/en-us/web/api/touch/screenx/index.md
+++ b/files/en-us/web/api/touch/screenx/index.md
@@ -30,7 +30,7 @@ In following simple code snippet, we assume the user initiates multiple touch co
 // Register a touchstart listeners for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchstart', function(e) {
+src.addEventListener('touchstart', (e) => {
   // Iterate through the touch points and log each screenX/Y coordinate.
   // The unit of each coordinate is CSS pixels.
   for (let i = 0; i < e.touches.length; i++) {
diff --git a/files/en-us/web/api/touch/target/index.md b/files/en-us/web/api/touch/target/index.md
index 0481ba436b90a6f..a3d52aa0ebe3e1c 100644
--- a/files/en-us/web/api/touch/target/index.md
+++ b/files/en-us/web/api/touch/target/index.md
@@ -29,7 +29,7 @@ In following simple code snippet, we assume the user initiates one or more touch
 // Register a touchmove listener for the 'source' element
 const src = document.getElementById("source");
 
-src.addEventListener('touchstart', function(e) {
+src.addEventListener('touchstart', (e) => {
   // Iterate through the touch points that were activated
   // for this element.
   for (let i = 0; i < e.targetTouches.length; i++) {
diff --git a/files/en-us/web/api/touch_events/using_touch_events/index.md b/files/en-us/web/api/touch_events/using_touch_events/index.md
index eb866a6f97bc79a..993dba713db2e3d 100644
--- a/files/en-us/web/api/touch_events/using_touch_events/index.md
+++ b/files/en-us/web/api/touch_events/using_touch_events/index.md
@@ -79,7 +79,7 @@ Access the attributes of a touch point.
 
 ```js
 // Create touchstart handler
-someElement.addEventListener('touchstart', function(ev) {
+someElement.addEventListener('touchstart', (ev) => {
   // Iterate through the touch points that were activated
   // for this element and process each event 'target'
   for (let i = 0; i < ev.targetTouches.length; i++) {
diff --git a/files/en-us/web/api/touchevent/altkey/index.md b/files/en-us/web/api/touchevent/altkey/index.md
index 4a2aec0b53a3f75..b8a0dc7ac8d26e6 100644
--- a/files/en-us/web/api/touchevent/altkey/index.md
+++ b/files/en-us/web/api/touchevent/altkey/index.md
@@ -30,7 +30,7 @@ This example illustrates how to access the {{domxref("TouchEvent")}} key modifie
 In following code snippet, the {{domxref("Element/touchstart_event", "touchstart")}} event handler logs the state of the event's modifier keys.
 
 ```js
-someElement.addEventListener('touchstart', function(e) {
+someElement.addEventListener('touchstart', (e) => {
    // Log the state of this event's modifier keys
    console.log(`altKey = ${e.altKey}`);
    console.log(`ctrlKey = ${e.ctrlKey}`);
diff --git a/files/en-us/web/api/touchevent/changedtouches/index.md b/files/en-us/web/api/touchevent/changedtouches/index.md
index 5ff2c80754db8f6..2ef69b2261583cc 100644
--- a/files/en-us/web/api/touchevent/changedtouches/index.md
+++ b/files/en-us/web/api/touchevent/changedtouches/index.md
@@ -33,7 +33,7 @@ This example illustrates the {{domxref("TouchEvent")}} object's {{domxref("Touch
 In following code snippet, the {{domxref("Element/touchmove_event", "touchmove")}} event handler iterates through the `changedTouches` list and prints the identifier of each touch point that changed since the last event.
 
 ```js
-someElement.addEventListener('touchmove', function(e) {
+someElement.addEventListener('touchmove', (e) => {
    // Iterate through the list of touch points that changed
    // since the last event and print each touch point's identifier.
    for (let i = 0; i < e.changedTouches.length; i++) {
diff --git a/files/en-us/web/api/touchevent/touches/index.md b/files/en-us/web/api/touchevent/touches/index.md
index ea8ce564b9d9fb0..8138e2c54cf67ca 100644
--- a/files/en-us/web/api/touchevent/touches/index.md
+++ b/files/en-us/web/api/touchevent/touches/index.md
@@ -42,7 +42,7 @@ that were activated and then invokes different handlers depending on the number
 points.
 
 ```js
-someElement.addEventListener('touchstart', function(e) {
+someElement.addEventListener('touchstart', (e) => {
    // Invoke the appropriate handler depending on the
    // number of touch points.
    switch (e.touches.length) {
diff --git a/files/en-us/web/api/touchlist/item/index.md b/files/en-us/web/api/touchlist/item/index.md
index 0e6124045e76c9a..32498e06f5ae1f5 100644
--- a/files/en-us/web/api/touchlist/item/index.md
+++ b/files/en-us/web/api/touchlist/item/index.md
@@ -45,7 +45,7 @@ This code example illustrates the use of the {{domxref("TouchList")}} interface'
 ```js
 const target = document.getElementById("target");
 
-target.addEventListener('touchstart', function(ev) {
+target.addEventListener('touchstart', (ev) => {
 
   // If this touchstart event started on element target,
   // set touch to the first item in the targetTouches list;
diff --git a/files/en-us/web/api/touchlist/length/index.md b/files/en-us/web/api/touchlist/length/index.md
index 2a674030db5e60a..3580c91ab5e9acc 100644
--- a/files/en-us/web/api/touchlist/length/index.md
+++ b/files/en-us/web/api/touchlist/length/index.md
@@ -31,7 +31,7 @@ This code example illustrates the use of the {{domxref("TouchList")}} interface'
 ```js
 const target = document.getElementById("target");
 
-target.addEventListener('touchstart', function(ev) {
+target.addEventListener('touchstart', (ev) => {
 
   // If this touchstart event started on element target,
   // set touch to the first item in the targetTouches list;
diff --git a/files/en-us/web/api/userproximityevent/index.md b/files/en-us/web/api/userproximityevent/index.md
index ba23f73fbbaf4ce..a87081b8e66bee7 100644
--- a/files/en-us/web/api/userproximityevent/index.md
+++ b/files/en-us/web/api/userproximityevent/index.md
@@ -25,7 +25,7 @@ The **`UserProximityEvent`** indicates whether a nearby physical object is prese
 ## Examples
 
 ```js
-window.addEventListener('userproximity', function(event) {
+window.addEventListener('userproximity', (event) => {
   if (event.near) {
     // let's power off the screen
     navigator.mozPower.screenEnabled = false;
diff --git a/files/en-us/web/api/vibration_api/index.md b/files/en-us/web/api/vibration_api/index.md
index 4f87410ce0d9468..e792b9f0c19f965 100644
--- a/files/en-us/web/api/vibration_api/index.md
+++ b/files/en-us/web/api/vibration_api/index.md
@@ -66,7 +66,7 @@ function stopVibrate() {
 // Start persistent vibration at given duration and interval
 // Assumes a number value is given
 function startPersistentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
+    vibrateInterval = setInterval(() => {
         startVibrate(duration);
     }, interval);
 }
diff --git a/files/en-us/web/api/videotrack/label/index.md b/files/en-us/web/api/videotrack/label/index.md
index 4180ff90b92e891..b0310e82d17960d 100644
--- a/files/en-us/web/api/videotrack/label/index.md
+++ b/files/en-us/web/api/videotrack/label/index.md
@@ -42,12 +42,12 @@ only allow certain track kinds through.
 
 ```js
 function getTrackList(el) {
-  let trackList = [];
+  cons trackList = [];
   const wantedKinds = [
     "main", "alternative", "commentary"
   ];
 
-  el.videoTracks.forEach(function(track) {
+  el.videoTracks.forEach((track) => {
     if (wantedKinds.includes(track.kind)) {
       trackList.push({
         id: track.id,
diff --git a/files/en-us/web/api/visualviewport/resize_event/index.md b/files/en-us/web/api/visualviewport/resize_event/index.md
index d92f640bf419a29..b4372e2caabc68b 100644
--- a/files/en-us/web/api/visualviewport/resize_event/index.md
+++ b/files/en-us/web/api/visualviewport/resize_event/index.md
@@ -33,7 +33,7 @@ A generic {{domxref("Event")}}.
 You can use the `resize` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-visualViewport.addEventListener('resize', function() {
+visualViewport.addEventListener('resize', () => {
   // …
 });
 ```
@@ -41,7 +41,7 @@ visualViewport.addEventListener('resize', function() {
 Or use the `onresize` event handler property:
 
 ```js
-visualViewport.onresize = function() {
+visualViewport.onresize = () => {
   // …
 };
 ```
diff --git a/files/en-us/web/api/visualviewport/scroll_event/index.md b/files/en-us/web/api/visualviewport/scroll_event/index.md
index 616c13ce2381c0e..abb05f7db129ec1 100644
--- a/files/en-us/web/api/visualviewport/scroll_event/index.md
+++ b/files/en-us/web/api/visualviewport/scroll_event/index.md
@@ -33,7 +33,7 @@ A generic {{domxref("Event")}}.
 You can use the `scroll` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-visualViewport.addEventListener('scroll', function() {
+visualViewport.addEventListener('scroll', () => {
   // …
 });
 ```
@@ -41,7 +41,7 @@ visualViewport.addEventListener('scroll', function() {
 Or use the `onscroll` event handler property:
 
 ```js
-visualViewport.onscroll = function() {
+visualViewport.onscroll = () => {
   // …
 };
 ```
diff --git a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
index 9c2e3b2a46592a6..d3fb697dce5fc40 100644
--- a/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/cancelanimationframe/index.md
@@ -46,15 +46,15 @@ drawScene();
 if(navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
     if(displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
+      btn.addEventListener('click', () => {
         if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport
diff --git a/files/en-us/web/api/vrdisplay/depthfar/index.md b/files/en-us/web/api/vrdisplay/depthfar/index.md
index 4508c75f07a8623..18f489eef8e4a05 100644
--- a/files/en-us/web/api/vrdisplay/depthfar/index.md
+++ b/files/en-us/web/api/vrdisplay/depthfar/index.md
@@ -32,7 +32,7 @@ It initial value is `10000.0`.
 ```js
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   vrDisplay.depthNear = 1.0;
   vrDisplay.depthFar = 7500.0;
diff --git a/files/en-us/web/api/vrdisplay/depthnear/index.md b/files/en-us/web/api/vrdisplay/depthnear/index.md
index e0a70ec3fb34ad7..bff3259730dffa4 100644
--- a/files/en-us/web/api/vrdisplay/depthnear/index.md
+++ b/files/en-us/web/api/vrdisplay/depthnear/index.md
@@ -31,7 +31,7 @@ A double, representing the z-depth in meters; its initial value is `0.01`.
 ```js
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   vrDisplay.depthNear = 1.0;
   vrDisplay.depthFar = 7500.0;
diff --git a/files/en-us/web/api/vrdisplay/exitpresent/index.md b/files/en-us/web/api/vrdisplay/exitpresent/index.md
index 5358b54d0326e8b..bd57ebf782d8cc4 100644
--- a/files/en-us/web/api/vrdisplay/exitpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/exitpresent/index.md
@@ -40,15 +40,15 @@ A promise that resolves once the presentation has ended. If the `VRDisplay` is n
 if(navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
     if(displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
+      btn.addEventListener('click', () => {
         if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport
diff --git a/files/en-us/web/api/vrdisplay/getframedata/index.md b/files/en-us/web/api/vrdisplay/getframedata/index.md
index 36285fc842f208a..d6a86feeea4c6f6 100644
--- a/files/en-us/web/api/vrdisplay/getframedata/index.md
+++ b/files/en-us/web/api/vrdisplay/getframedata/index.md
@@ -43,12 +43,12 @@ A boolean value — a value of `true` is returned if the {{domxref("VRFrameData"
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });
diff --git a/files/en-us/web/api/vrdisplay/getpose/index.md b/files/en-us/web/api/vrdisplay/getpose/index.md
index b0b6470897097f9..44ae1a8643533a4 100644
--- a/files/en-us/web/api/vrdisplay/getpose/index.md
+++ b/files/en-us/web/api/vrdisplay/getpose/index.md
@@ -41,12 +41,12 @@ A {{domxref("VRPose")}} object.
 Once we have a reference to a {{domxref("VRDisplay")}} object, we can retrieve the {{domxref("VRPose")}} representing the current pose of the display.
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
 
diff --git a/files/en-us/web/api/vrdisplay/index.md b/files/en-us/web/api/vrdisplay/index.md
index 6627c385718bb52..77e10b057fe4637 100644
--- a/files/en-us/web/api/vrdisplay/index.md
+++ b/files/en-us/web/api/vrdisplay/index.md
@@ -70,12 +70,12 @@ An array of all connected VR Devices can be returned by invoking the {{domxref("
 ## Examples
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       // Now we have our VRDisplay object and can do what we want with it
     }
diff --git a/files/en-us/web/api/vrdisplay/isconnected/index.md b/files/en-us/web/api/vrdisplay/isconnected/index.md
index 28d5f44f1df4a2a..e41c1016e9ecb40 100644
--- a/files/en-us/web/api/vrdisplay/isconnected/index.md
+++ b/files/en-us/web/api/vrdisplay/isconnected/index.md
@@ -27,16 +27,16 @@ A boolean value; `true` means the display is connected; `false` means it isn't.
 ## Examples
 
 ```js
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   // If a display is available, use it to present the scene
-  if(displays.length > 0) {
+  if (displays.length > 0) {
     vrDisplay = displays[0];
 
     // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-    btn.addEventListener('click', function() {
+    btn.addEventListener('click', () => {
       // Only request presentation if the display is still connected.
-      if(vrDisplay.isConnected) {
-        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      if (vrDisplay.isConnected) {
+        vrDisplay.requestPresent([{ source: canvas }]).then(() => {
           // start rendering the app, etc.
         });
       } else {
diff --git a/files/en-us/web/api/vrdisplay/ispresenting/index.md b/files/en-us/web/api/vrdisplay/ispresenting/index.md
index 0eccdc8b022a472..92b7d57b629b172 100644
--- a/files/en-us/web/api/vrdisplay/ispresenting/index.md
+++ b/files/en-us/web/api/vrdisplay/ispresenting/index.md
@@ -33,9 +33,9 @@ function onVRExitPresent () {
   // we weren't presenting.)
   if (!vrDisplay.isPresenting)
     return;
-  vrDisplay.exitPresent().then(function () {
+  vrDisplay.exitPresent().then(() => {
     // Nothing to do because we're handling things in onVRPresentChange.
-  }, function (err) {
+  }, (err) => {
     let errMsg = "exitPresent failed.";
     if (err && err.message) {
       errMsg += `<br/>${err.message}`;
diff --git a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
index 0151234f1c3a298..3fff86eb5f98ac5 100644
--- a/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
+++ b/files/en-us/web/api/vrdisplay/requestanimationframe/index.md
@@ -44,12 +44,12 @@ A long representing the handle of the `requestAnimationFrame()` call. This can t
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });
diff --git a/files/en-us/web/api/vrdisplay/requestpresent/index.md b/files/en-us/web/api/vrdisplay/requestpresent/index.md
index 2ebb0ac5b983cf9..2c7663f2b3e9988 100644
--- a/files/en-us/web/api/vrdisplay/requestpresent/index.md
+++ b/files/en-us/web/api/vrdisplay/requestpresent/index.md
@@ -43,18 +43,18 @@ A promise that resolves once the presentation has begun. there are a number of r
 ## Examples
 
 ```js
-if(navigator.getVRDisplays) {
+if (navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
-        if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      btn.addEventListener('click', () => {
+        if (btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
             console.log('Presenting to WebVR display');
 
             // Set the canvas size to the size of the vrDisplay viewport
diff --git a/files/en-us/web/api/vrdisplay/resetpose/index.md b/files/en-us/web/api/vrdisplay/resetpose/index.md
index 09e0f15de3b5e8e..845fa052b78448e 100644
--- a/files/en-us/web/api/vrdisplay/resetpose/index.md
+++ b/files/en-us/web/api/vrdisplay/resetpose/index.md
@@ -43,7 +43,7 @@ None ({{jsxref("undefined")}}).
 ```js
 // Assuming vrDisplay already contains a VRDisplay object,
 // and we have a <button> referenced inside btn
-btn.addEventListener('click', function() {
+btn.addEventListener('click', () => {
   vrDisplay.resetPose();
   console.log('Current pose set as origin/center');
 });
diff --git a/files/en-us/web/api/vrdisplay/submitframe/index.md b/files/en-us/web/api/vrdisplay/submitframe/index.md
index abf4e6493561164..08cdd85ebf63ef9 100644
--- a/files/en-us/web/api/vrdisplay/submitframe/index.md
+++ b/files/en-us/web/api/vrdisplay/submitframe/index.md
@@ -42,12 +42,12 @@ None ({{jsxref("undefined")}}).
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });
diff --git a/files/en-us/web/api/vrdisplaycapabilities/index.md b/files/en-us/web/api/vrdisplaycapabilities/index.md
index 6f1a20ca5ee53ba..3a4687164303b9b 100644
--- a/files/en-us/web/api/vrdisplaycapabilities/index.md
+++ b/files/en-us/web/api/vrdisplaycapabilities/index.md
@@ -38,7 +38,7 @@ This interface is accessible through the {{domxref("VRDisplay.capabilities")}} p
 
 ```js
 function reportDisplays() {
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     for (let i = 0; i < displays.length; i++) {
       const cap = displays[i].capabilities;
       // cap is a VRDisplayCapabilities object
diff --git a/files/en-us/web/api/vrdisplayevent/display/index.md b/files/en-us/web/api/vrdisplayevent/display/index.md
index 657abdd754c4fae..ddaeda44ab1fd24 100644
--- a/files/en-us/web/api/vrdisplayevent/display/index.md
+++ b/files/en-us/web/api/vrdisplayevent/display/index.md
@@ -27,7 +27,7 @@ A {{domxref("VRDisplay")}} object.
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
     console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
   })
 ```
diff --git a/files/en-us/web/api/vrdisplayevent/index.md b/files/en-us/web/api/vrdisplayevent/index.md
index 6a02ca6fede49a4..d8d241e49c1a1a4 100644
--- a/files/en-us/web/api/vrdisplayevent/index.md
+++ b/files/en-us/web/api/vrdisplayevent/index.md
@@ -36,7 +36,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
   console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
 })
 ```
diff --git a/files/en-us/web/api/vrdisplayevent/reason/index.md b/files/en-us/web/api/vrdisplayevent/reason/index.md
index f197234763ca789..813025c2d332bd9 100644
--- a/files/en-us/web/api/vrdisplayevent/reason/index.md
+++ b/files/en-us/web/api/vrdisplayevent/reason/index.md
@@ -33,7 +33,7 @@ A string representing the reason why the event was fired. The available reasons
 ## Examples
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
     console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
   })
 ```
diff --git a/files/en-us/web/api/vreyeparameters/index.md b/files/en-us/web/api/vreyeparameters/index.md
index 0b5a289cd760d4d..59b617c5e7e656b 100644
--- a/files/en-us/web/api/vreyeparameters/index.md
+++ b/files/en-us/web/api/vreyeparameters/index.md
@@ -37,14 +37,14 @@ This interface is accessible through the {{domxref("VRDisplay.getEyeParameters()
 ## Examples
 
 ```js
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   // If a display is available, use it to present the scene
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked:
   //   It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       console.log('Presenting to WebVR display');
 
       // Set the canvas size to the size of the vrDisplay viewport
diff --git a/files/en-us/web/api/vrfieldofview/index.md b/files/en-us/web/api/vrfieldofview/index.md
index 62f80a1da1aa977..46a5fa9100a3031 100644
--- a/files/en-us/web/api/vrfieldofview/index.md
+++ b/files/en-us/web/api/vrfieldofview/index.md
@@ -44,7 +44,7 @@ if(navigator.getVRDisplays) {
 }
 
 function reportFieldOfView() {
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     vrDisplay = displays[0];
     const lEye = vrDisplay.getEyeParameters('left');
     const rEye = vrDisplay.getEyeParameters('right');
diff --git a/files/en-us/web/api/vrframedata/timestamp/index.md b/files/en-us/web/api/vrframedata/timestamp/index.md
index 3d74c0887badfdf..b4709098258859c 100644
--- a/files/en-us/web/api/vrframedata/timestamp/index.md
+++ b/files/en-us/web/api/vrframedata/timestamp/index.md
@@ -34,12 +34,12 @@ A {{domxref("DOMHighResTimeStamp")}} object.
 const frameData = new VRFrameData();
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   console.log('Display found');
   // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+  btn.addEventListener('click', () => {
+    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
       drawVRScene();
     });
   });
diff --git a/files/en-us/web/api/vrlayerinit/index.md b/files/en-us/web/api/vrlayerinit/index.md
index 97109decedf90f0..e156c3d43bae84d 100644
--- a/files/en-us/web/api/vrlayerinit/index.md
+++ b/files/en-us/web/api/vrlayerinit/index.md
@@ -39,14 +39,14 @@ let layers = vrDisplay.getLayers();
 if(navigator.getVRDisplays) {
   console.log('WebVR 1.1 supported');
   // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     // If a display is available, use it to present the scene
-    if(displays.length > 0) {
+    if (displays.length > 0) {
       vrDisplay = displays[0];
       console.log('Display found');
       // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
-        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      btn.addEventListener('click', () => {
+        vrDisplay.requestPresent([{ source: canvas }]).then(() => {
           console.log('Presenting to WebVR display');
 
           // Here it returns an array of VRLayerInit objects
diff --git a/files/en-us/web/api/vrstageparameters/index.md b/files/en-us/web/api/vrstageparameters/index.md
index a7be72d4ed53602..654d581c28e1546 100644
--- a/files/en-us/web/api/vrstageparameters/index.md
+++ b/files/en-us/web/api/vrstageparameters/index.md
@@ -36,12 +36,12 @@ This interface is accessible through the {{domxref("VRDisplay.stageParameters")}
 const info = document.querySelector('p');
 let vrDisplay;
 
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then((displays) => {
   vrDisplay = displays[0];
   const stageParams = vrDisplay.stageParameters;
   // stageParams is a VRStageParameters object
 
-  if(stageParams === null) {
+  if (stageParams === null) {
     info.textContent = 'Your VR Hardware does not support room-scale experiences.'
   } else {
     info.innerHTML = `<strong>Display stage parameters</strong><br>` +
diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
index fe18836f7a7fcea..f7bfb54b7207a45 100644
--- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -187,7 +187,7 @@ nommingCake.play();
 Specifically, we want to link it to Alice's animation, so she gets bigger as the cupcake gets eaten. We can achieve this via the following function:
 
 ```js
-const growAlice = function() {
+const growAlice = () => {
 
   // Play Alice's animation.
   aliceChange.play();
@@ -216,7 +216,7 @@ In addition to pausing and playing, we can use the following Animation methods:
 Let's take a look at `playbackRate` first — a negative playbackRate will cause an animation to run in reverse. When Alice drinks from the bottle, she grows smaller. This is because the bottle changes her animation's playbackRate from 1 to -1:
 
 ```js
-const shrinkAlice = function() {
+const shrinkAlice = () => {
   aliceChange.playbackRate = -1;
   aliceChange.play();
 }
@@ -243,7 +243,7 @@ setInterval(() => {
 But urging them on by clicking or tapping causes them to speed up by multiplying their playbackRate:
 
 ```js
-const goFaster = function() {
+const goFaster = () => {
   redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
 }
 
@@ -258,11 +258,9 @@ The background elements also have `playbackRate`s that are impacted when you cli
 Imagine other ways we could use playbackRate, such as improving accessibility for users with vestibular disorders by letting them slow down animations across an entire site. That's impossible to do with CSS without recalculating durations in every CSS rule, but with the Web Animations API, we could use the {{domxref("Document.getAnimations")}} method to loop over each animation on the page and halve their `playbackRate`s, like so:
 
 ```js
-document.getAnimations().forEach(
-  function (animation) {
-    animation.updatePlaybackRate(animation.playbackRate * .5);
-  }
-);
+document.getAnimations().forEach((animation) => {
+  animation.updatePlaybackRate(animation.playbackRate * 0.5);
+});
 ```
 
 With the Web Animations API, all you need to change is just one little property!
@@ -331,7 +329,7 @@ Now all three animations are linked to just one duration, which we can change ea
 We can also use the Web Animations API to figure out the animation's current time. The game ends when you run out of cake to eat or empty the bottle. Which vignette players are presented with depends on how far along Alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. We can figure out whether she's on the large end or small end of her animation by getting her animation's [`currentTime`](/en-US/docs/Web/API/Animation/currentTime) and dividing it by her `activeDuration`:
 
 ```js
-const endGame = function() {
+const endGame = () => {
 
   // get Alice's timeline's playhead location
   const alicePlayhead = aliceChange.currentTime;
diff --git a/files/en-us/web/api/web_audio_api/best_practices/index.md b/files/en-us/web/api/web_audio_api/best_practices/index.md
index 3ed6fa76a752513..1a44214f450abaf 100644
--- a/files/en-us/web/api/web_audio_api/best_practices/index.md
+++ b/files/en-us/web/api/web_audio_api/best_practices/index.md
@@ -52,8 +52,9 @@ When working with an {{domxref("AudioContext")}}, if you create the audio contex
 
 ```js
 const button = document.querySelector('button');
-button.addEventListener('click', function() {
-    const audioCtx = new AudioContext();
+button.addEventListener('click', () => {
+  const audioCtx = new AudioContext();
+  // Do something with the audio context
 }, false);
 ```
 
@@ -63,11 +64,11 @@ If however, you create the context outside of a user gesture, its state will be
 const audioCtx = new AudioContext();
 const button = document.querySelector('button');
 
-button.addEventListener('click', function() {
-      // check if context is in suspended state (autoplay policy)
-    if (audioCtx.state === 'suspended') {
-        audioCtx.resume();
-    }
+button.addEventListener('click', () => {
+  // check if context is in suspended state (autoplay policy)
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume();
+  }
 }, false);
 ```
 
diff --git a/files/en-us/web/api/web_audio_api/simple_synth/index.md b/files/en-us/web/api/web_audio_api/simple_synth/index.md
index 5b4e212e2bca8f4..fb72f4a39f9daa5 100644
--- a/files/en-us/web/api/web_audio_api/simple_synth/index.md
+++ b/files/en-us/web/api/web_audio_api/simple_synth/index.md
@@ -184,8 +184,8 @@ On the right side of the settings bar, we place a label and a {{HTMLElement("sel
 The JavaScript code begins by initializing a number of variables.
 
 ```js
-let audioContext = new (window.AudioContext || window.webkitAudioContext)();
-let oscList = [];
+const audioContext = new AudioContext();
+const oscList = [];
 let mainGainNode = null;
 ```
 
@@ -194,9 +194,9 @@ let mainGainNode = null;
 3. `mainGainNode` is set to null; during the setup process, it will be configured to contain a {{domxref("GainNode")}} which all playing oscillators will connect to and play through to allow the overall volume to be controlled using a single slider control.
 
 ```js
-let keyboard = document.querySelector(".keyboard");
-let wavePicker = document.querySelector("select[name='waveform']");
-let volumeControl = document.querySelector("input[name='volume']");
+const keyboard = document.querySelector(".keyboard");
+const wavePicker = document.querySelector("select[name='waveform']");
+const volumeControl = document.querySelector("input[name='volume']");
 ```
 
 References to elements we'll need access to are obtained:
@@ -224,7 +224,7 @@ The `createNoteTable()` function builds the array `noteFreq` to contain an array
 
 ```js
 function createNoteTable() {
-  let noteFreq = [];
+  const noteFreq = [];
   for (let i=0; i< 9; i++) {
     noteFreq[i] = [];
   }
@@ -391,9 +391,9 @@ With this table in place, we can find out the frequency for a given note in a pa
 
 ```js hidden
 if (!Object.entries) {
-    Object.entries = function entries(O) {
-        return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
-    };
+  Object.entries = function entries(O) {
+    return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
+  };
 }
 ```
 
@@ -415,12 +415,12 @@ function setup() {
   // our purposes we don't need them. Each octave is inserted
   // into a <div> of class "octave".
 
-  noteFreq.forEach(function(keys, idx) {
-    let keyList = Object.entries(keys);
-    let octaveElem = document.createElement("div");
+  noteFreq.forEach((keys, idx) => {
+    const keyList = Object.entries(keys);
+    const octaveElem = document.createElement("div");
     octaveElem.className = "octave";
 
-    keyList.forEach(function(key) {
+    keyList.forEach((key) => {
       if (key[0].length === 1) {
         octaveElem.appendChild(createKey(key[0], idx, key[1]));
       }
@@ -435,8 +435,8 @@ function setup() {
   cosineTerms = new Float32Array(sineTerms.length);
   customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
 
-  for (i=0; i<9; i++) {
-      oscList[i] = {};
+  for (let i = 0; i < 9; i++) {
+    oscList[i] = {};
   }
 }
 
@@ -459,8 +459,8 @@ The `createKey()` function is called once for each key that we want to present i
 
 ```js
 function createKey(note, octave, freq) {
-  let keyElement = document.createElement("div");
-  let labelElement = document.createElement("div");
+  const keyElement = document.createElement("div");
+  const labelElement = document.createElement("div");
 
   keyElement.className = "key";
   keyElement.dataset["octave"] = octave;
@@ -489,10 +489,10 @@ The `playTone()` function's job is to play a tone at the given frequency. This w
 
 ```js
 function playTone(freq) {
-  let osc = audioContext.createOscillator();
+  const osc = audioContext.createOscillator();
   osc.connect(mainGainNode);
 
-  let type = wavePicker.options[wavePicker.selectedIndex].value;
+  const type = wavePicker.options[wavePicker.selectedIndex].value;
 
   if (type === "custom") {
     osc.setPeriodicWave(customWaveform);
@@ -520,10 +520,10 @@ When the {{domxref("Element/mousedown_event", "mousedown")}} or {{domxref("Eleme
 ```js
 function notePressed(event) {
   if (event.buttons & 1) {
-    let dataset = event.target.dataset;
+    const dataset = event.target.dataset;
 
     if (!dataset["pressed"]) {
-      let octave = +dataset["octave"];
+      const octave = Number(dataset["octave"]);
       oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
       dataset["pressed"] = "yes";
     }
@@ -541,10 +541,10 @@ The `noteReleased()` function is the event handler called when the user releases
 
 ```js
 function noteReleased(event) {
-  let dataset = event.target.dataset;
+  const dataset = event.target.dataset;
 
   if (dataset && dataset["pressed"]) {
-    let octave = +dataset["octave"];
+    const octave = Number(dataset["octave"]);
     oscList[octave][dataset["note"]].stop();
     delete oscList[octave][dataset["note"]];
     delete dataset["pressed"];
diff --git a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
index 8d3f087be16d585..5f80f7c12dc92e8 100644
--- a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
+++ b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md
@@ -51,13 +51,13 @@ When creating an IIR filter, we pass in the `feedforward` and `feedback` coeffic
 When setting our coefficients, the `feedforward` values can't all be set to zero, otherwise nothing would be sent to the filter. Something like this is acceptable:
 
 ```js
-let feedForward = [0.00020298, 0.0004059599, 0.00020298];
+const feedForward = [0.00020298, 0.0004059599, 0.00020298];
 ```
 
 Our `feedback` values cannot start with zero, otherwise on the first pass nothing would be sent back:
 
 ```js
-let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442];
+const feedBackward = [1.0126964558, -1.9991880801, 0.9873035442];
 ```
 
 > **Note:** These values are calculated based on the lowpass filter specified in the [filter characteristics of the Web Audio API specification](https://webaudio.github.io/web-audio-api/#filters-characteristics). As this filter node gains more popularity we should be able to collate more coefficient values.
@@ -67,7 +67,6 @@ let feedBackward = [1.0126964558, -1.9991880801, 0.9873035442];
 Let's create our context and our filter node:
 
 ```js
-const AudioContext = window.AudioContext || window.webkitAudioContext;
 const audioCtx = new AudioContext();
 
 const iirFilter = audioCtx.createIIRFilter(feedForward, feedBack);
@@ -94,11 +93,11 @@ This function is called when the play button is pressed. The play button HTML lo
 And the `click` event listener starts like so:
 
 ```js
-playButton.addEventListener('click', function() {
-    if (this.dataset.playing === 'false') {
-        srcNode = playSourceNode(audioCtx, sample);
-        // …
-    }
+playButton.addEventListener('click', () => {
+  if (playButton.dataset.playing === 'false') {
+    srcNode = playSourceNode(audioCtx, sample);
+     // …
+  }
 }, false);
 ```
 
@@ -111,12 +110,12 @@ The toggle that turns the IIR filter on and off is set up in the similar way. Fi
 The filter button's `click` handler then connects the `IIRFilter` up to the graph, between the source and the destination:
 
 ```js
-filterButton.addEventListener('click', function() {
-    if (this.dataset.filteron === 'false') {
-        srcNode.disconnect(audioCtx.destination);
-        srcNode.connect(iirfilter).connect(audioCtx.destination);
-        // …
-    }
+filterButton.addEventListener('click', () => {
+  if (filterButton.dataset.filteron === 'false') {
+    srcNode.disconnect(audioCtx.destination);
+    srcNode.connect(iirfilter).connect(audioCtx.destination);
+    // …
+  }
 }, false);
 ```
 
@@ -132,16 +131,14 @@ We need to create three arrays. One of frequency values for which we want to rec
 // arrays for our frequency response
 const totalArrayItems = 30;
 let myFrequencyArray = new Float32Array(totalArrayItems);
-let magResponseOutput = new Float32Array(totalArrayItems);
-let phaseResponseOutput = new Float32Array(totalArrayItems);
+const magResponseOutput = new Float32Array(totalArrayItems);
+const phaseResponseOutput = new Float32Array(totalArrayItems);
 ```
 
 Let's fill our first array with frequency values we want data to be returned on:
 
 ```js
-myFrequencyArray = myFrequencyArray.map(function(item, index) {
-    return Math.pow(1.4, index);
-});
+myFrequencyArray = myFrequencyArray.map((item, index) => 1.4 ** index);
 ```
 
 We could go for a linear approach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that get larger further on in the array items.
@@ -155,27 +152,27 @@ iirFilter.getFrequencyResponse(myFrequencyArray, magResponseOutput, phaseRespons
 We can use this data to draw a filter frequency plot. We'll do so on a 2d canvas context.
 
 ```js
-// create a canvas element and append it to our DOM
+// Create a canvas element and append it to our DOM
 const canvasContainer = document.querySelector('.filter-graph');
 const canvasEl = document.createElement('canvas');
 canvasContainer.appendChild(canvasEl);
 
-// set 2d context and set dimensions
+// Set 2d context and set dimensions
 const canvasCtx = canvasEl.getContext('2d');
 const width = canvasContainer.offsetWidth;
 const height = canvasContainer.offsetHeight;
 canvasEl.width = width;
 canvasEl.height = height;
 
-// set background fill
+// Set background fill
 canvasCtx.fillStyle = 'white';
 canvasCtx.fillRect(0, 0, width, height);
 
-// set up some spacing based on size
-const spacing = width/16;
-const fontSize = Math.floor(spacing/1.5);
+// Set up some spacing based on size
+const spacing = width / 16;
+const fontSize = Math.floor(spacing / 1.5);
 
-// draw our axis
+// Draw our axis
 canvasCtx.lineWidth = 2;
 canvasCtx.strokeStyle = 'grey';
 
@@ -185,27 +182,30 @@ canvasCtx.lineTo(spacing, height-spacing);
 canvasCtx.lineTo(width-spacing, height-spacing);
 canvasCtx.stroke();
 
-// axis is gain by frequency -> make labels
+// Axis is gain by frequency -> make labels
 canvasCtx.font = `${fontSize}px sans-serif`;
 canvasCtx.fillStyle = 'grey';
-canvasCtx.fillText('1', spacing-fontSize, spacing+fontSize);
-canvasCtx.fillText('g', spacing-fontSize, (height-spacing+fontSize)/2);
-canvasCtx.fillText('0', spacing-fontSize, height-spacing+fontSize);
-canvasCtx.fillText('Hz', width/2, height-spacing+fontSize);
-canvasCtx.fillText('20k', width-spacing, height-spacing+fontSize);
-
-// loop over our magnitude response data and plot our filter
+canvasCtx.fillText('1', spacing - fontSize, spacing + fontSize);
+canvasCtx.fillText('g', spacing - fontSize, (height - spacing + fontSize) / 2);
+canvasCtx.fillText('0', spacing - fontSize, height - spacing + fontSize);
+canvasCtx.fillText('Hz', width / 2, height - spacing + fontSize);
+canvasCtx.fillText('20k', width - spacing, height - spacing + fontSize);
 
+// Loop over our magnitude response data and plot our filter
 canvasCtx.beginPath();
 
 for (let i = 0; i < magResponseOutput.length; i++) {
-
-    if (i === 0) {
-        canvasCtx.moveTo(spacing, height-(magResponseOutput[i]*100)-spacing );
-    } else {
-        canvasCtx.lineTo((width/totalArrayItems)*i, height-(magResponseOutput[i]*100)-spacing );
-    }
-
+  if (i === 0) {
+    canvasCtx.moveTo(
+      spacing,
+      height - magResponseOutput[i] * 100 - spacing,
+    );
+  } else {
+    canvasCtx.lineTo(
+      width / totalArrayItems * i,
+      height - magResponseOutput[i] * 100 - spacing,
+    );
+  }
 }
 
 canvasCtx.stroke();
diff --git a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
index fe8674b4adfa83b..f4430a420aab49d 100644
--- a/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/en-us/web/api/web_audio_api/using_web_audio_api/index.md
@@ -112,25 +112,23 @@ A good way to visualize these nodes is by drawing an audio graph so you can visu
 Now we can add the play and pause functionality.
 
 ```js
-// select our play button
+// Select our play button
 const playButton = document.querySelector('button');
 
-playButton.addEventListener('click', function() {
-
-    // check if context is in suspended state (autoplay policy)
-    if (audioContext.state === 'suspended') {
-        audioContext.resume();
-    }
-
-    // play or pause track depending on state
-    if (this.dataset.playing === 'false') {
-        audioElement.play();
-        this.dataset.playing = 'true';
-    } else if (this.dataset.playing === 'true') {
-        audioElement.pause();
-        this.dataset.playing = 'false';
-    }
-
+playButton.addEventListener('click', () => {
+  // Check if context is in suspended state (autoplay policy)
+  if (audioContext.state === 'suspended') {
+    audioContext.resume();
+  }
+
+  // Play or pause track depending on state
+  if (playButton.dataset.playing === 'false') {
+    audioElement.play();
+    playButton.dataset.playing = 'true';
+  } else if (playButton.dataset.playing === 'true') {
+    audioElement.pause();
+    playButton.dataset.playing = 'false';
+  }
 }, false);
 ```
 
@@ -138,7 +136,7 @@ We also need to take into account what to do when the track finishes playing. Ou
 
 ```js
 audioElement.addEventListener('ended', () => {
-    playButton.dataset.playing = 'false';
+  playButton.dataset.playing = 'false';
 }, false);
 ```
 
@@ -177,8 +175,8 @@ So let's grab this input's value and update the gain value when the input node h
 ```js
 const volumeControl = document.querySelector('#volume');
 
-volumeControl.addEventListener('input', function() {
-    gainNode.gain.value = this.value;
+volumeControl.addEventListener('input', () => {
+  gainNode.gain.value = volumeControl.value;
 }, false);
 ```
 
@@ -220,8 +218,8 @@ We use the values from that input to adjust our panner values in the same way as
 ```js
 const pannerControl = document.querySelector('#panner');
 
-pannerControl.addEventListener('input', function() {
-    panner.pan.value = this.value;
+pannerControl.addEventListener('input', () => {
+  panner.pan.value = pannerControl.value;
 }, false);
 ```
 
diff --git a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index cfb9cc11a049234..55357adc152494e 100644
--- a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -155,20 +155,20 @@ Let's use the relevant constructor for creating our panner node and pass in all
 
 ```js
 const panner = new PannerNode(audioCtx, {
-    panningModel: pannerModel,
-    distanceModel: distanceModel,
-    positionX: positionX,
-    positionY: positionY,
-    positionZ: positionZ,
-    orientationX: orientationX,
-    orientationY: orientationY,
-    orientationZ: orientationZ,
-    refDistance: refDistance,
-    maxDistance: maxDistance,
-    rolloffFactor: rollOff,
-    coneInnerAngle: innerCone,
-    coneOuterAngle: outerCone,
-    coneOuterGain: outerGain
+  panningModel: pannerModel,
+  distanceModel: distanceModel,
+  positionX: positionX,
+  positionY: positionY,
+  positionZ: positionZ,
+  orientationX: orientationX,
+  orientationY: orientationY,
+  orientationZ: orientationZ,
+  refDistance: refDistance,
+  maxDistance: maxDistance,
+  rolloffFactor: rollOff,
+  coneInnerAngle: innerCone,
+  coneOuterAngle: outerCone,
+  coneOuterGain: outerGain
 })
 ```
 
@@ -187,12 +187,12 @@ const moveControls = document.querySelector('#move-controls').querySelectorAll('
 const boombox = document.querySelector('.boombox-body');
 
 // the values for our CSS transforms
-let transform = {
-    xAxis: 0,
-    yAxis: 0,
-    zAxis: 0.8,
-    rotateX: 0,
-    rotateY: 0
+const transform = {
+  xAxis: 0,
+  yAxis: 0,
+  zAxis: 0.8,
+  rotateX: 0,
+  rotateY: 0
 }
 
 // set our bounds
@@ -211,32 +211,32 @@ We'll move the boombox along these axis and update the appropriate position.
 
 ```js
 function moveBoombox(direction) {
-    switch (direction) {
-        case 'left':
-            if (transform.xAxis > leftBound) {
-                transform.xAxis -= 5;
-                panner.positionX.value -= 0.1;
-            }
-        break;
-        case 'up':
-            if (transform.yAxis > topBound) {
-                transform.yAxis -= 5;
-                panner.positionY.value -= 0.3;
-            }
-        break;
-        case 'right':
-            if (transform.xAxis < rightBound) {
-                transform.xAxis += 5;
-                panner.positionX.value += 0.1;
-            }
-        break;
-        case 'down':
-            if (transform.yAxis < bottomBound) {
-                transform.yAxis += 5;
-                panner.positionY.value += 0.3;
-            }
-        break;
-    }
+  switch (direction) {
+    case 'left':
+      if (transform.xAxis > leftBound) {
+        transform.xAxis -= 5;
+        panner.positionX.value -= 0.1;
+      }
+      break;
+    case 'up':
+      if (transform.yAxis > topBound) {
+        transform.yAxis -= 5;
+        panner.positionY.value -= 0.3;
+      }
+      break;
+    case 'right':
+      if (transform.xAxis < rightBound) {
+        transform.xAxis += 5;
+        panner.positionX.value += 0.1;
+      }
+      break;
+    case 'down':
+      if (transform.yAxis < bottomBound) {
+        transform.yAxis += 5;
+        panner.positionY.value += 0.3;
+      }
+      break;
+  }
 }
 ```
 
@@ -244,17 +244,17 @@ It's a similar story for our move in and out values too:
 
 ```js
 case 'back':
-    if (transform.zAxis > innerBound) {
-        transform.zAxis -= 0.01;
-        panner.positionZ.value += 40;
-    }
-break;
+  if (transform.zAxis > innerBound) {
+    transform.zAxis -= 0.01;
+    panner.positionZ.value += 40;
+  }
+  break;
 case 'forward':
-    if (transform.zAxis < outerBound) {
-        transform.zAxis += 0.01;
-        panner.positionZ.value -= 40;
-    }
-break;
+  if (transform.zAxis < outerBound) {
+    transform.zAxis += 0.01;
+    panner.positionZ.value -= 40;
+  }
+  break;
 ```
 
 Our rotation values are a little more involved, however, as we need to move the sound _around_.
@@ -292,7 +292,7 @@ case 'rotate-left':
   panner.orientationX.value = x;
   panner.orientationY.value = y;
   panner.orientationZ.value = z;
-break;
+  break;
 ```
 
 This _is_ a little confusing, but what we're doing is using sin and cos to help us work out the circular motion the coordinates need for the rotation of the boombox.
@@ -309,7 +309,7 @@ case 'rotate-right':
   panner.orientationX.value = x;
   panner.orientationY.value = y;
   panner.orientationZ.value = z;
-break;
+  break;
 case 'rotate-up':
   transform.rotateX += degreesX;
   // 'up' is rotation about x-axis with negative angle increment
@@ -319,7 +319,7 @@ case 'rotate-up':
   panner.orientationX.value = x;
   panner.orientationY.value = y;
   panner.orientationZ.value = z;
-break;
+  break;
 case 'rotate-down':
   transform.rotateX -= degreesX;
   // 'down' is rotation about x-axis with positive angle increment
@@ -329,7 +329,7 @@ case 'rotate-down':
   panner.orientationX.value = x;
   panner.orientationY.value = y;
   panner.orientationZ.value = z;
-break;
+  break;
 ```
 
 One last thing — we need to update the CSS and keep a reference of the last move for the mouse event.
@@ -337,86 +337,86 @@ Here's the final `moveBoombox` function.
 
 ```js
 function moveBoombox(direction, prevMove) {
-    switch (direction) {
-        case 'left':
-            if (transform.xAxis > leftBound) {
-                transform.xAxis -= 5;
-                panner.positionX.value -= 0.1;
-            }
-        break;
-        case 'up':
-            if (transform.yAxis > topBound) {
-                transform.yAxis -= 5;
-                panner.positionY.value -= 0.3;
-            }
-        break;
-        case 'right':
-            if (transform.xAxis < rightBound) {
-                transform.xAxis += 5;
-                panner.positionX.value += 0.1;
-            }
-        break;
-        case 'down':
-            if (transform.yAxis < bottomBound) {
-                transform.yAxis += 5;
-                panner.positionY.value += 0.3;
-            }
-        break;
-        case 'back':
-            if (transform.zAxis > innerBound) {
-                transform.zAxis -= 0.01;
-                panner.positionZ.value += 40;
-            }
-        break;
-        case 'forward':
-            if (transform.zAxis < outerBound) {
-                transform.zAxis += 0.01;
-                panner.positionZ.value -= 40;
-            }
-        break;
-        case 'rotate-left':
-            transform.rotateY -= degreesY;
-
-            // 'left' is rotation about y-axis with negative angle increment
-            z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
-            x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
-            y = panner.orientationY.value;
-
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-right':
-            transform.rotateY += degreesY;
-            // 'right' is rotation about y-axis with positive angle increment
-            z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
-            x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
-            y = panner.orientationY.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-up':
-            transform.rotateX += degreesX;
-            // 'up' is rotation about x-axis with negative angle increment
-            z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
-            y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
-            x = panner.orientationX.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-down':
-            transform.rotateX -= degreesX;
-            // 'down' is rotation about x-axis with positive angle increment
-            z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
-            y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
-            x = panner.orientationX.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-    }
+  switch (direction) {
+    case 'left':
+      if (transform.xAxis > leftBound) {
+        transform.xAxis -= 5;
+        panner.positionX.value -= 0.1;
+      }
+      break;
+    case 'up':
+      if (transform.yAxis > topBound) {
+        transform.yAxis -= 5;
+        panner.positionY.value -= 0.3;
+      }
+      break;
+    case 'right':
+      if (transform.xAxis < rightBound) {
+        transform.xAxis += 5;
+        panner.positionX.value += 0.1;
+      }
+      break;
+    case 'down':
+      if (transform.yAxis < bottomBound) {
+        transform.yAxis += 5;
+        panner.positionY.value += 0.3;
+      }
+      break;
+    case 'back':
+      if (transform.zAxis > innerBound) {
+        transform.zAxis -= 0.01;
+        panner.positionZ.value += 40;
+      }
+      break;
+    case 'forward':
+      if (transform.zAxis < outerBound) {
+        transform.zAxis += 0.01;
+        panner.positionZ.value -= 40;
+      }
+      break;
+    case 'rotate-left':
+      transform.rotateY -= degreesY;
+
+      // 'left' is rotation about y-axis with negative angle increment
+      z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
+      x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
+      y = panner.orientationY.value;
+
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case 'rotate-right':
+      transform.rotateY += degreesY;
+      // 'right' is rotation about y-axis with positive angle increment
+      z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
+      x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
+      y = panner.orientationY.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case 'rotate-up':
+      transform.rotateX += degreesX;
+      // 'up' is rotation about x-axis with negative angle increment
+      z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
+      y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
+      x = panner.orientationX.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case 'rotate-down':
+      transform.rotateX -= degreesX;
+      // 'down' is rotation about x-axis with positive angle increment
+      z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
+      y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
+      x = panner.orientationX.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+  }
 
   boombox.style.transform = `translateX(${transform.xAxis}px) ` +
     `translateY(${transform.yAxis}px) ` +
@@ -436,22 +436,20 @@ Wiring up out control buttons is comparatively simple — now we can listen for
 
 ```js
 // for each of our controls, move the boombox and change the position values
-moveControls.forEach(function(el) {
+moveControls.forEach((el) => {
 
     let moving;
-    el.addEventListener('mousedown', function() {
-
-        let direction = this.dataset.control;
+    el.addEventListener('mousedown', () => {
+        const direction = this.dataset.control;
         if (moving && moving.frameId) {
-            window.cancelAnimationFrame(moving.frameId);
+            cancelAnimationFrame(moving.frameId);
         }
         moving = moveBoombox(direction);
-
     }, false);
 
-    window.addEventListener('mouseup', function() {
+    window.addEventListener('mouseup', () => {
         if (moving && moving.frameId) {
-            window.cancelAnimationFrame(moving.frameId);
+            cancelAnimationFrame(moving.frameId);
         }
     }, false)
 
@@ -489,25 +487,23 @@ Let's create a play button, that when clicked will play or pause the audio depen
 ```
 
 ```js
-// select our play button
+// Select our play button
 const playButton = document.querySelector('button');
 
-playButton.addEventListener('click', function() {
-
-// check if context is in suspended state (autoplay policy)
-if (audioContext.state === 'suspended') {
-audioContext.resume();
-}
-
-// play or pause track depending on state
-if (this.dataset.playing === 'false') {
-audioElement.play();
-this.dataset.playing = 'true';
-} else if (this.dataset.playing === 'true') {
-audioElement.pause();
-this.dataset.playing = 'false';
-}
-
+playButton.addEventListener('click', () => {
+  // Check if context is in suspended state (autoplay policy)
+  if (audioContext.state === 'suspended') {
+    audioContext.resume();
+  }
+
+  // Play or pause track depending on state
+  if (playButton.dataset.playing === 'false') {
+    audioElement.play();
+    playButton.dataset.playing = 'true';
+  } else if (playButton.dataset.playing === 'true') {
+    audioElement.pause();
+    playButton.dataset.playing = 'false';
+  }
 }, false);
 ```
 
diff --git a/files/en-us/web/api/web_midi_api/index.md b/files/en-us/web/api/web_midi_api/index.md
index f0c1cff785ba6f5..d65669d10095f47 100644
--- a/files/en-us/web/api/web_midi_api/index.md
+++ b/files/en-us/web/api/web_midi_api/index.md
@@ -93,7 +93,7 @@ function onMIDIMessage(event) {
 }
 
 function startLoggingMIDIInput(midiAccess, indexOfPort) {
-  midiAccess.inputs.forEach(function(entry) {entry.onmidimessage = onMIDIMessage;});
+  midiAccess.inputs.forEach((entry) => {entry.onmidimessage = onMIDIMessage;});
 }
 ```
 
diff --git a/files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.md
index 87d9d7568e9424e..edbd120dab7c97c 100644
--- a/files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/en-us/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -136,8 +136,8 @@ document.body.onclick = () => {
 Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the [`SpeechRecognition` events](/en-US/docs/Web/API/SpeechRecognition#events).) The most common one you'll probably use is the {{domxref("SpeechRecognition.result_event", "result")}} event, which is fired once a successful result is received:
 
 ```js
-recognition.onresult = function(event) {
-  let color = event.results[0][0].transcript;
+recognition.onresult = (event) => {
+  const color = event.results[0][0].transcript;
   diagnostic.textContent = `Result received: ${color}.`;
   bg.style.backgroundColor = color;
   console.log(`Confidence: ${event.results[0][0].confidence}`);
@@ -149,7 +149,7 @@ The second line here is a bit complex-looking, so let's explain it step by step.
 We also use the {{domxref("SpeechRecognition.speechend_event", "speechend")}} event to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognized and it has finished being spoken:
 
 ```js
-recognition.onspeechend = function() {
+recognition.onspeechend = () => {
   recognition.stop();
 }
 ```
@@ -159,15 +159,15 @@ recognition.onspeechend = function() {
 The last two handlers are there to handle cases where speech was recognized that wasn't in the defined grammar, or an error occurred. The {{domxref("SpeechRecognition.nomatch_event", "nomatch")}} event seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognized anyway:
 
 ```js
-recognition.onnomatch = function(event) {
-  diagnostic.textContent = `I didn't recognize that color.`;
+recognition.onnomatch = (event) => {
+  diagnostic.textContent = "I didn't recognize that color.";
 }
 ```
 
 The {{domxref("SpeechRecognition.error_event", "error")}} event handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionErrorEvent.error")}} property contains the actual error returned:
 
 ```js
-recognition.onerror = function(event) {
+recognition.onerror = (event) => {
   diagnostic.textContent = `Error occurred in recognition: ${event.error}`;
 }
 ```
@@ -230,7 +230,7 @@ Let's investigate the JavaScript that powers this app.
 First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.
 
 ```js
-let synth = window.speechSynthesis;
+const synth = window.speechSynthesis;
 
 const inputForm = document.querySelector('form');
 const inputTxt = document.querySelector('.txt');
@@ -254,16 +254,16 @@ We also create `data-` attributes for each option, containing the name and langu
 function populateVoiceList() {
   voices = synth.getVoices();
 
-  for (i = 0; i < voices.length ; i++) {
+  for (const voice of voices) {
     const option = document.createElement('option');
-    option.textContent = `${voices[i].name} (${voices[i].lang})`;
+    option.textContent = `${voice.name} (${voice.lang})`;
 
     if(voices[i].default) {
       option.textContent += ' — DEFAULT';
     }
 
-    option.setAttribute('data-lang', voices[i].lang);
-    option.setAttribute('data-name', voices[i].name);
+    option.setAttribute('data-lang', voice.lang);
+    option.setAttribute('data-name', voice.name);
     voiceSelect.appendChild(option);
   }
 }
@@ -287,14 +287,14 @@ Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelect
 Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.
 
 ```js
-inputForm.onsubmit = function(event) {
+inputForm.onsubmit = (event) => {
   event.preventDefault();
 
   const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for (i = 0; i < voices.length ; i++) {
-    if(voices[i].name === selectedOption) {
-      utterThis.voice = voices[i];
+  for (const voice of voices) {
+    if(voice.name === selectedOption) {
+      utterThis.voice = voice;
     }
   }
   utterThis.pitch = pitch.value;
@@ -305,7 +305,7 @@ inputForm.onsubmit = function(event) {
 In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.pause_event", "pause")}} event to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.
 
 ```js
-   utterThis.onpause = function(event) {
+   utterThis.onpause = (event) => {
     const char = event.utterance.text.charAt(event.charIndex);
     console.log(
       `Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`
@@ -325,11 +325,11 @@ Finally, we call [blur()](/en-US/docs/Web/API/HTMLElement/blur) on the text inpu
 The last part of the code updates the `pitch`/`rate` values displayed in the UI, each time the slider positions are moved.
 
 ```js
-pitch.onchange = function() {
+pitch.onchange = () => {
   pitchValue.textContent = pitch.value;
 }
 
-rate.onchange = function() {
+rate.onchange = () => {
   rateValue.textContent = rate.value;
 }
 ```
diff --git a/files/en-us/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/en-us/web/api/web_storage_api/using_the_web_storage_api/index.md
index acf73c696749cfc..08e38579210558f 100644
--- a/files/en-us/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/en-us/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -182,7 +182,7 @@ The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domx
 On the events page (see [events.js](https://github.com/mdn/dom-examples/blob/master/web-storage/event.js)) the only JavaScript is as follows:
 
 ```js
-window.addEventListener('storage', function(e) {
+window.addEventListener('storage', (e) => {
   document.querySelector('.my-key').textContent = e.key;
   document.querySelector('.my-old').textContent = e.oldValue;
   document.querySelector('.my-new').textContent = e.newValue;
diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md
index f155485eb9e9128..649532b95a2ce6f 100644
--- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md
@@ -61,12 +61,12 @@ const myWorker = new Worker('worker.js');
 The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.message_event", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this ([main.js](https://github.com/mdn/dom-examples/blob/master/web-workers/simple-web-worker/main.js)):
 
 ```js
-first.onchange = function() {
+first.onchange = () => {
   myWorker.postMessage([first.value, second.value]);
   console.log('Message posted to worker');
 }
 
-second.onchange = function() {
+second.onchange = () => {
   myWorker.postMessage([first.value, second.value]);
   console.log('Message posted to worker');
 }
@@ -77,7 +77,7 @@ So here we have two {{htmlelement("input")}} elements represented by the variabl
 In the worker, we can respond when the message is received by writing an event handler block like this ([worker.js](https://github.com/mdn/dom-examples/blob/master/web-workers/simple-web-worker/worker.js)):
 
 ```js
-onmessage = function(e) {
+onmessage = (e) => {
   console.log('Message received from main script');
   const workerResult = `Result: ${e.data[0] * e.data[1]}`;
   console.log('Posting message back to main script');
@@ -90,7 +90,7 @@ The `onmessage` handler allows us to run some code whenever a message is receive
 Back in the main thread, we use `onmessage` again, to respond to the message sent back from the worker:
 
 ```js
-myWorker.onmessage = function(e) {
+myWorker.onmessage = (e) => {
   result.textContent = e.data;
   console.log('Message received from worker');
 }
@@ -175,8 +175,8 @@ The port connection needs to be started either implicitly by use of the `onmessa
 Now messages can be sent to the worker as before, but the `postMessage()` method has to be invoked through the port object (again, you'll see similar constructs in both [multiply.js](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker/multiply.js) and [square.js](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker/square.js)):
 
 ```js
-squareNumber.onchange = function() {
-  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+squareNumber.onchange = () => {
+  myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
   console.log('Message posted to worker');
 }
 ```
@@ -184,10 +184,10 @@ squareNumber.onchange = function() {
 Now, on to the worker. There is a bit more complexity here as well ([worker.js](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker/worker.js)):
 
 ```js
-onconnect = function(e) {
+onconnect = (e) => {
   const port = e.ports[0];
 
-  port.onmessage = function(e) {
+  port.onmessage = (e) => {
     const workerResult = `Result: ${e.data[0] * e.data[1]}`;
     port.postMessage(workerResult);
   }
@@ -203,7 +203,7 @@ Next, we add a `message` handler on the port to do the calculation and return th
 Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both [multiply.js](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker/multiply.js) and [square.js](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-shared-worker/square.js)):
 
 ```js
-myWorker.port.onmessage = function(e) {
+myWorker.port.onmessage = (e) => {
   result2.textContent = e.data;
   console.log('Message received from worker');
 }
@@ -221,7 +221,7 @@ However, since web workers have carefully controlled communication points with o
 
 Workers are considered to have their own execution context, distinct from the document that created them. For this reason they are, in general, not governed by the [content security policy](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:
 
-```plain
+```http
 Content-Security-Policy: script-src 'self'
 ```
 
@@ -239,7 +239,7 @@ To illustrate this, let's create a function named `emulateMessage()`, which will
 
 ```js
 function emulateMessage(vVal) {
-    return eval(`(${JSON.stringify(vVal)})`);
+  return eval(`(${JSON.stringify(vVal)})`);
 }
 
 // Tests
@@ -261,16 +261,16 @@ console.log(typeof emulateMessage(example3)); // string
 
 // test #4
 const example4 = {
-    'name': 'John Smith',
-    "age": 43
+  name: 'John Smith',
+  age: 43,
 };
 console.log(typeof example4); // object
 console.log(typeof emulateMessage(example4)); // object
 
 // test #5
-function Animal(sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
+function Animal(type, age) {
+  this.type = type;
+  this.age = age;
 }
 const example5 = new Animal('Cat', 3);
 alert(example5.constructor); // Animal
@@ -284,8 +284,8 @@ A value that is cloned and not shared is called _message_. As you will probably
 ```js
 const myWorker = new Worker('my_task.js');
 
-myWorker.onmessage = function(oEvent) {
-  console.log(`Worker said : ${oEvent.data}`);
+myWorker.onmessage = (event) => {
+  console.log(`Worker said : ${event.data}`);
 };
 
 myWorker.postMessage('ali');
@@ -296,8 +296,8 @@ myWorker.postMessage('ali');
 ```js
 postMessage("I\'m working before postMessage(\'ali\').");
 
-onmessage = function(oEvent) {
-  postMessage(`Hi ${oEvent.data}`);
+onmessage = (event) => {
+  postMessage(`Hi, ${event.data}`);
 };
 ```
 
@@ -313,66 +313,65 @@ First, we create a `QueryableWorker` class that takes the URL of the worker, a d
 
 ```js
 function QueryableWorker(url, defaultListener, onError) {
-    const instance = this,
-        worker = new Worker(url),
-        listeners = {};
+  const instance = this;
+  const worker = new Worker(url);
+  const listeners = {};
 
-    this.defaultListener = defaultListener || function() {};
+  this.defaultListener = defaultListener ?? (() => {});
 
-    if (onError) {worker.onerror = onError;}
+  if (onError) { worker.onerror = onError; }
 
-    this.postMessage = function(message) {
-        worker.postMessage(message);
-    }
+  this.postMessage = (message) => {
+    worker.postMessage(message);
+  }
 
-    this.terminate = function() {
-        worker.terminate();
-    }
+  this.terminate = () => {
+    worker.terminate();
+  }
 }
 ```
 
 Then we add the methods of adding/removing listeners:
 
 ```js
-this.addListeners = function(name, listener) {
-    listeners[name] = listener;
+this.addListeners = (name, listener) => {
+  listeners[name] = listener;
 }
 
-this.removeListeners = function(name) {
-    delete listeners[name];
+this.removeListeners = (name) => {
+  delete listeners[name];
 }
 ```
 
 Here we let the worker handle two simple operations for illustration: getting the difference of two numbers and making an alert after three seconds. In order to achieve that we first implement a `sendQuery` method which queries if the worker actually has the corresponding methods to do what we want.
 
 ```js
-/*
-  This functions takes at least one argument, the method name we want to query.
-  Then we can pass in the arguments that the method needs.
- */
-this.sendQuery = function() {
-    if (arguments.length < 1) {
-         throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
-         return;
-    }
-    worker.postMessage({
-        'queryMethod': arguments[0],
-        'queryMethodArguments': Array.prototype.slice.call(arguments, 1)
-    });
+// This functions takes at least one argument, the method name we want to query.
+// Then we can pass in the arguments that the method needs.
+this.sendQuery = (queryMethod, ...queryMethodArguments) => {
+  if (!queryMethod) {
+    throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
+  }
+  worker.postMessage({
+    queryMethod,
+    queryMethodArguments,
+  });
 }
 ```
 
 We finish QueryableWorker with the `onmessage` method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in `listeners`.:
 
 ```js
-worker.onmessage = function(event) {
-    if (event.data instanceof Object &&
-        Object.hasOwn(event.data, 'queryMethodListener') &&
-        Object.hasOwn(event.data, 'queryMethodArguments')) {
-        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-    } else {
-        this.defaultListener.call(instance, event.data);
-    }
+worker.onmessage = (event) => {
+  if (
+    event.data instanceof Object &&
+    Object.hasOwn(event.data, 'queryMethodListener') &&
+    Object.hasOwn(event.data, 'queryMethodArguments')
+  ) {
+    listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+  } else {
+    this.defaultListener.call(instance, event.data);
+  }
 }
 ```
 
@@ -380,45 +379,46 @@ Now onto the worker. First we need to have the methods to handle the two simple
 
 ```js
 const queryableFunctions = {
-    getDifference(a, b) {
-        reply('printStuff', a - b);
-    },
-    waitSomeTime() {
-        setTimeout(function() {
-            reply('doAlert', 3, 'seconds');
-        }, 3000);
-    }
+  getDifference(a, b) {
+    reply('printStuff', a - b);
+  },
+  waitSomeTime() {
+    setTimeout(() => {
+      reply('doAlert', 3, 'seconds');
+    }, 3000);
+  }
 }
 
-function reply() {
-    if (arguments.length < 1) {
-        throw new TypeError('reply - takes at least one argument');
-        return;
-    }
-    postMessage({
-        queryMethodListener: arguments[0],
-        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
-    });
+function reply(queryMethodListener, ...queryMethodArguments) {
+  if (!queryMethodListener) {
+    throw new TypeError('reply - takes at least one argument');
+  }
+  postMessage({
+    queryMethodListener,
+    queryMethodArguments,
+  });
 }
 
 /* This method is called when main page calls QueryWorker's postMessage method directly*/
 function defaultReply(message) {
-    // do something
+  // do something
 }
 ```
 
 And the `onmessage` method is now trivial:
 
 ```js
-onmessage = function(event) {
-    if (event.data instanceof Object &&
-        Object.hasOwn(event.data, 'queryMethod') &&
-        Object.hasOwn(event.data, 'queryMethodArguments')) {
-        queryableFunctions[event.data.queryMethod]
-            .apply(self, event.data.queryMethodArguments);
-    } else {
-        defaultReply(event.data);
-    }
+onmessage = (event) => {
+  if (
+    event.data instanceof Object &&
+    Object.hasOwn(event.data, 'queryMethod') &&
+    Object.hasOwn(event.data, 'queryMethodArguments')
+  ) {
+    queryableFunctions[event.data.queryMethod]
+      .apply(self, event.data.queryMethodArguments);
+  } else {
+    defaultReply(event.data);
+  }
 }
 ```
 
@@ -428,93 +428,92 @@ Here are the full implementation:
 
 ```html
 <!doctype html>
-  <html lang="en-US">
-    <head>
-      <meta charset="utf-8"> 
-      <meta name="viewport" content="width=device-width">
-      <title>MDN Example - Queryable worker</title>
-    <script>
-    /*
-      QueryableWorker instances methods:
-        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-        * terminate(): terminates the Worker
-        * addListener(name, function): adds a listener
-        * removeListener(name): removes a listener
-      QueryableWorker instances properties:
-        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-     */
-    function QueryableWorker(url, defaultListener, onError) {
-      const instance = this,
-      const worker = new Worker(url),
-      let listeners = {};
-
-      this.defaultListener = defaultListener || function() {};
-
-      if (onError) {worker.onerror = onError;}
-
-      this.postMessage = function(message) {
-        worker.postMessage(message);
-      }
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>MDN Example - Queryable worker</title>
+    <script type="text/javascript">
+      // QueryableWorker instances methods:
+      //   * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+      //   * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+      //   * terminate(): terminates the Worker
+      //   * addListener(name, function): adds a listener
+      //   * removeListener(name): removes a listener
+      // QueryableWorker instances properties:
+      //   * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+      function QueryableWorker(url, defaultListener, onError) {
+        const instance = this;
+        const worker = new Worker(url);
+        const listeners = {};
+
+        this.defaultListener = defaultListener ?? (() => {});
+
+        if (onError) { worker.onerror = onError; }
+
+        this.postMessage = (message) => {
+          worker.postMessage(message);
+        }
 
-      this.terminate = function() {
-        worker.terminate();
-      }
+        this.terminate = () => {
+          worker.terminate();
+        }
 
-      this.addListener = function(name, listener) {
-        listeners[name] = listener;
-      }
+        this.addListener = (name, listener) => {
+          listeners[name] = listener;
+        }
 
-      this.removeListener = function(name) {
-        delete listeners[name];
-      }
+        this.removeListener = (name) => {
+          delete listeners[name];
+        }
 
-      /*
-        This functions takes at least one argument, the method name we want to query.
-        Then we can pass in the arguments that the method needs.
-      */
-      this.sendQuery = function() {
-        if (arguments.length < 1) {
-          throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
-          return;
+        // This functions takes at least one argument, the method name we want to query.
+        // Then we can pass in the arguments that the method needs.
+        this.sendQuery = (queryMethod, ...queryMethodArguments) => {
+          if (!queryMethod) {
+            throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
+          }
+          worker.postMessage({
+            queryMethod,
+            queryMethodArguments,
+          });
         }
-        worker.postMessage({
-          'queryMethod': arguments[0],
-          'queryMethodArguments': Array.prototype.slice.call(arguments, 1)
-        });
-      }
 
-      worker.onmessage = function(event) {
-        if (event.data instanceof Object &&
-          Object.hasOwn(event.data, 'queryMethodListener') &&
-          Object.hasOwn(event.data, 'queryMethodArguments')) {
-          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-        } else {
-          this.defaultListener.call(instance, event.data);
+        worker.onmessage = (event) => {
+          if (
+            event.data instanceof Object &&
+            Object.hasOwn(event.data, 'queryMethodListener') &&
+            Object.hasOwn(event.data, 'queryMethodArguments')
+          ) {
+            listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+          } else {
+            this.defaultListener.call(instance, event.data);
+          }
         }
       }
-    }
-
-    // your custom "queryable" worker
-    const myTask = new QueryableWorker('my_task.js');
-
-    // your custom "listeners"
-    myTask.addListener('printStuff', function (result) {
-      document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!'));
-    });
-
-    myTask.addListener('doAlert', function (time, unit) {
-      alert('Worker waited for ' + time + ' ' + unit + ' :-)');
-    });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
-    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
+
+      // your custom "queryable" worker
+      const myTask = new QueryableWorker('my_task.js');
+
+      // your custom "listeners"
+      myTask.addListener('printStuff', (result) => {
+        document.getElementById('firstLink')
+          .parentNode
+          .appendChild(document.createTextNode(`The difference is ${result}!`));
+      });
+
+      myTask.addListener('doAlert', (time, unit) => {
+        alert(`Worker waited for ${time} ${unit} :-)`);
+      });
+    </script>
+  </head>
+  <body>
+    <ul>
+      <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+      <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
+      <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
+    </ul>
+  </body>
 </html>
 ```
 
@@ -523,12 +522,13 @@ Here are the full implementation:
 ```js
 const queryableFunctions = {
   // example #1: get the difference between two numbers:
-  getDifference(nMinuend, nSubtrahend) {
-      reply('printStuff', nMinuend - nSubtrahend);
+  getDifference(minuend, subtrahend) {
+    reply('printStuff', minuend - subtrahend);
   },
+  
   // example #2: wait three seconds
   waitSomeTime() {
-      setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000);
+    setTimeout(() => { reply('doAlert', 3, 'seconds'); }, 3000);
   }
 };
 
@@ -539,16 +539,25 @@ function defaultReply(message) {
   // do something
 }
 
-function reply() {
-  if (arguments.length < 1) { throw new TypeError('reply - not enough arguments'); return; }
-  postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) });
+function reply(queryMethodListener, ...queryMethodArguments) {
+  if (!queryMethodListener) {
+    throw new TypeError('reply - not enough arguments');
+  }
+  postMessage({
+    queryMethodListener,
+    queryMethodArguments,
+  });
 }
 
-onmessage = function(oEvent) {
-  if (oEvent.data instanceof Object && Object.hasOwn(oEvent.data, 'queryMethod') && Object.hasOwn(oEvent.data, 'queryMethodArguments')) {
-    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+onmessage = (event) => {
+  if (
+    event.data instanceof Object &&
+    Object.hasOwn(event.data, 'queryMethod') &&
+    Object.hasOwn(event.data, 'queryMethodArguments')
+  ) {
+    queryableFunctions[event.data.queryMethod].apply(self, event.data.queryMethodArguments);
   } else {
-    defaultReply(oEvent.data);
+    defaultReply(event.data);
   }
 };
 ```
@@ -576,50 +585,57 @@ There is not an "official" way to embed the code of a worker within a web page,
 
 ```html
 <!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  const myVar = 'Hello World!';
-  // Rest of your worker code goes here.
-</script>
-<script>
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-  function pageLog(sMsg) {
-    // Use a fragment: browser will only render/reflow once.
-    let oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement('br'));
-    document.querySelector('#logDisplay').appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  onmessage = function(oEvent) {
-    postMessage(myVar);
-  };
-  // Rest of your worker code goes here.
-</script>
-<script>
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-
-  // In the past blob builder existed, but now we use Blob
-  const blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'});
-
-  // Creating a new document.worker property containing all our "text/js-worker" scripts.
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function(oEvent) {
-    pageLog('Received: ' + oEvent.data);
-  };
-
-  // Start the worker.
-  window.onload = function() { document.worker.postMessage(''); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>MDN Example - Embedded worker</title>
+    <script type="text/js-worker">
+      // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+      const myVar = 'Hello World!';
+      // Rest of your worker code goes here.
+    </script>
+    <script>
+      // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+      function pageLog(sMsg) {
+        // Use a fragment: browser will only render/reflow once.
+        const frag = document.createDocumentFragment();
+        frag.appendChild(document.createTextNode(sMsg));
+        frag.appendChild(document.createElement('br'));
+        document.querySelector('#logDisplay').appendChild(frag);
+      }
+    </script>
+    <script type="text/js-worker">
+      // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+      onmessage = (event) => {
+        postMessage(myVar);
+      };
+      // Rest of your worker code goes here.
+    </script>
+    <script>
+      // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+
+      // In the past blob builder existed, but now we use Blob
+      const blob = new Blob(Array.prototype.map.call(
+        document.querySelectorAll("script[type='text\/js-worker']"),
+        (script) => script.textContent, 
+        { type: 'text/javascript' }
+      );
+
+      // Creating a new document.worker property containing all our "text/js-worker" scripts.
+      document.worker = new Worker(window.URL.createObjectURL(blob));
+
+      document.worker.onmessage = (event) => {
+        pageLog(`Received: ${event.data}`);
+      };
+
+      // Start the worker.
+      window.onload = () => { document.worker.postMessage(''); };
+    </script>
+  </head>
+  <body>
+    <div id="logDisplay"></div>
+  </body>
 </html>
 ```
 
@@ -629,7 +645,7 @@ It is also worth noting that you can also convert a function into a Blob, then g
 
 ```js
 function fn2workerURL(fn) {
-  const blob = new Blob([`(${fn.toString()})()`], {type: 'text/javascript'})
+  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
   return URL.createObjectURL(blob)
 }
 ```
@@ -647,18 +663,16 @@ Workers are mainly useful for allowing your code to perform processor-intensive
 The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.
 
 ```js
-self.onmessage = function(e) {
-  let userNum = Number(e.data);
+self.onmessage = (e) => {
+  const userNum = Number(e.data);
   fibonacci(userNum);
 }
 
-
 function fibonacci(num){
-  let a = 1, b = 0, temp;
+  let a = 1;
+  let b = 0;
   while (num >= 0){
-    temp = a;
-    a = a + b;
-    b = temp;
+    [a, b] = [a + b, a];
     num--;
   }
 
@@ -687,48 +701,45 @@ The worker sets the property `onmessage` to a function which will receive messag
     </style>
   </head>
   <body>
+    <form>
+      <div>
+        <label for="number">Enter a number that is an index position in the fibonacci sequence to see what number is in that position (e.g. enter 5 and you'll get a result of 8 — fibonacci index position 5 is 8).</label>
+        <input type="number" id="number">
+      </div>
+      <div>
+        <input type="submit">
+      </div>
+    </form>
+
+    <p id="result"></p>
 
-  <form>
-    <div>
-      <label for="number">Enter a number that is an index position in the fibonacci sequence to see what number is in that position (e.g. enter 5 and you'll get a result of 8 — fibonacci index position 5 is 8).</label>
-      <input type="number" id="number">
-    </div>
-    <div>
-      <input type="submit">
-    </div>
-  </form>
-
-  <p id="result"></p>
-
-  <script language="javascript">
-    let form = document.querySelector('form');
-    let input = document.querySelector('input[type="number"]');
-    let result = document.querySelector('p#result');
-    let worker = new Worker('fibonacci.js');
-
-    worker.onmessage = function(event) {
-      result.textContent = event.data;
-      console.log('Got: ' + event.data + '\n');
-    };
-
-    worker.onerror = function(error) {
-      console.log('Worker error: ' + error.message + '\n');
-      throw error;
-    };
-
-    form.onsubmit = function(e) {
-      e.preventDefault();
-      worker.postMessage(input.value);
-      input.value = '';
-    }
-
-  </script>
+    <script>
+      const form = document.querySelector('form');
+      const input = document.querySelector('input[type="number"]');
+      const result = document.querySelector('p#result');
+      const worker = new Worker('fibonacci.js');
+
+      worker.onmessage = (event) => {
+        result.textContent = event.data;
+        console.log(`Got: ${event.data}`);
+      };
+
+      worker.onerror = (error) => {
+        console.log(`Worker error: ${error.message}`);
+        throw error;
+      };
+
+      form.onsubmit = (e) => {
+        e.preventDefault();
+        worker.postMessage(input.value);
+        input.value = '';
+      }
+    </script>
   </body>
 </html>
-
 ```
 
-The web page creates a `div` element with the ID `result` , which gets used to display the result, then spawns the worker. After spawning the worker, the `onmessage` handler is configured to display the results by setting the contents of the `div` element, and the `onerror` handler is set to log the error message to the devtools console.
+The web page creates a `<div>` element with the ID `result` , which gets used to display the result, then spawns the worker. After spawning the worker, the `onmessage` handler is configured to display the results by setting the contents of the `<div>` element, and the `onerror` handler is set to log the error message to the devtools console.
 
 Finally, a message is sent to the worker to start it.
 
diff --git a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
index 9c88b56a8bc5391..3f3ec48213a03f6 100644
--- a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
+++ b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md
@@ -145,8 +145,8 @@ function startup() {
   currentScale = [1.0, aspectRatio];
 
   vertexArray = new Float32Array([
-      -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
-      -0.5, 0.5, 0.5, -0.5, -0.5, -0.5
+    -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
+    -0.5, 0.5, 0.5, -0.5, -0.5, -0.5
   ]);
 
   vertexBuffer = gl.createBuffer();
@@ -186,10 +186,10 @@ The `buildShaderProgram()` function accepts as input an array of objects describ
 
 ```js
 function buildShaderProgram(shaderInfo) {
-  let program = gl.createProgram();
+  const program = gl.createProgram();
 
-  shaderInfo.forEach(function(desc) {
-    let shader = compileShader(desc.id, desc.type);
+  shaderInfo.forEach((desc) => {
+    const shader = compileShader(desc.id, desc.type);
 
     if (shader) {
       gl.attachShader(program, shader);
@@ -225,8 +225,8 @@ The `compileShader()` function, below, is called by `buildShaderProgram()` to co
 
 ```js
 function compileShader(id, type) {
-  let code = document.getElementById(id).firstChild.nodeValue;
-  let shader = gl.createShader(type);
+  const code = document.getElementById(id).firstChild.nodeValue;
+  const shader = gl.createShader(type);
 
   gl.shaderSource(shader, code);
   gl.compileShader(shader);
@@ -257,7 +257,7 @@ function animateScene() {
   gl.clearColor(0.8, 0.9, 1.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
 
-  let radians = currentAngle * Math.PI / 180.0;
+  const radians = currentAngle * Math.PI / 180.0;
   currentRotation[0] = Math.sin(radians);
   currentRotation[1] = Math.cos(radians);
 
@@ -285,9 +285,8 @@ function animateScene() {
 
   gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
 
-  window.requestAnimationFrame(function(currentTime) {
-    let deltaAngle = ((currentTime - previousTime) / 1000.0)
-          * degreesPerSecond;
+  requestAnimationFrame((currentTime) => {
+    const deltaAngle = ((currentTime - previousTime) / 1000.0) * degreesPerSecond;
 
     currentAngle = (currentAngle + deltaAngle) % 360;
 
diff --git a/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md b/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
index 4321d3eb825d7a5..c2de7c321b0e61a 100644
--- a/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
@@ -49,22 +49,17 @@ canvas {
 ```
 
 ```js
-window.addEventListener("load", function() {
-  "use strict"
+window.addEventListener("load", () => {
   const [ firstCanvas , secondCanvas ] = document.getElementsByTagName("canvas");
   firstCanvas.width = firstCanvas.clientWidth;
   firstCanvas.height = firstCanvas.clientHeight;
-  [firstCanvas, secondCanvas].forEach(function(canvas) {
-    const gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
+  [firstCanvas, secondCanvas].forEach((canvas) => {
+    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
     if (!gl) {
-      document.querySelector("p").innerHTML =
-        "Failed to get WebGL context. "
-        + "Your browser or device may not support WebGL.";
+      document.querySelector("p").textContent = "Failed. Your browser or device may not support WebGL.";
       return;
     }
-    gl.viewport(0, 0,
-      gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
     gl.enable(gl.SCISSOR_TEST);
     gl.scissor(30, 10, 60, 60);
     gl.clearColor(1.0, 1.0, 0.0, 1.0);
diff --git a/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md b/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md
index 693beec1d72ac2c..96a87d9e326bce2 100644
--- a/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/detect_webgl/index.md
@@ -42,9 +42,10 @@ button {
 ```js
 // Run everything inside window load event handler, to make sure
 // DOM is fully loaded and styled before trying to manipulate it.
-window.addEventListener("load", function() {
-  const paragraph = document.querySelector("p"),
-    button = document.querySelector("button");
+window.addEventListener("load", () => {
+  const paragraph = document.querySelector("p");
+  const button = document.querySelector("button");
+  
   // Adding click event handler to button.
   button.addEventListener("click", detectWebGLContext, false);
   function detectWebGLContext () {
@@ -52,16 +53,15 @@ window.addEventListener("load", function() {
     // document itself, so it is never displayed in the
     // browser window.
     const canvas = document.createElement("canvas");
+    
     // Get WebGLRenderingContext from canvas element.
-    const gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
+    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    
     // Report the result.
     if (gl && gl instanceof WebGLRenderingContext) {
-      paragraph.textContent =
-        "Congratulations! Your browser supports WebGL.";
+      paragraph.textContent = "Congratulations! Your browser supports WebGL.";
     } else {
-      paragraph.textContent = "Failed to get WebGL context. "
-        + "Your browser or device may not support WebGL.";
+      paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     }
   }
 }, false);
diff --git a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
index d0ca330829637ab..8c294f7bc3672d4 100644
--- a/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/hello_glsl/index.md
@@ -73,23 +73,24 @@ void main() {
 ```
 
 ```js hidden
-;(function(){
+;(() => {
+  "use strict";
 ```
 
 ```js
-"use strict"
 window.addEventListener("load", setupWebGL, false);
-let gl,
-  program;
+let gl;
+let program;
+
 function setupWebGL (evt) {
   window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
 
   let source = document.querySelector("#vertex-shader").innerHTML;
   const vertexShader = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(vertexShader,source);
   gl.compileShader(vertexShader);
+  
   source = document.querySelector("#fragment-shader").innerHTML;
   const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
   gl.shaderSource(fragmentShader,source);
@@ -105,8 +106,7 @@ function setupWebGL (evt) {
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     const linkErrLog = gl.getProgramInfoLog(program);
     cleanup();
-    document.querySelector("p").innerHTML =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
+    document.querySelector("p").textContent = `Shader program did not link successfully. Error log: ${linkErrLog}`;
     return;
   }
 
@@ -127,11 +127,13 @@ function initializeAttributes() {
 }
 
 function cleanup() {
-gl.useProgram(null);
-if (buffer)
-  gl.deleteBuffer(buffer);
-if (program)
-  gl.deleteProgram(program);
+  gl.useProgram(null);
+  if (buffer) {
+    gl.deleteBuffer(buffer);
+  }
+  if (program) {
+    gl.deleteProgram(program);
+  }
 }
 ```
 
@@ -140,16 +142,13 @@ function getRenderingContext() {
   const canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  const gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     const paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
index 8016436424bc334..42a261867a0987d 100644
--- a/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
@@ -26,8 +26,7 @@ on the canvas to change the horizontal position of the square.</p>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
 ```
 
 ```css hidden
@@ -75,24 +74,24 @@ void main() {
 ```
 
 ```js hidden
-;(function(){
+;(() => {
+  "use strict";
 ```
 
 ```js
-"use strict"
 window.addEventListener("load", setupWebGL, false);
-let gl,
-  program;
+let gl;
+let program;
+
 function setupWebGL (evt) {
   window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
 
   let source = document.querySelector("#vertex-shader").innerHTML;
   const vertexShader = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(vertexShader,source);
   gl.compileShader(vertexShader);
-  source = document.querySelector("#fragment-shader").innerHTML
+  source = document.querySelector("#fragment-shader").innerHTML;
   const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
   gl.shaderSource(fragmentShader,source);
   gl.compileShader(fragmentShader);
@@ -107,8 +106,7 @@ function setupWebGL (evt) {
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     const linkErrLog = gl.getProgramInfoLog(program);
     cleanup();
-    document.querySelector("p").innerHTML =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
+    document.querySelector("p").textContent = `Shader program did not link successfully. Error log: ${linkErrLog}`;
     return;
   }
 
@@ -116,17 +114,16 @@ function setupWebGL (evt) {
   gl.useProgram(program);
   gl.drawArrays(gl.POINTS, 0, 1);
 
-  document.querySelector("canvas").addEventListener("click",
-    function (evt) {
-      const clickXRelativeToCanvas =
-          evt.pageX - evt.target.offsetLeft;
-      const clickXinWebGLCoords =
-          2.0 * (clickXRelativeToCanvas- gl.drawingBufferWidth/2)
-          / gl.drawingBufferWidth;
-      gl.bufferData(gl.ARRAY_BUFFER,
-        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
-      gl.drawArrays(gl.POINTS, 0, 1);
-    }, false);
+  document.querySelector("canvas").addEventListener("click", (evt) => {
+    const clickXRelativeToCanvas = evt.pageX - evt.target.offsetLeft;
+    const clickXinWebGLCoords = 2.0 * (clickXRelativeToCanvas - gl.drawingBufferWidth / 2) / gl.drawingBufferWidth;
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([clickXinWebGLCoords]),
+      gl.STATIC_DRAW,
+    );
+    gl.drawArrays(gl.POINTS, 0, 1);
+  }, false);
 }
 
 let buffer;
@@ -141,10 +138,12 @@ function initializeAttributes() {
 window.addEventListener("beforeunload", cleanup, true);
 function cleanup() {
   gl.useProgram(null);
-  if (buffer)
+  if (buffer) {
     gl.deleteBuffer(buffer);
-  if (program)
+  }
+  if (program) {
     gl.deleteProgram(program);
+  }
 }
 ```
 
@@ -153,16 +152,13 @@ function getRenderingContext() {
   const canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  const gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     const paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
index 26fb05ef4a66934..2c5e734c94b570f 100644
--- a/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/raining_rectangles/index.md
@@ -27,15 +27,11 @@ This example combines clearing the drawing buffer with solid colors and scissori
 In addition, the example demonstrates how to integrate the WebGL function calls within a game loop. The game loop is responsible for drawing the animation frames, and keeping the animation responsive to user input. Here, the game loop is implemented using timeouts.
 
 ```html hidden
-<p>You caught
-<strong>0</strong>.
-  You missed
-<strong>0</strong>.</p>
+<p>You caught <strong>0</strong>. You missed <strong>0</strong>.</p>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support canvases.</canvas>
 ```
 
 ```css hidden
@@ -60,11 +56,11 @@ button {
 ```
 
 ```js hidden
-;(function(){
+;(() => {
+  "use strict";
 ```
 
 ```js
-"use strict"
 window.addEventListener("load", setupAnimation, false);
 let gl;
 let timer;
@@ -73,8 +69,7 @@ let scoreDisplay;
 let missesDisplay;
 function setupAnimation(evt) {
   window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
   gl.enable(gl.SCISSOR_TEST);
 
   rainingRect = new Rectangle();
@@ -110,14 +105,15 @@ function drawAnimation() {
 function playerClick(evt) {
   // We need to transform the position of the click event from
   // window coordinates to relative position inside the canvas.
-// In addition we need to remember that vertical position in
+  // In addition we need to remember that vertical position in
   // WebGL increases from bottom to top, unlike in the browser
   // window.
   const position = [
     evt.pageX - evt.target.offsetLeft,
     gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
   ];
-  // if the click falls inside the rectangle, we caught it.
+  // If the click falls inside the rectangle, we caught it.
+  
   // Increment score and create a new rectangle.
   const diffPos = [
     position[0] - rainingRect.position[0],
@@ -162,11 +158,10 @@ function getRenderingContext() {
   const canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  const gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     const paragraph = document.querySelector("p");
-    paragraph.textContent = "Failed to get WebGL context. Your browser or device may not support WebGL.";
+    paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     return null;
   }
   gl.viewport(
diff --git a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
index a574bb7175d45b4..d7507585aa77713 100644
--- a/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/scissor_animation/index.md
@@ -25,17 +25,14 @@ In this example, we are animating squares using {{domxref("WebGLRenderingContext
 In contrast, the color of the square (set with {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) is only updated when a new square is created. This is a nice demonstration of {{Glossary("WebGL")}} as a state machine. For each square, we set its color once, and then update only its position every frame. The clear color state of WebGL remains at the set value, until we change it again when a new square is created.
 
 ```html hidden
-<p>WebGL animation by clearing the drawing buffer with solid
-color and applying scissor test.</p>
+<p> WebGL animation by clearing the drawing buffer with solid color and applying scissor test.</p>
 <button id="animation-onoff">
-  Press here to
-<strong>[verb goes here]</strong>
-  the animation</button>
+  Press here to <strong>[verb goes here]</strong> the animation.
+</button>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support canvases.</canvas>
 ```
 
 ```css hidden
@@ -60,11 +57,11 @@ button {
 ```
 
 ```js hidden
-;(function(){
+;(() => {
+  "use strict";
 ```
 
 ```js
-"use strict"
 window.addEventListener("load", setupAnimation, false);
 // Variables to hold the WebGL context, and the color and
 // position of animated squares.
@@ -74,8 +71,7 @@ let position;
 
 function setupAnimation (evt) {
   window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
 
   gl.enable(gl.SCISSOR_TEST);
   gl.clearColor(color[0], color[1], color[2], 1.0);
@@ -87,6 +83,7 @@ function setupAnimation (evt) {
 
   const button = document.querySelector("button");
   let timer;
+  
   function startAnimation(evt) {
     button.removeEventListener(evt.type, startAnimation, false);
     button.addEventListener("click", stopAnimation, false);
@@ -94,17 +91,19 @@ function setupAnimation (evt) {
     timer = setInterval(drawAnimation, 17);
     drawAnimation();
   }
+  
   function stopAnimation(evt) {
     button.removeEventListener(evt.type, stopAnimation, false);
     button.addEventListener("click", startAnimation, false);
     document.querySelector("strong").textContent = "start";
     clearInterval(timer);
   }
+  
   stopAnimation({type: "click"});
 }
 
 // Variables to hold the size and velocity of the square.
-let size = [60, 60];
+const size = [60, 60];
 let velocity = 3.0;
 function drawAnimation () {
   gl.scissor(position[0], position[1], size[0] , size[1]);
@@ -139,16 +138,13 @@ function getRenderingContext() {
   const canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  const gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     const paragraph = document.querySelector("p");
-    paragraph.textContent = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
index 846599d94feddee..17ec28ed1eec76e 100644
--- a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
+++ b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md
@@ -20,18 +20,16 @@ This WebGL example provides a simple demonstration of procedural texturing with
 
 ## Drawing textures with code
 
-{{EmbedLiveSample("Drawing_textures_with_code",660,425)}}
+{{EmbedLiveSample("Drawing_textures_with_code", 660, 425)}}
 
 Texturing a point sprite with calculations done per-pixel in the fragment shader.
 
 ```html hidden
-<p>Texture from code. Simple demonstration
-    of procedural texturing</p>
+<p>Texture from code. Simple demonstration of procedural texturing</p>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support canvases.</canvas>
 ```
 
 ```css hidden
@@ -85,27 +83,30 @@ void main() {
 ```
 
 ```js hidden
-;(function(){
+;(() => {
+  "use strict";
 ```
 
 ```js
-"use strict"
 window.addEventListener("load", setupWebGL, false);
+
 let gl;
 let program;
+
 function setupWebGL (evt) {
   window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
 
   let source = document.querySelector("#vertex-shader").innerHTML;
   const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader,source);
+  gl.shaderSource(vertexShader, source);
   gl.compileShader(vertexShader);
+  
   source = document.querySelector("#fragment-shader").innerHTML
   const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader,source);
+  gl.shaderSource(fragmentShader, source);
   gl.compileShader(fragmentShader);
+  
   program = gl.createProgram();
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
@@ -117,8 +118,7 @@ function setupWebGL (evt) {
   if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
     const linkErrLog = gl.getProgramInfoLog(program);
     cleanup();
-    document.querySelector("p").innerHTML =
-      `Shader program did not link successfully. Error log: ${linkErrLog}`;
+    document.querySelector("p").textContent = `Shader program did not link successfully. Error log: ${linkErrLog}`;
     return;
   }
   initializeAttributes();
@@ -137,11 +137,13 @@ function initializeAttributes() {
 }
 
 function cleanup() {
-gl.useProgram(null);
-if (buffer)
-  gl.deleteBuffer(buffer);
-if (program)
-  gl.deleteProgram(program);
+  gl.useProgram(null);
+  if (buffer) {
+    gl.deleteBuffer(buffer);
+  }
+  if (program) {
+    gl.deleteProgram(program);
+  }
 }
 ```
 
@@ -150,16 +152,13 @@ function getRenderingContext() {
   const canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  const gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     const paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.textContent = "Failed. Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/en-us/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
index 0189a75943748c4..f9b486dab068b16 100644
--- a/files/en-us/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
+++ b/files/en-us/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
@@ -35,12 +35,12 @@ function setupVideo(url) {
   // Waiting for these 2 events ensures
   // there is data in the video
 
-  video.addEventListener('playing', function() {
+  video.addEventListener('playing', () => {
      playing = true;
      checkReady();
   }, true);
 
-  video.addEventListener('timeupdate', function() {
+  video.addEventListener('timeupdate', () => {
      timeupdate = true;
      checkReady();
   }, true);
diff --git a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index 051e0d99d62cf2a..cc7e9801bffa197 100644
--- a/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/en-us/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -47,7 +47,7 @@ function loadTexture(gl, url) {
                 pixel);
 
   const image = new Image();
-  image.onload = function() {
+  image.onload = () => {
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                   srcFormat, srcType, image);
diff --git a/files/en-us/web/api/webgl_api/webgl_best_practices/index.md b/files/en-us/web/api/webgl_api/webgl_best_practices/index.md
index 4ecba06e884f816..53b60df9bb77e64 100644
--- a/files/en-us/web/api/webgl_api/webgl_best_practices/index.md
+++ b/files/en-us/web/api/webgl_api/webgl_best_practices/index.md
@@ -594,7 +594,7 @@ Demo: [Device pixel presnap](https://kdashg.github.io/misc/webgl/device-pixel-pr
 On supporting browsers (Chromium?), `ResizeObserver` can be used with `'device-pixel-content-box'` to request a callback that includes the true device pixel size of an element. This can be used to build an async-but-accurate function:
 
 ```js
-window.getDevicePixelSize = window.getDevicePixelSize || async function(elem) {
+window.getDevicePixelSize = window.getDevicePixelSize || (async (elem) => {
    await new Promise((fn_resolve) => {
       const observer = new ResizeObserver((entries) => {
          for (const cur of entries) {
@@ -611,7 +611,7 @@ window.getDevicePixelSize = window.getDevicePixelSize || async function(elem) {
       });
       observer.observe(elem, {box: 'device-pixel-content-box'});
    });
-};
+});
 ```
 
 Please refer to [the specification](https://www.w3.org/TR/resize-observer/#resize-observer-interface) for more details.
diff --git a/files/en-us/web/api/webgl_api/webgl_model_view_projection/index.md b/files/en-us/web/api/webgl_api/webgl_model_view_projection/index.md
index f658abdeeae32a9..850e6356776e3a5 100644
--- a/files/en-us/web/api/webgl_api/webgl_model_view_projection/index.md
+++ b/files/en-us/web/api/webgl_api/webgl_model_view_projection/index.md
@@ -80,7 +80,7 @@ function WebGLBox() {
 Now we'll create a method to draw a box on the screen.
 
 ```js
-WebGLBox.prototype.draw = function(settings) {
+WebGLBox.prototype.draw = function (settings) {
   // Create some attribute data; these are the triangles that will end being
   // drawn to the screen. There are two that form a square.
 
@@ -345,7 +345,7 @@ In this case, for every frame of the animation a series of scale, rotation, and
 The following code sample defines a method on the `CubeDemo` object that will create the model matrix. It uses custom functions to create and multiply matrices as defined in the [MDN WebGL](https://github.com/gregtatum/mdn-webgl) shared code. The new function looks like this:
 
 ```js
-CubeDemo.prototype.computeModelMatrix = function(now) {
+CubeDemo.prototype.computeModelMatrix = function (now) {
   //Scale down by 50%
   const scale = MDN.scaleMatrix(0.5, 0.5, 0.5);
 
@@ -510,7 +510,7 @@ Which is exactly the same as the `(z + 1) * scaleFactor` that we used in the pre
 In the box demo, an additional `computeSimpleProjectionMatrix()` method is added. This is called in the `draw()` method and has the scale factor passed to it. The result should be identical to the last example:
 
 ```js
-CubeDemo.prototype.computeSimpleProjectionMatrix = function(scaleFactor) {
+CubeDemo.prototype.computeSimpleProjectionMatrix = function (scaleFactor) {
   this.transforms.projection = [
     1, 0, 0, 0,
     0, 1, 0, 0,
@@ -572,7 +572,7 @@ The reason to flip the z axis is that the clip space coordinate system is a left
 Let's take a look at a `perspectiveMatrix()` function, which computes the perspective projection matrix.
 
 ```js
-MDN.perspectiveMatrix = function(fieldOfViewInRadians, aspectRatio, near, far) {
+MDN.perspectiveMatrix = function (fieldOfViewInRadians, aspectRatio, near, far) {
   const f = 1.0 / Math.tan(fieldOfViewInRadians / 2);
   const rangeInv = 1 / (near - far);
 
@@ -599,7 +599,7 @@ The four parameters into this function are:
 In the latest version of the box demo, the `computeSimpleProjectionMatrix()` method has been replaced with the `computePerspectiveMatrix()` method.
 
 ```js
-CubeDemo.prototype.computePerspectiveMatrix = function() {
+CubeDemo.prototype.computePerspectiveMatrix = function () {
   const fieldOfViewInRadians = Math.PI * 0.5;
   const aspectRatio = window.innerWidth / window.innerHeight;
   const nearClippingPlaneDistance = 1;
@@ -658,7 +658,7 @@ Unlike the model matrix, which directly transforms the model vertices, the view
 The following `computeViewMatrix()` method animates the view matrix by moving it in and out, and left and right.
 
 ```js
-CubeDemo.prototype.computeViewMatrix = function(now) {
+CubeDemo.prototype.computeViewMatrix = function (now) {
   const moveInAndOut = 20 * Math.sin(now * 0.002);
   const moveLeftAndRight = 15 * Math.sin(now * 0.0017);
 
diff --git a/files/en-us/web/api/webgl_lose_context/losecontext/index.md b/files/en-us/web/api/webgl_lose_context/losecontext/index.md
index 510b7df159dd899..77eb08c38312950 100644
--- a/files/en-us/web/api/webgl_lose_context/losecontext/index.md
+++ b/files/en-us/web/api/webgl_lose_context/losecontext/index.md
@@ -43,7 +43,7 @@ event:
 const canvas = document.getElementById('canvas');
 const gl = canvas.getContext('webgl');
 
-canvas.addEventListener('webglcontextlost', function(e) {
+canvas.addEventListener('webglcontextlost', (e) => {
   console.log(e);
 }, false);
 
diff --git a/files/en-us/web/api/webgl_lose_context/restorecontext/index.md b/files/en-us/web/api/webgl_lose_context/restorecontext/index.md
index f0c4f2258310e57..999a9e4c5d69798 100644
--- a/files/en-us/web/api/webgl_lose_context/restorecontext/index.md
+++ b/files/en-us/web/api/webgl_lose_context/restorecontext/index.md
@@ -46,7 +46,7 @@ event:
 const canvas = document.getElementById('canvas');
 const gl = canvas.getContext('webgl');
 
-canvas.addEventListener('webglcontextrestored', function(e) {
+canvas.addEventListener('webglcontextrestored', (e) => {
   console.log(e);
 }, false);
 
diff --git a/files/en-us/web/api/webglcontextevent/index.md b/files/en-us/web/api/webglcontextevent/index.md
index dae03840d8029d5..13c24cc5ee8d3c0 100644
--- a/files/en-us/web/api/webglcontextevent/index.md
+++ b/files/en-us/web/api/webglcontextevent/index.md
@@ -35,7 +35,7 @@ With the help of the {{domxref("WEBGL_lose_context")}} extension, you can simula
 const canvas = document.getElementById('canvas');
 const gl = canvas.getContext('webgl');
 
-canvas.addEventListener('webglcontextlost', function(e) {
+canvas.addEventListener('webglcontextlost', (e) => {
   console.log(e);
 }, false);
 
diff --git a/files/en-us/web/api/webglcontextevent/statusmessage/index.md b/files/en-us/web/api/webglcontextevent/statusmessage/index.md
index 8915fcf076d02c3..151a0d18b0698bf 100644
--- a/files/en-us/web/api/webglcontextevent/statusmessage/index.md
+++ b/files/en-us/web/api/webglcontextevent/statusmessage/index.md
@@ -23,7 +23,7 @@ The `statusMessage` property can contain a platform dependent string with detail
 const canvas = document.getElementById('canvas');
 const gl = canvas.getContext('webgl');
 
-canvas.addEventListener('webglcontextcreationerror', function(e) {
+canvas.addEventListener('webglcontextcreationerror', (e) => {
   console.log(`WebGL context creation failed: ${e.statusMessage || 'Unknown error'}`);
 }, false);
 ```
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/answer_a_call/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/answer_a_call/index.md
index b4d5e0c5a6aa588..605ef9c8a8dde66 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/answer_a_call/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/answer_a_call/index.md
@@ -12,8 +12,8 @@ Now our users can make a call, but they can't answer one. Let's add the next pie
 1. The peerJS framework makes the `.on('call')` event available to use so let's use it here. Add this to the bottom of `script.js`:
 
     ```js
-    peer.on('call', function(call) {
-        const answerCall = confirm("Do you want to answer?")
+    peer.on('call', (call) => {
+      const answerCall = confirm("Do you want to answer?")
     });
     ```
 
@@ -26,20 +26,20 @@ Now our users can make a call, but they can't answer one. Let's add the next pie
 2. Let's flesh out this event listener. Update it as follows:
 
     ```js
-    peer.on('call', function(call) {
-       const answerCall = confirm("Do you want to answer?")
-
-       if(answerCall){
-          call.answer(window.localStream) // A
-          showConnectedContent(); // B
-          call.on('stream', function(stream) { // C
-             window.remoteAudio.srcObject = stream;
-             window.remoteAudio.autoplay = true;
-             window.peerStream = stream;
-          });
-       } else {
-          console.log("call denied"); // D
-       }
+    peer.on('call', (call) => {
+      const answerCall = confirm("Do you want to answer?")
+
+      if (answerCall){
+        call.answer(window.localStream) // A
+        showConnectedContent(); // B
+        call.on('stream', (stream) => { // C
+          window.remoteAudio.srcObject = stream;
+          window.remoteAudio.autoplay = true;
+          window.peerStream = stream;
+        });
+      } else {
+        console.log("call denied"); // D
+      }
     });
     ```
 
@@ -47,7 +47,7 @@ Now our users can make a call, but they can't answer one. Let's add the next pie
 
     - `call.answer(window.localStream)`: if `answerCall` is `true`, you'll want to call peerJS's `answer()` function on the call to create an answer, passing it the local stream.
     - `showCallContent`: Similar to what you did in the call button event listener, you want to ensure the person being called sees the correct HTML content.
-    - Everything in the `call.on('stream', function(){ }` block is exactly the same as it is in call button's event listener. The reason you need to add it here too is so that the browser is also updated for the person answering the call.
+    - Everything in the `call.on('stream', () => { }` block is exactly the same as it is in call button's event listener. The reason you need to add it here too is so that the browser is also updated for the person answering the call.
     - If the person denies the call, we're just going to log a message to the console.
 
 3. The code you have now is enough for you to create a call and answer it. Refresh your browsers and test it out. You'll want to make sure that both browsers have the console open or else you won't get the prompt to answer the call. Click call, submit the peer ID for the other browser and then answer the call. The final page should look like this:
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
index 4e9b647ea3de691..e4d118c28888942 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/create_a_peer_connection/index.md
@@ -33,7 +33,7 @@ Next, you want to ensure your users have a way of connecting with their peers. I
 3. When a connection is created, let's use the PeerJS framework's `on('connection')` to set the remote peer's ID and open the connection. The function for this listener accepts a `connection` object which is an instance of the `DataConnection` object (which is a wrapper around WebRTC's [`RTCDataChannel`](/en-US/docs/Web/API/RTCDataChannel)); within this function you'll want to assign it to a variable. Again you'll want to create the variable outside of the function so that you can assign it later. Add the following below your previous code:
 
     ```js
-    peer.on('connection', function(connection){
+    peer.on('connection', (connection) => {
         conn = connection;
     });
     ```
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/creating_a_call/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/creating_a_call/index.md
index 068062fde5da399..6a60e13c1114ab2 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/creating_a_call/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/creating_a_call/index.md
@@ -18,24 +18,24 @@ Exciting times — now you're going to give your users the ability to create cal
 2. When a caller clicks "Call" you'll want to ask them for the peer ID of the peer they want to call (which we will store in the `code` variable in `getStreamCode()`) and then you'll want to create a connection with that code. Add the following below your previous code:
 
     ```js
-    callBtn.addEventListener('click', function(){
-        getStreamCode();
-        connectPeers();
-        const call = peer.call(code, window.localStream); // A
-
-        call.on('stream', function(stream) { // B
-            window.remoteAudio.srcObject = stream; // C
-            window.remoteAudio.autoplay = true; // D
-            window.peerStream = stream; //E
-            showConnectedContent(); //F    });
-        })
+    callBtn.addEventListener('click', () => {
+      getStreamCode();
+      connectPeers();
+      const call = peer.call(code, window.localStream); // A
+
+      call.on('stream', (stream) => { // B
+        window.remoteAudio.srcObject = stream; // C
+        window.remoteAudio.autoplay = true; // D
+        window.peerStream = stream; //E
+        showConnectedContent(); //F    });
+      })
     })
     ```
 
     Let's walk through this code:
 
     - `const call = peer.call(code, window.localStream)`: This will create a call with the `code` and `window.localStream` we've previously assigned. Note that the `localStream` will be the user's `localStream`. So for caller A it'll be their stream & for B, their own stream.
-    - `call.on('stream', function(stream) {` : peerJS gives us a `stream` event which you can use on the `call` that you've created. When a call starts streaming, you need to ensure that the remote stream coming from the call is assigned to the correct HTML elements and window, this is where you'll do that.
+    - `call.on('stream', (stream) => {` : peerJS gives us a `stream` event which you can use on the `call` that you've created. When a call starts streaming, you need to ensure that the remote stream coming from the call is assigned to the correct HTML elements and window, this is where you'll do that.
     - The anonymous function takes a `MediaStream` object as an argument, which you then have to set to your window's HTML like you've done before. Here we get your remote `<audio>` element and assign the stream passed to the function to the `srcObject` property.
     - Ensure the element's `autoplay` attribute is also set to `true`.
     - Ensure that the window's `peerStream` is set to the stream passed to the function.
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/end_a_call/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/end_a_call/index.md
index 3f80056ce9f05c0..3589b26fd16fd8a 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/end_a_call/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/end_a_call/index.md
@@ -13,17 +13,17 @@ You've nearly finished! The last thing you want to do is ensure your callers hav
 
     ```js
     const hangUpBtn = document.querySelector('.hangup-btn');
-    hangUpBtn.addEventListener('click', function (){
-        conn.close();
-        showCallContent();
+    hangUpBtn.addEventListener('click', () => {
+      conn.close();
+      showCallContent();
     })
     ```
 
-2. When the connection has been closed, you also want to display the correct HTML content so you can just call your `showCallContent()` function. Within the `call` event, you also want to ensure the remote browser is updated. To achieve this, add another event listener within the `peer.on('call', function(stream){ }` event listener, within the conditional block.
+2. When the connection has been closed, you also want to display the correct HTML content so you can just call your `showCallContent()` function. Within the `call` event, you also want to ensure the remote browser is updated. To achieve this, add another event listener within the `peer.on('call', (stream) => { }` event listener, within the conditional block.
 
     ```js
-    conn.on('close', function (){
-        showCallContent();
+    conn.on('close', () => {
+      showCallContent();
     })
     ```
 
diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md
index 8bbaf1f0ddedbf5..5164055a0da7556 100644
--- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md
+++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md
@@ -12,8 +12,8 @@ Alright, so you've got the microphone permissions set up. The next step is to ma
 1. Let's use the `open` event to create a listener that displays the peer's ID when it is open. Add the following code to the bottom of `script.js`:
 
     ```js
-    peer.on('open', function () {
-        window.caststatus.textContent = `Your device ID is: ${peer.id}`;
+    peer.on('open', () => {
+      window.caststatus.textContent = `Your device ID is: ${peer.id}`;
     });
     ```
 
@@ -26,26 +26,20 @@ Alright, so you've got the microphone permissions set up. The next step is to ma
 3. While you're here, you may as well create some functions to display and hide various content, which you'll use later. There are two functions you should create, `showCallContent()` and `showConnectedContent()`. These functions will be responsible for showing the call button and showing the hang up button and audio elements when appropriate.
 
     ```js
-    const audioContainer = document.querySelector('.call-container');/**
-     * Displays the call button and peer ID
-     * @returns{void}
-     */
-
+    const audioContainer = document.querySelector('.call-container');
+    
+    // Displays the call button and peer ID
     function showCallContent() {
-        window.caststatus.textContent = `Your device ID is: ${peer.id}`;
-        callBtn.hidden = false;
-        audioContainer.hidden = true;
+      window.caststatus.textContent = `Your device ID is: ${peer.id}`;
+      callBtn.hidden = false;
+      audioContainer.hidden = true;
     }
 
-    /**
-     * Displays the audio controls and correct copy
-     * @returns{void}
-     */
-
+    // Displays the audio controls and correct copy
     function showConnectedContent() {
-        window.caststatus.textContent = `You're connected`;
-        callBtn.hidden = true;
-        audioContainer.hidden = false;
+      window.caststatus.textContent = "You're connected";
+      callBtn.hidden = true;
+      audioContainer.hidden = false;
     }
     ```
 
diff --git a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
index 4d2debfe8d361e0..ad37bca23d73c89 100644
--- a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
+++ b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md
@@ -217,7 +217,7 @@ function handleUserlistMsg(msg) {
     listElem.removeChild(listElem.firstChild);
   }
 
-  msg.users.forEach(function(username) {
+  msg.users.forEach((username) => {
     const item = document.createElement("li");
     item.appendChild(document.createTextNode(username));
     item.addEventListener("click", invite, false);
@@ -260,11 +260,11 @@ function invite(evt) {
     createPeerConnection();
 
     navigator.mediaDevices.getUserMedia(mediaConstraints)
-    .then(function(localStream) {
-      document.getElementById("local_video").srcObject = localStream;
-      localStream.getTracks().forEach((track) => myPeerConnection.addTrack(track, localStream));
-    })
-    .catch(handleGetUserMediaError);
+      .then((localStream) => {
+        document.getElementById("local_video").srcObject = localStream;
+        localStream.getTracks().forEach((track) => myPeerConnection.addTrack(track, localStream));
+      })
+      .catch(handleGetUserMediaError);
   }
 }
 ```
@@ -370,18 +370,17 @@ Once the caller has created its {{domxref("RTCPeerConnection")}}, created a medi
 
 ```js
 function handleNegotiationNeededEvent() {
-  myPeerConnection.createOffer().then(function(offer) {
-    return myPeerConnection.setLocalDescription(offer);
-  })
-  .then(function() {
-    sendToServer({
-      name: myUsername,
-      target: targetUsername,
-      type: "video-offer",
-      sdp: myPeerConnection.localDescription
-    });
-  })
-  .catch(reportError);
+  myPeerConnection.createOffer()
+    .then((offer) => myPeerConnection.setLocalDescription(offer))
+    .then(() => {
+      sendToServer({
+        name: myUsername,
+        target: targetUsername,
+        type: "video-offer",
+        sdp: myPeerConnection.localDescription
+      });
+    })
+    .catch(reportError);
 }
 ```
 
@@ -423,32 +422,27 @@ function handleVideoOfferMsg(msg) {
 
   const desc = new RTCSessionDescription(msg.sdp);
 
-  myPeerConnection.setRemoteDescription(desc).then(function () {
-    return navigator.mediaDevices.getUserMedia(mediaConstraints);
-  })
-  .then(function(stream) {
-    localStream = stream;
-    document.getElementById("local_video").srcObject = localStream;
-
-    localStream.getTracks().forEach((track) => myPeerConnection.addTrack(track, localStream));
-  })
-  .then(function() {
-    return myPeerConnection.createAnswer();
-  })
-  .then(function(answer) {
-    return myPeerConnection.setLocalDescription(answer);
-  })
-  .then(function() {
-    const msg = {
-      name: myUsername,
-      target: targetUsername,
-      type: "video-answer",
-      sdp: myPeerConnection.localDescription
-    };
+  myPeerConnection.setRemoteDescription(desc)
+    .then(() => navigator.mediaDevices.getUserMedia(mediaConstraints))
+    .then((stream) => {
+      localStream = stream;
+      document.getElementById("local_video").srcObject = localStream;
 
-    sendToServer(msg);
-  })
-  .catch(handleGetUserMediaError);
+      localStream.getTracks().forEach((track) => myPeerConnection.addTrack(track, localStream));
+    })
+    .then(() => myPeerConnection.createAnswer())
+    .then((answer) => myPeerConnection.setLocalDescription(answer))
+    .then(() => {
+      const msg = {
+        name: myUsername,
+        target: targetUsername,
+        type: "video-answer",
+        sdp: myPeerConnection.localDescription
+      };
+
+      sendToServer(msg);
+    })
+    .catch(handleGetUserMediaError);
 }
 ```
 
diff --git a/files/en-us/web/api/webrtc_api/using_dtmf/index.md b/files/en-us/web/api/webrtc_api/using_dtmf/index.md
index d44360f557c0739..8f06ec897342902 100644
--- a/files/en-us/web/api/webrtc_api/using_dtmf/index.md
+++ b/files/en-us/web/api/webrtc_api/using_dtmf/index.md
@@ -116,7 +116,7 @@ These are, in order:
 When the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to add an event listener to the dial button so that clicking it calls the `connectAndDial()` function to begin the connection process.
 
 ```js
-window.addEventListener("load", function() {
+window.addEventListener("load", () => {
   logElement = document.querySelector(".log");
   dialButton = document.querySelector("#dial");
 
@@ -218,13 +218,13 @@ function handleToneChangeEvent(event) {
     log(`Tone played: ${event.tone}`);
   } else {
     log("All tones have played. Disconnecting.");
-    callerPC.getLocalStreams().forEach(function(stream) {
-      stream.getTracks().forEach(function(track) {
+    callerPC.getLocalStreams().forEach((stream) => {
+      stream.getTracks().forEach((track) => {
         track.stop();
       });
     });
-    receiverPC.getLocalStreams().forEach(function(stream) {
-      stream.getTracks().forEach(function(track) {
+    receiverPC.getLocalStreams().forEach((stream) => {
+      stream.getTracks().forEach((track) => {
         track.stop();
       });
     });
@@ -294,23 +294,23 @@ When the calling {{domxref("RTCPeerConnection")}} begins to receive media (after
 function handleCallerNegotiationNeeded() {
   log("Negotiating…");
   callerPC.createOffer(offerOptions)
-  .then(function(offer) {
+  .then((offer) => {
     log(`Setting caller's local description: ${offer.sdp}`);
     return callerPC.setLocalDescription(offer);
   })
-  .then(function() {
+  .then(() => {
     log("Setting receiver's remote description to the same as caller's local");
     return receiverPC.setRemoteDescription(callerPC.localDescription)
   })
-  .then(function() {
+  .then(() => {
     log("Creating answer");
     return receiverPC.createAnswer();
   })
-  .then(function(answer) {
+  .then((answer) => {
     log(`Setting receiver's local description to ${answer.sdp}`);
     return receiverPC.setLocalDescription(answer);
   })
-  .then(function() {
+  .then(() => {
     log("Setting caller's remote description to match");
     return callerPC.setRemoteDescription(receiverPC.localDescription);
   })
diff --git a/files/en-us/web/api/websocket/binarytype/index.md b/files/en-us/web/api/websocket/binarytype/index.md
index df234d1f8f0f6bd..0bc4c5587f575ae 100644
--- a/files/en-us/web/api/websocket/binarytype/index.md
+++ b/files/en-us/web/api/websocket/binarytype/index.md
@@ -29,19 +29,20 @@ A string:
 ```js
 // Create WebSocket connection.
 const socket = new WebSocket("ws://localhost:8080");
+
 // Change binary type from "blob" to "arraybuffer"
 socket.binaryType = "arraybuffer";
 
 // Listen for messages
-socket.addEventListener("message", function (event) {
-    if(event.data instanceof ArrayBuffer) {
-        // binary frame
-        const view = new DataView(event.data);
-        console.log(view.getInt32(0));
-    } else {
-        // text frame
-        console.log(event.data);
-    }
+socket.addEventListener("message", (event) => {
+  if (event.data instanceof ArrayBuffer) {
+    // binary frame
+    const view = new DataView(event.data);
+    console.log(view.getInt32(0));
+  } else {
+    // text frame
+    console.log(event.data);
+  }
 });
 ```
 
diff --git a/files/en-us/web/api/websocket/close_event/index.md b/files/en-us/web/api/websocket/close_event/index.md
index 309f7314ff3e1d4..d5b75166f68edb2 100644
--- a/files/en-us/web/api/websocket/close_event/index.md
+++ b/files/en-us/web/api/websocket/close_event/index.md
@@ -56,7 +56,7 @@ exampleSocket.addEventListener('close', (event) => {
 You can perform the same actions using the event handler property, like this:
 
 ```js
-exampleSocket.onclose = function (event) {
+exampleSocket.onclose = (event) => {
   console.log('The connection has been closed successfully.');
 };
 ```
diff --git a/files/en-us/web/api/websocket/error_event/index.md b/files/en-us/web/api/websocket/error_event/index.md
index f8f59b52c608aea..324f58abc6ca934 100644
--- a/files/en-us/web/api/websocket/error_event/index.md
+++ b/files/en-us/web/api/websocket/error_event/index.md
@@ -36,7 +36,7 @@ A generic {{domxref("Event")}}.
 const socket = new WebSocket('ws://localhost:8080');
 
 // Listen for possible errors
-socket.addEventListener('error', function (event) {
+socket.addEventListener('error', (event) => {
   console.log('WebSocket error: ', event);
 });
 ```
diff --git a/files/en-us/web/api/websocket/index.md b/files/en-us/web/api/websocket/index.md
index 25559b4f5b8f6cb..c8ef778cf100036 100644
--- a/files/en-us/web/api/websocket/index.md
+++ b/files/en-us/web/api/websocket/index.md
@@ -71,12 +71,12 @@ Listen to these events using `addEventListener()` or by assigning an event liste
 const socket = new WebSocket('ws://localhost:8080');
 
 // Connection opened
-socket.addEventListener('open', function (event) {
+socket.addEventListener('open', (event) => {
     socket.send('Hello Server!');
 });
 
 // Listen for messages
-socket.addEventListener('message', function (event) {
+socket.addEventListener('message', (event) => {
     console.log('Message from server ', event.data);
 });
 ```
diff --git a/files/en-us/web/api/websocket/message_event/index.md b/files/en-us/web/api/websocket/message_event/index.md
index 7dc0c070ed95073..1a01a08337cf5fb 100644
--- a/files/en-us/web/api/websocket/message_event/index.md
+++ b/files/en-us/web/api/websocket/message_event/index.md
@@ -51,7 +51,7 @@ _In addition to the properties listed below, properties from the parent interfac
 const socket = new WebSocket('ws://localhost:8080');
 
 // Listen for messages
-socket.addEventListener('message', function (event) {
+socket.addEventListener('message', (event) => {
     console.log('Message from server ', event.data);
 });
 ```
diff --git a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
index 3fda2c9fe9eb391..1d77b90e57ca53a 100644
--- a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -85,7 +85,7 @@ As establishing a connection is asynchronous and prone to failure there is no gu
 We can at least be sure that attempting to send data only takes place once a connection is established by defining an {{domxref("WebSocket.onopen", "onopen")}} event handler to do the work:
 
 ```js
-exampleSocket.onopen = function (event) {
+exampleSocket.onopen = (event) => {
   exampleSocket.send("Here's some text that the server is urgently awaiting!");
 };
 ```
@@ -124,7 +124,7 @@ for the `message` event, or use the {{domxref("WebSocket.onmessage",
 like this:
 
 ```js
-exampleSocket.onmessage = function (event) {
+exampleSocket.onmessage = (event) => {
   console.log(event.data);
 }
 ```
@@ -140,7 +140,7 @@ Let's consider the chat client application first alluded to in [Using JSON to tr
 The code that interprets these incoming messages might look like this:
 
 ```js
-exampleSocket.onmessage = function (event) {
+exampleSocket.onmessage = (event) => {
   const f = document.getElementById("chatbox").contentDocument;
   let text = "";
   const msg = JSON.parse(event.data);
diff --git a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
index 5f7572483c4cdd1..73b914dad4be5d9 100644
--- a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md
@@ -147,7 +147,7 @@ You must:
 4. Write the hash back as the value of "Sec-WebSocket-Accept" response header in an HTTP response
 
 ```cs
- if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
+if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
 {
     const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
 
@@ -338,50 +338,49 @@ class Server {
 <button>send</button>
 <div id=output></div>
 <script>
-    // http://www.websocket.org/echo.html
+  // http://www.websocket.org/echo.html
 
-    const button = document.querySelector("button");
-    const output = document.querySelector("#output");
-    const textarea = document.querySelector("textarea");
-        // wsUri = "ws://echo.websocket.org/",
-        wsUri = "ws://127.0.0.1/",
-        websocket = new WebSocket(wsUri);
+  const button = document.querySelector("button");
+  const output = document.querySelector("#output");
+  const textarea = document.querySelector("textarea");
+  const wsUri = "ws://127.0.0.1/";
+  const websocket = new WebSocket(wsUri);
 
-    button.addEventListener("click", onClickButton);
+  button.addEventListener("click", onClickButton);
 
-    websocket.onopen = function (e) {
-        writeToScreen("CONNECTED");
-        doSend("WebSocket rocks");
-    };
+  websocket.onopen = (e) => {
+    writeToScreen("CONNECTED");
+    doSend("WebSocket rocks");
+  };
 
-    websocket.onclose = function (e) {
-        writeToScreen("DISCONNECTED");
-    };
+  websocket.onclose = (e) => {
+    writeToScreen("DISCONNECTED");
+  };
 
-    websocket.onmessage = function (e) {
-        writeToScreen("<span>RESPONSE: " + e.data + "</span>");
-    };
+  websocket.onmessage = (e) => {
+    writeToScreen(`<span>RESPONSE: ${e.data}</span>`);
+  };
 
-    websocket.onerror = function (e) {
-        writeToScreen("<span class=error>ERROR:</span> " + e.data);
-    };
+  websocket.onerror = (e) => {
+    writeToScreen(`<span class=error>ERROR:</span> ${e.data}`);
+  };
 
-    function doSend(message) {
-        writeToScreen("SENT: " + message);
-        websocket.send(message);
-    }
+  function doSend(message) {
+    writeToScreen(`SENT: ${message}`);
+    websocket.send(message);
+  }
 
-    function writeToScreen(message) {
-        output.insertAdjacentHTML("afterbegin", "<p>" + message + "</p>");
-    }
+  function writeToScreen(message) {
+    output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
+  }
 
-    function onClickButton() {
-        const text = textarea.value;
+  function onClickButton() {
+    const text = textarea.value;
 
-        text && doSend(text);
-        textarea.value = "";
-        textarea.focus();
-    }
+    text && doSend(text);
+    textarea.value = "";
+    textarea.focus();
+  }
 </script>
 ```
 
diff --git a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md
index 39c46e2111d23b8..f6ada61274ecb48 100644
--- a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md
+++ b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md
@@ -128,35 +128,35 @@ function start() {
 Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (`drawScene()`) for the first time. This is the non-WebVR — normal — rendering loop.
 
 ```js
-    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+  // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
 
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    drawScene();
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  drawScene();
 ```
 
 Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the `else` clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.
 
 ```js
-    // WebVR: Check to see if WebVR is supported
-    if(navigator.getVRDisplays) {
-      console.log('WebVR 1.1 supported');
+  // WebVR: Check to see if WebVR is supported
+  if (navigator.getVRDisplays) {
+    console.log('WebVR 1.1 supported');
 ```
 
 Inside our `if () { }` block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.
 
 ```js
-      // Then get the displays attached to the computer
-      navigator.getVRDisplays().then(function(displays) {
+    // Then get the displays attached to the computer
+    navigator.getVRDisplays().then((displays) => {
 ```
 
 Inside the promise `then()` block, we check whether the array length is more than 0; if so, we set the value of our `vrDisplay` variable to the 0 index item inside the array. `vrDisplay` now contains a {{domxref("VRDisplay")}} object representing our connected display!
 
 ```js
-        // If a display is available, use it to present the scene
-        if(displays.length > 0) {
-          vrDisplay = displays[0];
-          console.log('Display found');
+      // If a display is available, use it to present the scene
+      if (displays.length > 0) {
+        vrDisplay = displays[0];
+        console.log('Display found');
 ```
 
 > **Note:** It is unlikely that you'll have multiple VR displays connected to your computer, and this is just a simple demo, so this will do for now.
@@ -174,11 +174,11 @@ Since the maximum number of layers you can display is currently 1, and the only
 `requestPresent()` returns a promise that is fulfilled when the presentation begins successfully.
 
 ```js
-          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-          btn.addEventListener('click', function() {
-            if(btn.textContent === 'Start VR display') {
-              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
-                console.log('Presenting to WebVR display');
+        // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+        btn.addEventListener('click', () => {
+          if (btn.textContent === 'Start VR display') {
+            vrDisplay.requestPresent([{ source: canvas }]).then(() => {
+              console.log('Presenting to WebVR display');
 ```
 
 With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.
@@ -186,49 +186,48 @@ With our presentation request successful, we now want to start setting up to ren
 We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.
 
 ```js
-                // Set the canvas size to the size of the vrDisplay viewport
+              // Set the canvas size to the size of the vrDisplay viewport
 
-                const leftEye = vrDisplay.getEyeParameters('left');
-                const rightEye = vrDisplay.getEyeParameters('right');
+              const leftEye = vrDisplay.getEyeParameters('left');
+              const rightEye = vrDisplay.getEyeParameters('right');
 
-                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
-                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+              canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+              canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
 ```
 
 Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the `drawScene()` function, and instead invoke `drawVRScene()`. This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.
 
 ```js
-                // stop the normal presentation, and start the vr presentation
-                window.cancelAnimationFrame(normalSceneFrame);
-                drawVRScene();
+              // stop the normal presentation, and start the vr presentation
+              window.cancelAnimationFrame(normalSceneFrame);
+              drawVRScene();
 ```
 
 Finally, we update the button text so that the next time it is pressed, it will stop presentation to the VR display.
 
 ```js
-                btn.textContent = 'Exit VR display';
-              });
+              btn.textContent = 'Exit VR display';
+            });
 ```
 
 To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the `requestAnimationFrame` calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling `drawScene()`.
 
 ```js
-            } else {
-              vrDisplay.exitPresent();
-              console.log('Stopped presenting to WebVR display');
-
-              btn.textContent = 'Start VR display';
-
-              // Stop the VR presentation, and start the normal presentation
-              vrDisplay.cancelAnimationFrame(vrSceneFrame);
-              drawScene();
-            }
-          });
-        }
-      });
-    } else {
-      console.log('WebVR API not supported by this browser.');
-    }
+          } else {
+            vrDisplay.exitPresent();
+            console.log('Stopped presenting to WebVR display');
+
+            btn.textContent = 'Start VR display';
+
+            // Stop the VR presentation, and start the normal presentation
+            vrDisplay.cancelAnimationFrame(vrSceneFrame);
+            drawScene();
+          }
+        });
+      }
+    });
+  } else {
+    console.log('WebVR API not supported by this browser.');
   }
 }
 ```
@@ -274,7 +273,7 @@ Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameDat
   const curFramePose = frameData.pose;
   const curPos = curFramePose.position;
   const curOrient = curFramePose.orientation;
-  if(poseStatsDisplayed) {
+  if (poseStatsDisplayed) {
     displayPoseStats(curFramePose);
   }
 ```
@@ -333,17 +332,14 @@ This is a quick and dirty way to use VR pose data, but it illustrates the basic
     // scene. Our field of view is 45 degrees, with a width/height
     // ratio of 640:480, and we only want to see objects between 0.1 units
     // and 100 units away from the camera.
-
     perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
 
     // Set the drawing position to the "identity" point, which is
     // the center of the scene.
-
     loadIdentity();
 
     // Now move the drawing position a bit to where we want to start
     // drawing the cube.
-
     mvTranslate([
                   0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
                   5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
@@ -351,35 +347,29 @@ This is a quick and dirty way to use VR pose data, but it illustrates the basic
                ]);
 
     // Save the current matrix, then rotate before we draw.
-
     mvPushMatrix();
     mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
 
     // Draw the cube by binding the array buffer to the cube's vertices
     // array, setting attributes, and pushing it to GL.
-
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
     gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
 
     // Set the texture coordinates attribute for the vertices.
-
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
     gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
 
     // Specify the texture to map onto the faces.
-
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
     gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
 
     // Draw the cube.
-
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
     setMatrixUniforms();
     gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
 
     // Restore the original matrix
-
     mvPopMatrix();
   }
 ```
@@ -388,14 +378,12 @@ The next bit of the code has nothing to do with WebVR — it just updates the ro
 
 ```js
   // Update the rotation for the next draw, if it's time to do so.
-
   let currentTime = (new Date).getTime();
   if (lastCubeUpdateTime) {
     const delta = currentTime - lastCubeUpdateTime;
 
     cubeRotation += (30 * delta) / 1000.0;
   }
-
   lastCubeUpdateTime = currentTime;
 ```
 
@@ -476,7 +464,7 @@ The WebVR spec features a number of events that are fired, allowing our app code
 To demonstrate how they work, our simple demo includes the following example:
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function(e) {
+window.addEventListener('vrdisplaypresentchange', (e) => {
   console.log(`Display ${e.display.displayId} presentation has changed. Reason given: ${e.reason}.`);
 });
 ```
diff --git a/files/en-us/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/en-us/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
index c47cd80b50bcfe2..902385eebb51fea 100644
--- a/files/en-us/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
+++ b/files/en-us/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
@@ -64,7 +64,7 @@ Here we first use a tracking variable, `initialRun`, to note that this is the fi
 
 ```js
 function reportDisplays() {
-  navigator.getVRDisplays().then(function(displays) {
+  navigator.getVRDisplays().then((displays) => {
     console.log(`${displays.length} displays`);
     for (let i = 0; i < displays.length; i++) {
       const cap = displays[i].capabilities;
@@ -135,12 +135,11 @@ At the end of our example we first include the `removeGamepads()` function:
 
 ```js
 function removeGamepads() {
-    const gpLi = document.querySelectorAll('.gamepad');
-    for (let i = 0; i < gpLi.length; i++) {
+  const gpLi = document.querySelectorAll('.gamepad');
+  for (let i = 0; i < gpLi.length; i++) {
     list.removeChild(gpLi[i]);
-    }
-
-    reportGamepads();
+  }
+  reportGamepads();
 }
 ```
 
@@ -149,14 +148,14 @@ This function grabs references to all list items with a class name of `gamepad`,
 `removeGamepads()` will be run each time a gamepad is connected or disconnected, via the following event handlers:
 
 ```js
-window.addEventListener('gamepadconnected', function(e) {
+window.addEventListener('gamepadconnected', (e) => {
   info.textContent = `Gamepad ${e.gamepad.index} connected.`;
-  if(!initialRun) {
-      setTimeout(removeGamepads, 1000);
+  if (!initialRun) {
+    setTimeout(removeGamepads, 1000);
   }
 });
 
-window.addEventListener('gamepaddisconnected', function(e) {
+window.addEventListener('gamepaddisconnected', (e) => {
   info.textContent = `Gamepad ${e.gamepad.index} disconnected.`;
   setTimeout(removeGamepads, 1000);
 });
@@ -182,11 +181,11 @@ Inside the `drawVRScene()` function, you'll find this bit of code:
 const gamepads = navigator.getGamepads();
 const gp = gamepads[0];
 
-if(gp) {
+if (gp) {
   const gpPose = gp.pose;
   const curPos = gpPose.position;
   const curOrient = gpPose.orientation;
-  if(poseStatsDisplayed) {
+  if (poseStatsDisplayed) {
     displayPoseStats(gpPose);
   }
 }
@@ -199,24 +198,24 @@ The next thing we do is to get the {{domxref("GamepadPose")}} object for the con
 Slightly later in the code, you can find this block:
 
 ```js
-if(gp && gpPose.hasPosition) {
+if (gp && gpPose.hasPosition) {
   mvTranslate([
-                0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
-                0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
-                -15.0 + (curPos[2] * 25)
-             ]);
-} else if(gp) {
+    0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
+    0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
+    -15.0 + (curPos[2] * 25)
+  ]);
+} else if (gp) {
   mvTranslate([
-                0.0 + (curOrient[1] * 15),
-                0.0 + (curOrient[0] * 15),
-                -15.0
-             ]);
+    0.0 + (curOrient[1] * 15),
+    0.0 + (curOrient[0] * 15),
+    -15.0
+  ]);
 } else {
   mvTranslate([
-                0.0,
-                0.0,
-                -15.0
-             ]);
+    0.0,
+    0.0,
+    -15.0
+  ]);
 }
 ```
 
@@ -237,13 +236,13 @@ function displayPoseStats(pose) {
   const angVel = pose.angularVelocity;
   const angAcc = pose.angularAcceleration;
 
-  if(pose.hasPosition) {
+  if (pose.hasPosition) {
     posStats.textContent = `Position: x ${pos[0].toFixed(3)}, y ${pos[1].toFixed(3)}, z ${pos[2].toFixed(3)}`;
   } else {
     posStats.textContent = 'Position not reported';
   }
 
-  if(pose.hasOrientation) {
+  if (pose.hasOrientation) {
     orientStats.textContent = `Orientation: x ${orient[0].toFixed(3)}, y ${orient[1].toFixed(3)}, z ${orient[2].toFixed(3)}`;
   } else {
     orientStats.textContent = 'Orientation not reported';
@@ -252,13 +251,13 @@ function displayPoseStats(pose) {
   linVelStats.textContent = `Linear velocity: x ${linVel[0].toFixed(3)}, y ${linVel[1].toFixed(3)}, z ${linVel[2].toFixed(3)}`;
   angVelStats.textContent = `Angular velocity: x ${angVel[0].toFixed(3)}, y ${angVel[1].toFixed(3)}, z ${angVel[2].toFixed(3)}`;
 
-  if(linAcc) {
+  if (linAcc) {
     linAccStats.textContent = `Linear acceleration: x ${linAcc[0].toFixed(3)}, y ${linAcc[1].toFixed(3)}, z ${linAcc[2].toFixed(3)}`;
   } else {
     linAccStats.textContent = 'Linear acceleration not reported';
   }
 
-  if(angAcc) {
+  if (angAcc) {
     angAccStats.textContent = `Angular acceleration: x ${angAcc[0].toFixed(3)}, y ${angAcc[1].toFixed(3)}, z ${angAcc[2].toFixed(3)}`;
   } else {
     angAccStats.textContent = 'Angular acceleration not reported';
diff --git a/files/en-us/web/api/webxr_device_api/inputs/index.md b/files/en-us/web/api/webxr_device_api/inputs/index.md
index 27867f056bcafcc..a87be08ac1c287e 100644
--- a/files/en-us/web/api/webxr_device_api/inputs/index.md
+++ b/files/en-us/web/api/webxr_device_api/inputs/index.md
@@ -224,7 +224,7 @@ Another option is to use the first input the user triggers the select action on.
 ```js
 let primaryInputSource = xrSession.inputSources[0];
 
-xrSession.onselect = function(event) {
+xrSession.onselect = (event) => {
   primaryInputSource = event.inputSource;
   xrSession.onselect = realSelectHandler;
   return realSelectHandler(event);
diff --git a/files/en-us/web/api/window/appinstalled_event/index.md b/files/en-us/web/api/window/appinstalled_event/index.md
index 46cd65b3a38843b..0d3ec59efd5e9a3 100644
--- a/files/en-us/web/api/window/appinstalled_event/index.md
+++ b/files/en-us/web/api/window/appinstalled_event/index.md
@@ -36,7 +36,7 @@ A generic {{domxref("Event")}}.
 You can use the `appinstalled` event in an {{domxref("EventTarget/addEventListener", "addEventListener")}} method:
 
 ```js
-window.addEventListener('appinstalled', function() {
+window.addEventListener('appinstalled', () => {
   console.log('Thank you for installing our app!');
 });
 ```
@@ -44,7 +44,7 @@ window.addEventListener('appinstalled', function() {
 Or use the `onappinstalled` event handler property:
 
 ```js
-window.onappinstalled = function() {
+window.onappinstalled = () => {
   console.log('Thank you for installing our app!');
 };
 ```
diff --git a/files/en-us/web/api/window/beforeinstallprompt_event/index.md b/files/en-us/web/api/window/beforeinstallprompt_event/index.md
index f3d1d4e4aca3727..129d13c809d0b61 100644
--- a/files/en-us/web/api/window/beforeinstallprompt_event/index.md
+++ b/files/en-us/web/api/window/beforeinstallprompt_event/index.md
@@ -46,11 +46,11 @@ The following example uses the `beforeinstallprompt` event to make an
 install button operable, by using the event inside a click handler.
 
 ```js
-window.addEventListener("beforeinstallprompt", function(beforeInstallPromptEvent) {
+window.addEventListener("beforeinstallprompt", (beforeInstallPromptEvent) => {
   beforeInstallPromptEvent.preventDefault(); // Prevents immediate prompt display
 
   // Shows prompt after a user clicks an "install" button
-  installButton.addEventListener("click", function(mouseEvent) {
+  installButton.addEventListener("click", (mouseEvent) => {
     // you should not use the MouseEvent here, obviously
     beforeInstallPromptEvent.prompt();
   });
diff --git a/files/en-us/web/api/window/deviceorientation_event/index.md b/files/en-us/web/api/window/deviceorientation_event/index.md
index db8353e3d15e1c6..ec2657771a3da8b 100644
--- a/files/en-us/web/api/window/deviceorientation_event/index.md
+++ b/files/en-us/web/api/window/deviceorientation_event/index.md
@@ -52,20 +52,17 @@ An {{domxref("DeviceOrientationEvent")}}. Inherits from {{domxref("Event")}}.
 
 ```js
 if (window.DeviceOrientationEvent) {
-    window.addEventListener("deviceorientation", function(event) {
-        // alpha: rotation around z-axis
-        const rotateDegrees = event.alpha;
-        // gamma: left to right
-        const leftToRight = event.gamma;
-        // beta: front back motion
-        const frontToBack = event.beta;
-
-        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
-    }, true);
+   window.addEventListener("deviceorientation", (event) => {
+     const rotateDegrees = event.alpha; // alpha: rotation around z-axis
+     const leftToRight = event.gamma; // gamma: left to right
+     const frontToBack = event.beta; // beta: front back motion
+
+     handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+   }, true);
 }
 
-const handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
-    // do something amazing
+const handleOrientationEvent = (frontToBack, leftToRight, rotateDegrees) => {
+  // do something amazing
 };
 ```
 
diff --git a/files/en-us/web/api/window/hashchange_event/index.md b/files/en-us/web/api/window/hashchange_event/index.md
index 2befc5d6c79525b..84f89d09f8b5614 100644
--- a/files/en-us/web/api/window/hashchange_event/index.md
+++ b/files/en-us/web/api/window/hashchange_event/index.md
@@ -49,7 +49,7 @@ In addition to the `Window` interface, the event handler property `onhashchange`
 You can use the `hashchange` event in an {{domxref("EventTarget/addEventListener", "addEventListener")}} method:
 
 ```js
-window.addEventListener('hashchange', function() {
+window.addEventListener('hashchange', () => {
   console.log('The hash has changed!')
 }, false);
 ```
diff --git a/files/en-us/web/api/window/languagechange_event/index.md b/files/en-us/web/api/window/languagechange_event/index.md
index ccec06926b29b3c..a36a48cedd154fb 100644
--- a/files/en-us/web/api/window/languagechange_event/index.md
+++ b/files/en-us/web/api/window/languagechange_event/index.md
@@ -39,7 +39,7 @@ In addition to the `Window` interface, the event handler property `onlanguagecha
 You can use the `languagechange` event in an {{domxref("EventTarget/addEventListener", "addEventListener")}} method:
 
 ```js
-window.addEventListener('languagechange', function() {
+window.addEventListener('languagechange', () => {
   console.log('languagechange event detected!');
 });
 ```
@@ -47,7 +47,7 @@ window.addEventListener('languagechange', function() {
 Or use the `onlanguagechange` event handler property:
 
 ```js
-window.onlanguagechange = function(event) {
+window.onlanguagechange = (event) => {
   console.log('languagechange event detected!');
 };
 ```
diff --git a/files/en-us/web/api/window/location/index.md b/files/en-us/web/api/window/location/index.md
index dea64138a9dc2b8..e2adba94bf0b894 100644
--- a/files/en-us/web/api/window/location/index.md
+++ b/files/en-us/web/api/window/location/index.md
@@ -84,8 +84,8 @@ function showLoc() {
 ### Example #5: Send a string of data to the server by modifying the `search` property:
 
 ```js
-function sendData (sData) {
-  location.search = sData;
+function sendData(data) {
+  location.search = data;
 }
 
 // in html: <button onclick="sendData('Some data');">Send data</button>
@@ -99,28 +99,33 @@ taken by the server, the current document is reloaded with the modified search s
 ```html
 <!doctype html>
 <html>
-<head>
-<meta charset="UTF-8"/>
-<title>MDN Example</title>
-<script>
-function showNode (oNode) {
-  document.documentElement.scrollTop = oNode.offsetTop;
-  document.documentElement.scrollLeft = oNode.offsetLeft;
-}
-
-function showBookmark (sBookmark, bUseHash) {
-  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
-  var oBookmark = document.querySelector(sBookmark);
-  if (oBookmark) { showNode(oBookmark); }
-}
-</script>
-<style>
-span.intLink {
-    cursor: pointer;
-    color: #0000ff;
-    text-decoration: underline;
-}
-</style>
+  <head>
+  <meta charset="UTF-8"/>
+  <title>MDN Example</title>
+  <script>
+    function showNode(node) {
+      document.documentElement.scrollTop = node.offsetTop;
+      document.documentElement.scrollLeft = node.offsetLeft;
+    }
+
+    function showBookmark(bookmark, useHash) {
+      if (arguments.length === 1 || useHash) {
+        location.hash = bookmark;
+        return; 
+      }
+      const bookmarkElement = document.querySelector(bookmark);
+      if (bookmarkElement) { 
+        showNode(bookmarkElement);
+      }
+    }
+  </script>
+  <style>
+    span.intLink {
+        cursor: pointer;
+        color: #0000ff;
+        text-decoration: underline;
+    }
+  </style>
 </head>
 
 <body>
@@ -154,7 +159,7 @@ span.intLink {
 …the same thing but with an animated page scroll:
 
 ```js
-const showBookmark = (function () {
+const showBookmark = (() => {
   let _useHash;
   let _scrollX;
   let _scrollY;
@@ -163,40 +168,52 @@ const showBookmark = (function () {
   let _itFrame;
   let _scrollId = -1;
   let _bookMark;
-   /*
-   * nDuration: the duration in milliseconds of each frame
-   * nFrames: number of frames for each scroll
-   */
-   let nDuration = 200;
-   let nFrames = 10;
+  
+  // duration: the duration in milliseconds of each frame
+  // frames: number of frames for each scroll
+  let duration = 200;
+  let frames = 10;
 
   function _next() {
-  if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
-  _isBot = true;
-  document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
-  document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
-  if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
-  _itFrame++;
+    if (_itFrame > frames) {
+      clearInterval(_scrollId); 
+      _scrollId = -1; 
+      return;
+    }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / frames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / frames);
+    if (_useHash && _itFrame === frames) {
+      location.hash = _bookMark;
+    }
+    _itFrame++;
   }
 
-  function _chkOwner () {
-  if (_isBot) { _isBot = false; return; }
-  if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  function _chkOwner() {
+    if (_isBot) {
+      _isBot = false;
+      return;
+    }
+    if (_scrollId > -1) {
+      clearInterval(_scrollId);
+      _scrollId = -1;
+    }
   }
 
-  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
-  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
-
-  return function (sBookmark, bUseHash) {
-    const oNode = document.querySelector(sBookmark);
-  _scrollY = document.documentElement.scrollTop;
-  _scrollX = document.documentElement.scrollLeft;
-  _bookMark = sBookmark;
-  _useHash = bUseHash === true;
-  _nodeX = oNode.offsetLeft;
-    _nodeY = oNode.offsetTop;
+  window.addEventListener("scroll", _chkOwner, false);
+  
+  return (bookmark, useHash) => {
+    const node = document.querySelector(bookmark);
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = bookmark;
+    _useHash = useHash === true;
+    _nodeX = node.offsetLeft;
+    _nodeY = node.offsetTop;
     _itFrame = 1;
-  if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+    if (_scrollId === -1) {
+      _scrollId = setInterval(_next, Math.round(duration / frames));
+    }
   };
 })();
 ```
diff --git a/files/en-us/web/api/window/popstate_event/index.md b/files/en-us/web/api/window/popstate_event/index.md
index a6243464f91bee7..d31953dcf70760a 100644
--- a/files/en-us/web/api/window/popstate_event/index.md
+++ b/files/en-us/web/api/window/popstate_event/index.md
@@ -95,9 +95,9 @@ A page at `http://example.com/example.html` running the following code will gene
 window.addEventListener('popstate', (event) => {
   console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`);
 });
-history.pushState({page: 1}, "title 1", "?page=1");
-history.pushState({page: 2}, "title 2", "?page=2");
-history.replaceState({page: 3}, "title 3", "?page=3");
+history.pushState({ page: 1 }, "title 1", "?page=1");
+history.pushState({ page: 2 }, "title 2", "?page=2");
+history.replaceState({ page: 3 }, "title 3", "?page=3");
 history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back(); // Logs "location: http://example.com/example.html, state: null"
 history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"
@@ -106,12 +106,12 @@ history.go(2);  // Logs "location: http://example.com/example.html?page=3, state
 The same example using the `onpopstate` event handler property:
 
 ```js
-window.onpopstate = function(event) {
+window.onpopstate = (event) => {
   console.log(`location: ${document.location}, state: ${JSON.stringify(event.state)}`);
 };
-history.pushState({page: 1}, "title 1", "?page=1");
-history.pushState({page: 2}, "title 2", "?page=2");
-history.replaceState({page: 3}, "title 3", "?page=3");
+history.pushState({ page: 1 }, "title 1", "?page=1");
+history.pushState({ page: 2 }, "title 2", "?page=2");
+history.replaceState({ page: 3 }, "title 3", "?page=3");
 history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back(); // Logs "location: http://example.com/example.html, state: null"
 history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"
diff --git a/files/en-us/web/api/window/sessionstorage/index.md b/files/en-us/web/api/window/sessionstorage/index.md
index 8d1af682c462338..14b968315a9846d 100644
--- a/files/en-us/web/api/window/sessionstorage/index.md
+++ b/files/en-us/web/api/window/sessionstorage/index.md
@@ -94,7 +94,7 @@ if (sessionStorage.getItem("autosave")) {
 }
 
 // Listen for changes in the text field
-field.addEventListener("change", function() {
+field.addEventListener("change", () => {
   // And save the results into the session storage object
   sessionStorage.setItem("autosave", field.value);
 });
diff --git a/files/en-us/web/api/window/speechsynthesis/index.md b/files/en-us/web/api/window/speechsynthesis/index.md
index a436caa6b106f01..40b731c7e3daa78 100644
--- a/files/en-us/web/api/window/speechsynthesis/index.md
+++ b/files/en-us/web/api/window/speechsynthesis/index.md
@@ -54,7 +54,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) {
   speechSynthesis.onvoiceschanged = populateVoiceList;
 }
 
-inputForm.onsubmit = function(event) {
+inputForm.onsubmit = (event) => {
   event.preventDefault();
 
   const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
diff --git a/files/en-us/web/api/window/unhandledrejection_event/index.md b/files/en-us/web/api/window/unhandledrejection_event/index.md
index 54de4c2c9973ef1..895d828f89d2bc8 100644
--- a/files/en-us/web/api/window/unhandledrejection_event/index.md
+++ b/files/en-us/web/api/window/unhandledrejection_event/index.md
@@ -83,7 +83,7 @@ window.onunhandledrejection = (event) => {
 Many environments (such as {{Glossary("Node.js")}}) report unhandled promise rejections to the console by default. You can prevent that from happening by adding a handler for `unhandledrejection` events that—in addition to any other tasks you wish to perform—calls {{domxref("Event.preventDefault()", "preventDefault()")}} to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code. This works because `unhandledrejection` is cancelable.
 
 ```js
-window.addEventListener('unhandledrejection', function (event) {
+window.addEventListener('unhandledrejection', (event) => {
   // code for handling the unhandled rejection
   // …
 
diff --git a/files/en-us/web/api/window/unload_event/index.md b/files/en-us/web/api/window/unload_event/index.md
index 7101f95b7637cce..56ac63785b4eac1 100644
--- a/files/en-us/web/api/window/unload_event/index.md
+++ b/files/en-us/web/api/window/unload_event/index.md
@@ -76,10 +76,10 @@ See the [Page Lifecycle API](https://developer.chrome.com/blog/page-lifecycle-ap
   <head>
     <title>Parent Frame</title>
     <script>
-      window.addEventListener('beforeunload', function(event) {
+      window.addEventListener('beforeunload', (event) => {
         console.log('I am the 1st one.');
       });
-      window.addEventListener('unload', function(event) {
+      window.addEventListener('unload', (event) => {
         console.log('I am the 3rd one.');
       });
     </script>
@@ -98,10 +98,10 @@ Below, the content of `child-frame.html`:
   <head>
     <title>Child Frame</title>
     <script>
-      window.addEventListener('beforeunload', function(event) {
+      window.addEventListener('beforeunload', (event) => {
         console.log('I am the 2nd one.');
       });
-      window.addEventListener('unload', function(event) {
+      window.addEventListener('unload', (event) => {
         console.log('I am the 4th and last one…');
       });
     </script>
diff --git a/files/en-us/web/api/window/vrdisplayactivate_event/index.md b/files/en-us/web/api/window/vrdisplayactivate_event/index.md
index de364ba0155b9b4..daa72cf5b6c5457 100644
--- a/files/en-us/web/api/window/vrdisplayactivate_event/index.md
+++ b/files/en-us/web/api/window/vrdisplayactivate_event/index.md
@@ -48,7 +48,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplayactivate` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplayactivate', function() {
+window.addEventListener('vrdisplayactivate', () => {
   info.textContent = 'Display activated.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplayactivate', function() {
 Or use the `onvrdisplayactivate` event handler property:
 
 ```js
-window.onvrdisplayactivate = function() {
+window.onvrdisplayactivate = () => {
   info.textContent = 'Display activated.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplayblur_event/index.md b/files/en-us/web/api/window/vrdisplayblur_event/index.md
index 803f34c065f8ce2..beb68d31af1c58f 100644
--- a/files/en-us/web/api/window/vrdisplayblur_event/index.md
+++ b/files/en-us/web/api/window/vrdisplayblur_event/index.md
@@ -48,7 +48,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplayblur` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplayblur', function() {
+window.addEventListener('vrdisplayblur', () => {
   info.textContent = 'Display unfocused.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplayblur', function() {
 Or use the `onvrdisplayblur` event handler property:
 
 ```js
-window.onvrdisplayblur = function() {
+window.onvrdisplayblur = () => {
   info.textContent = 'Display unfocused.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplayconnect_event/index.md b/files/en-us/web/api/window/vrdisplayconnect_event/index.md
index 5a8038afa66b8d0..1258d5ee10a7025 100644
--- a/files/en-us/web/api/window/vrdisplayconnect_event/index.md
+++ b/files/en-us/web/api/window/vrdisplayconnect_event/index.md
@@ -48,7 +48,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplayconnect` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplayconnect', function() {
+window.addEventListener('vrdisplayconnect', () => {
   info.textContent = 'Display connected.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplayconnect', function() {
 Or use the `onvrdisplayconnect` event handler property:
 
 ```js
-window.onvrdisplayconnect = function() {
+window.onvrdisplayconnect = () => {
   info.textContent = 'Display connected.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplaydeactivate_event/index.md b/files/en-us/web/api/window/vrdisplaydeactivate_event/index.md
index 67749853b6194bf..62184a7555b3406 100644
--- a/files/en-us/web/api/window/vrdisplaydeactivate_event/index.md
+++ b/files/en-us/web/api/window/vrdisplaydeactivate_event/index.md
@@ -48,7 +48,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplaydeactivate` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplaydeactivate', function() {
+window.addEventListener('vrdisplaydeactivate', () => {
   info.textContent = 'Display deactivated.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplaydeactivate', function() {
 Or use the `onvrdisplaydeactivate` event handler property:
 
 ```js
-window.onvrdisplaydeactivate = function() {
+window.onvrdisplaydeactivate = () => {
   info.textContent = 'Display deactivated.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplaydisconnect_event/index.md b/files/en-us/web/api/window/vrdisplaydisconnect_event/index.md
index dff5f6bdf5fd6ba..9dac15a02e5d285 100644
--- a/files/en-us/web/api/window/vrdisplaydisconnect_event/index.md
+++ b/files/en-us/web/api/window/vrdisplaydisconnect_event/index.md
@@ -48,7 +48,7 @@ You can use the `vrdisplaydisconnect` event in an [`addEventListener`](/en-US/do
 > **Note:** This event was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).
 
 ```js
-window.addEventListener('vrdisplaydisconnect', function() {
+window.addEventListener('vrdisplaydisconnect', () => {
   info.textContent = 'Display disconnected.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplaydisconnect', function() {
 Or use the `onvrdisplaydisconnect` event handler property:
 
 ```js
-window.onvrdisplaydisconnect = function() {
+window.onvrdisplaydisconnect = () => {
   info.textContent = 'Display disconnected.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplayfocus_event/index.md b/files/en-us/web/api/window/vrdisplayfocus_event/index.md
index 8e4d744b7b60f6e..be6165a5a5d625c 100644
--- a/files/en-us/web/api/window/vrdisplayfocus_event/index.md
+++ b/files/en-us/web/api/window/vrdisplayfocus_event/index.md
@@ -48,7 +48,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplayfocus` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplayfocus', function() {
+window.addEventListener('vrdisplayfocus', () => {
   info.textContent = 'Display focused.';
   reportDisplays();
 });
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplayfocus', function() {
 Or use the `onvrdisplayfocus` event handler property:
 
 ```js
-window.onvrdisplayfocus = function() {
+window.onvrdisplayfocus = () => {
   info.textContent = 'Display focused.';
   reportDisplays();
 };
diff --git a/files/en-us/web/api/window/vrdisplaypointerrestricted_event/index.md b/files/en-us/web/api/window/vrdisplaypointerrestricted_event/index.md
index f960dee884372da..5dcbba46340a904 100644
--- a/files/en-us/web/api/window/vrdisplaypointerrestricted_event/index.md
+++ b/files/en-us/web/api/window/vrdisplaypointerrestricted_event/index.md
@@ -49,7 +49,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplaypointerrestricted` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplaypointerrestricted', function() {
+window.addEventListener('vrdisplaypointerrestricted', () => {
   // Run code to handle pointer lock
 });
 ```
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplaypointerrestricted', function() {
 Or use the `onvrdisplaypointerrestricted` event handler property:
 
 ```js
-window.onvrdisplaypointerrestricted = function() {
+window.onvrdisplaypointerrestricted = () => {
   // Run code to handle pointer lock
 };
 ```
diff --git a/files/en-us/web/api/window/vrdisplaypointerunrestricted_event/index.md b/files/en-us/web/api/window/vrdisplaypointerunrestricted_event/index.md
index 2989717ccaa5430..ace87b009067da3 100644
--- a/files/en-us/web/api/window/vrdisplaypointerunrestricted_event/index.md
+++ b/files/en-us/web/api/window/vrdisplaypointerunrestricted_event/index.md
@@ -49,7 +49,7 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplaypointerunrestricted` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplaypointerunrestricted', function() {
+window.addEventListener('vrdisplaypointerunrestricted', () => {
   // Run code to handle freeing app from pointer lock
 });
 ```
@@ -57,7 +57,7 @@ window.addEventListener('vrdisplaypointerunrestricted', function() {
 Or use the `onvrdisplaypointerunrestricted` event handler property:
 
 ```js
-window.onvrdisplaypointerunrestricted = function() {
+window.onvrdisplaypointerunrestricted = () => {
   // Run code to handle freeing app from pointer lock
 };
 ```
diff --git a/files/en-us/web/api/window/vrdisplaypresentchange_event/index.md b/files/en-us/web/api/window/vrdisplaypresentchange_event/index.md
index 833bcb09c9e7d10..6f97c96ee0b60c4 100644
--- a/files/en-us/web/api/window/vrdisplaypresentchange_event/index.md
+++ b/files/en-us/web/api/window/vrdisplaypresentchange_event/index.md
@@ -48,8 +48,8 @@ _`VRDisplayEvent` also inherits properties from its parent object, {{domxref("Ev
 You can use the `vrdisplaypresentchange` event in an [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) method:
 
 ```js
-window.addEventListener('vrdisplaypresentchange', function() {
-  if(vrDisplay.isPresenting) {
+window.addEventListener('vrdisplaypresentchange', () => {
+  if (vrDisplay.isPresenting) {
     info.textContent = 'Display has started presenting.';
   } else {
     info.textContent = 'Display has stopped presenting.';
@@ -61,8 +61,8 @@ window.addEventListener('vrdisplaypresentchange', function() {
 Or use the `onvrdisplaypresentchange` event handler property:
 
 ```js
-window.onvrdisplaypresentchange = function() {
-  if(vrDisplay.isPresenting) {
+window.onvrdisplaypresentchange = () => {
+  if (vrDisplay.isPresenting) {
     info.textContent = 'Display has started presenting.';
   } else {
     info.textContent = 'Display has stopped presenting.';
diff --git a/files/en-us/web/api/windowclient/index.md b/files/en-us/web/api/windowclient/index.md
index 8b219323ba365f6..fb3968781304510 100644
--- a/files/en-us/web/api/windowclient/index.md
+++ b/files/en-us/web/api/windowclient/index.md
@@ -40,7 +40,7 @@ _`WindowClient` inherits properties from its parent interface, {{domxref("Client
 ## Example
 
 ```js
-self.addEventListener('notificationclick', function(event) {
+self.addEventListener('notificationclick', (event) => {
   console.log('On notification click: ', event.notification.tag);
   event.notification.close();
 
@@ -48,7 +48,7 @@ self.addEventListener('notificationclick', function(event) {
   // focuses if it is
   event.waitUntil(clients.matchAll({
     type: "window"
-  }).then(function(clientList) {
+  }).then((clientList) => {
     for (const client of clientList) {
       if (client.url === '/' && 'focus' in client) {
         client.focus();