diff --git a/files/en-us/web/api/baseaudiocontext/currenttime/index.md b/files/en-us/web/api/baseaudiocontext/currenttime/index.md
index 8b8a2af995ec19d..2e2275393f50403 100644
--- a/files/en-us/web/api/baseaudiocontext/currenttime/index.md
+++ b/files/en-us/web/api/baseaudiocontext/currenttime/index.md
@@ -25,8 +25,7 @@ A floating point number.
 ## Examples
 
 ```js
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
+const audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 
 // …
diff --git a/files/en-us/web/api/baseaudiocontext/destination/index.md b/files/en-us/web/api/baseaudiocontext/destination/index.md
index 44f5acf8ab49ca8..912c439282cac3a 100644
--- a/files/en-us/web/api/baseaudiocontext/destination/index.md
+++ b/files/en-us/web/api/baseaudiocontext/destination/index.md
@@ -29,12 +29,11 @@ An {{ domxref("AudioDestinationNode") }}.
 > Demos on the [MDN GitHub repo](https://github.com/mdn/), like [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic).
 
 ```js
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
+const audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
+const oscillatorNode = audioCtx.createOscillator();
+const gainNode = audioCtx.createGain();
 
 oscillatorNode.connect(gainNode);
 gainNode.connect(audioCtx.destination);
diff --git a/files/en-us/web/api/baseaudiocontext/listener/index.md b/files/en-us/web/api/baseaudiocontext/listener/index.md
index 799a93cf7ae26b6..5b1e2251470739b 100644
--- a/files/en-us/web/api/baseaudiocontext/listener/index.md
+++ b/files/en-us/web/api/baseaudiocontext/listener/index.md
@@ -28,13 +28,12 @@ An {{ domxref("AudioListener") }} object.
 > **Note:** for a full Web Audio spatialization example, see our [panner-node](https://github.com/mdn/webaudio-examples/tree/master/panner-node) demo.
 
 ```js
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
+const audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 
 // …
 
-var myListener = audioCtx.listener;
+const myListener = audioCtx.listener;
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/baseaudiocontext/samplerate/index.md b/files/en-us/web/api/baseaudiocontext/samplerate/index.md
index a4a375449f35347..8fef0e5a4b82d52 100644
--- a/files/en-us/web/api/baseaudiocontext/samplerate/index.md
+++ b/files/en-us/web/api/baseaudiocontext/samplerate/index.md
@@ -31,8 +31,7 @@ second.
 > `audioCtx.sampleRate` into your browser console.
 
 ```js
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
+const audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 
 // …
diff --git a/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md b/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md
index a1930bd5903430c..bc5e8881690f2f9 100644
--- a/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md
+++ b/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md
@@ -32,7 +32,7 @@ An empty {{jsxref("Promise")}}.
 ## Examples
 
 ```js
-var isTooSoon = true;
+let isTooSoon = true;
 window.addEventListener("beforeinstallprompt", function(e) {
   if (isTooSoon) {
     e.preventDefault(); // Prevents prompt display
diff --git a/files/en-us/web/api/biquadfilternode/detune/index.md b/files/en-us/web/api/biquadfilternode/detune/index.md
index 3f0d3c38ba2de0e..e4f16d98b19e302 100644
--- a/files/en-us/web/api/biquadfilternode/detune/index.md
+++ b/files/en-us/web/api/biquadfilternode/detune/index.md
@@ -26,14 +26,14 @@ An [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}.
 The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too).
 
 ```js
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const audioCtx = new AudioContext();
 
 //set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
+const analyser = audioCtx.createAnalyser();
+const distortion = audioCtx.createWaveShaper();
+const gainNode = audioCtx.createGain();
+const biquadFilter = audioCtx.createBiquadFilter();
+const convolver = audioCtx.createConvolver();
 
 // connect the nodes together
 
diff --git a/files/en-us/web/api/biquadfilternode/frequency/index.md b/files/en-us/web/api/biquadfilternode/frequency/index.md
index 8cef5c28b4f0fcc..ec3dd8f1ae95fce 100644
--- a/files/en-us/web/api/biquadfilternode/frequency/index.md
+++ b/files/en-us/web/api/biquadfilternode/frequency/index.md
@@ -28,14 +28,14 @@ An {{domxref("AudioParam")}}.
 The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too).
 
 ```js
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const audioCtx = new AudioContext();
 
 //set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
+const analyser = audioCtx.createAnalyser();
+const distortion = audioCtx.createWaveShaper();
+const gainNode = audioCtx.createGain();
+const biquadFilter = audioCtx.createBiquadFilter();
+const convolver = audioCtx.createConvolver();
 
 // connect the nodes together
 
diff --git a/files/en-us/web/api/biquadfilternode/gain/index.md b/files/en-us/web/api/biquadfilternode/gain/index.md
index 7bd2c05412415ec..65abaaec887c190 100644
--- a/files/en-us/web/api/biquadfilternode/gain/index.md
+++ b/files/en-us/web/api/biquadfilternode/gain/index.md
@@ -30,14 +30,14 @@ An {{domxref("AudioParam")}}.
 The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too).
 
 ```js
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const audioCtx = new AudioContext();
 
 //set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
+const analyser = audioCtx.createAnalyser();
+const distortion = audioCtx.createWaveShaper();
+const gainNode = audioCtx.createGain();
+const biquadFilter = audioCtx.createBiquadFilter();
+const convolver = audioCtx.createConvolver();
 
 // connect the nodes together
 
diff --git a/files/en-us/web/api/biquadfilternode/q/index.md b/files/en-us/web/api/biquadfilternode/q/index.md
index 6e4e6bff4e6432a..c35b5f2e38dfafa 100644
--- a/files/en-us/web/api/biquadfilternode/q/index.md
+++ b/files/en-us/web/api/biquadfilternode/q/index.md
@@ -28,14 +28,14 @@ An {{domxref("AudioParam")}}.
 The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too).
 
 ```js
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const audioCtx = new AudioContext();
 
 //set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
+const analyser = audioCtx.createAnalyser();
+const distortion = audioCtx.createWaveShaper();
+const gainNode = audioCtx.createGain();
+const biquadFilter = audioCtx.createBiquadFilter();
+const convolver = audioCtx.createConvolver();
 
 // connect the nodes together
 
diff --git a/files/en-us/web/api/biquadfilternode/type/index.md b/files/en-us/web/api/biquadfilternode/type/index.md
index ea946e874173a84..13690122fd432ec 100644
--- a/files/en-us/web/api/biquadfilternode/type/index.md
+++ b/files/en-us/web/api/biquadfilternode/type/index.md
@@ -168,14 +168,14 @@ A string (enum) representing a [BiquadFilterType](https://webaudio.github.io/web
 The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too).
 
 ```js
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const audioCtx = new AudioContext();
 
 //set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
+const analyser = audioCtx.createAnalyser();
+const distortion = audioCtx.createWaveShaper();
+const gainNode = audioCtx.createGain();
+const biquadFilter = audioCtx.createBiquadFilter();
+const convolver = audioCtx.createConvolver();
 
 // connect the nodes together
 
diff --git a/files/en-us/web/api/bluetooth/getavailability/index.md b/files/en-us/web/api/bluetooth/getavailability/index.md
index b2dfaa5c79f22d1..2afb5b2f872396c 100644
--- a/files/en-us/web/api/bluetooth/getavailability/index.md
+++ b/files/en-us/web/api/bluetooth/getavailability/index.md
@@ -21,7 +21,7 @@ The **`getAvailability()`** method of the {{DOMxRef("Bluetooth")}} interface ret
 ## Syntax
 
 ```js
-var readerPromise = Bluetooth.getAvailability();
+getAvailability()
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/bluetooth/getdevices/index.md b/files/en-us/web/api/bluetooth/getdevices/index.md
index a5f8aa72bcb4dd1..8d7454faa25e70e 100644
--- a/files/en-us/web/api/bluetooth/getdevices/index.md
+++ b/files/en-us/web/api/bluetooth/getdevices/index.md
@@ -23,7 +23,7 @@ permission prompts.
 ## Syntax
 
 ```js
-var readerPromise = Bluetooth.getDevices();
+getDevices()
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md
index 6180bddf01ac2f1..b807d631fa4f04e 100644
--- a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md
+++ b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md
@@ -20,13 +20,7 @@ The **`BluetoothRemoteGATTDescriptor.characteristic`**
 read-only property returns the {{domxref("BluetoothRemoteGATTCharacteristic")}} this
 descriptor belongs to.
 
-## Syntax
-
-```js
-var characteristic = BluetoothRemoteGATTCharacteristic.characteristic
-```
-
-### Returns
+## Value
 
 An instance of {{domxref("BluetoothRemoteGATTCharacteristic")}}.
 
diff --git a/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md b/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md
index f1d6bd7ec953700..08d08edaa7e44a5 100644
--- a/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md
+++ b/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md
@@ -36,7 +36,7 @@ new BroadcastChannel(channelName)
 ```js
 // create a new channel listening to the "internal_notification" channel.
 
-var bc = new BroadcastChannel('internal_notification');
+const bc = new BroadcastChannel('internal_notification');
 bc.postMessage('New listening connected!');
 ```
 
diff --git a/files/en-us/web/api/broadcastchannel/close/index.md b/files/en-us/web/api/broadcastchannel/close/index.md
index afd2b65dcba1260..10c58ab9aa00bf2 100644
--- a/files/en-us/web/api/broadcastchannel/close/index.md
+++ b/files/en-us/web/api/broadcastchannel/close/index.md
@@ -28,7 +28,7 @@ channel.close();
 
 ```js
 // Connect to a channel
-var bc = new BroadcastChannel('test_channel');
+const bc = new BroadcastChannel('test_channel');
 
 // More operations (like postMessage, …)
 
diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
index a519b5d1803ce79..82e4bb8f686340b 100644
--- a/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
+++ b/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md
@@ -55,7 +55,7 @@ const readableStream = new ReadableStream({
   }
 }, queuingStrategy);
 
-var size = queuingStrategy.size(chunk);
+const size = queuingStrategy.size(chunk);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/index.md
index 709a982c53d2801..a6175e6d8b02b5c 100644
--- a/files/en-us/web/api/bytelengthqueuingstrategy/index.md
+++ b/files/en-us/web/api/bytelengthqueuingstrategy/index.md
@@ -46,7 +46,7 @@ const readableStream = new ReadableStream({
   }
 }, queueingStrategy);
 
-var size = queueingStrategy.size(chunk);
+const size = queueingStrategy.size(chunk);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md
index b7fffcfeab995ac..1494fc190dac43a 100644
--- a/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md
+++ b/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md
@@ -50,7 +50,7 @@ const readableStream = new ReadableStream({
   }
 }, queuingStrategy);
 
-var size = queueingStrategy.size(chunk);
+const size = queueingStrategy.size(chunk);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cache/put/index.md b/files/en-us/web/api/cache/put/index.md
index 29362ccb3b5a42d..ae3ff8881429d1f 100644
--- a/files/en-us/web/api/cache/put/index.md
+++ b/files/en-us/web/api/cache/put/index.md
@@ -81,8 +81,8 @@ like so:
 3. If this fails (e.g., because the network is down), return a fallback response.
 
 ```js
-var response;
-var cachedResponse = caches.match(event.request).catch(function() {
+let response;
+const cachedResponse = caches.match(event.request).catch(function() {
   return fetch(event.request);
 }).then(function(r) {
   response = r;
diff --git a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
index 3b2c10339d380fe..206855dfc8074ba 100644
--- a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -22,10 +22,10 @@ We are going to use a ball for our animation studies, so let's first draw that b
 As usual, we need a drawing context first. To draw the ball, we will create a `ball` object which contains properties and a `draw()` method to paint it on the canvas.
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   radius: 25,
@@ -49,11 +49,11 @@ Nothing special here, the ball is actually a simple circle and gets drawn with t
 Now that we have a ball, we are ready to add a basic animation like we have learned in the [last chapter](/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations) of this tutorial. Again, {{domxref("window.requestAnimationFrame()")}} helps us to control the animation. The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
@@ -114,11 +114,11 @@ Let's see how it looks in action so far.
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
@@ -191,11 +191,11 @@ This slows down the vertical velocity each frame, so that the ball will just bou
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
@@ -266,11 +266,11 @@ ctx.fillRect(0, 0, canvas.width, canvas.height);
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let raf;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
@@ -337,12 +337,12 @@ To get some control over the ball, we can make it follow our mouse using the [`m
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let raf;
+let running = false;
 
-var ball = {
+const ball = {
   x: 100,
   y: 100,
   vx: 5,
diff --git a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 93c4be3b3570e79..232814ec6ba3711 100644
--- a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -81,11 +81,11 @@ If you have a static background image, you can draw it onto a plain {{HTMLElemen
 [CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) are faster since they use the GPU. The best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down.
 
 ```js
-var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
+const scaleX = window.innerWidth / canvas.width;
+const scaleY = window.innerHeight / canvas.height;
 
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
+const scaleToFit = Math.min(scaleX, scaleY);
+const scaleToCover = Math.max(scaleX, scaleY);
 
 stage.style.transformOrigin = '0 0'; //scale from top left
 stage.style.transform = `scale(${scaleToFit})`;
@@ -96,7 +96,7 @@ stage.style.transform = `scale(${scaleToFit})`;
 If your application uses canvas and doesn't need a transparent backdrop, set the `alpha` option to `false` when creating a drawing context with {{domxref("HTMLCanvasElement.getContext()")}}. This information can be used internally by the browser to optimize rendering.
 
 ```js
-var ctx = canvas.getContext('2d', { alpha: false });
+const ctx = canvas.getContext('2d', { alpha: false });
 ```
 
 ### Scaling for high resolution displays
@@ -105,8 +105,8 @@ You may find that canvas items appear blurry on higher-resolution displays. Whil
 
 ```js
 // Get the DPR and size of the canvas
-var dpr = window.devicePixelRatio;
-var rect = canvas.getBoundingClientRect();
+const dpr = window.devicePixelRatio;
+const rect = canvas.getBoundingClientRect();
 
 // Set the "actual" size of the canvas
 canvas.width = rect.width * dpr;
diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md
index a595529b60a6bc3..8647885d6206396 100644
--- a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md
+++ b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md
@@ -29,16 +29,16 @@ frames being captured.
 
 ```js
 // Find the canvas element to capture
-var canvasElt = document.getElementsByTagName("canvas")[0];
+const canvasElt = document.querySelector("canvas");
 
 // Get the stream
-var stream = canvasElt.captureStream(25); // 25 FPS
+const stream = canvasElt.captureStream(25); // 25 FPS
 
 // Do things to the stream
 // …
 
 // Obtain the canvas associated with the stream
-var canvas = stream.canvas;
+const canvas = stream.canvas;
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md
index c799592f8e45521..2d8a2d7b24dcc69 100644
--- a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md
+++ b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md
@@ -51,10 +51,10 @@ mentioned in the spec, this is a likely candidate).
 
 ```js
 // Find the canvas element to capture
-var canvasElt = document.getElementsByTagName("canvas")[0];
+const canvasElt = document.querySelector("canvas");
 
 // Get the stream
-var stream = canvasElt.captureStream(25); // 25 FPS
+const stream = canvasElt.captureStream(25); // 25 FPS
 
 // Send the current state of the canvas as a frame to the stream
 stream.getVideoTracks()[0].requestFrame();
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md b/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md
index 8b2badf1e78d36a..949ce4e91d59661 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md
@@ -33,8 +33,8 @@ Given this {{HTMLElement("canvas")}} element:
 `CanvasRenderingContext2D` by using the `canvas` property:
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 ctx.canvas // HTMLCanvasElement
 ```
 
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md
index b73fbf6ad87645b..8aaf8f9ab3052f9 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md
@@ -55,13 +55,13 @@ This example initializes a conic gradient using the `createConicGradient()` meth
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 // Create a conic gradient
 // The start angle is 0
 // The center position is 100, 100
-var gradient = ctx.createConicGradient(0, 100, 100);
+const gradient = ctx.createConicGradient(0, 100, 100);
 
 // Add five color stops
 gradient.addColorStop(0, "red");
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md
index 1a191eff26d13d9..61a2e32069571aa 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md
@@ -72,13 +72,13 @@ context, and is rendered to a filled rectangle.
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 // Create a linear gradient
 // The start gradient point is at x=20, y=0
 // The end gradient point is at x=220, y=0
-var gradient = ctx.createLinearGradient(20,0, 220,0);
+const gradient = ctx.createLinearGradient(20,0, 220,0);
 
 // Add three color stops
 gradient.addColorStop(0, 'green');
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md
index 5dd4bafdcec4b1b..9074d0e4890bc9c 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md
@@ -74,13 +74,13 @@ is rendered to a filled rectangle.
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 // Create a radial gradient
 // The inner circle is at x=110, y=90, with radius=30
 // The outer circle is at x=100, y=100, with radius=70
-var gradient = ctx.createRadialGradient(110,90,30, 100,100,70);
+const gradient = ctx.createRadialGradient(110,90,30, 100,100,70);
 
 // Add three color stops
 gradient.addColorStop(0, 'pink');
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md b/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md
index c989d62d117117c..b7fae09b0c98896 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md
@@ -47,8 +47,8 @@ is right-to-left. Note that "Hi!" in `ltr` becomes "!Hi" in `rtl`.
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.fillText('Hi!', 150, 50);
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md
index a346305ff16475e..6a4d6ece279dc0a 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md
@@ -88,8 +88,8 @@ The example below draws three different paths, demonstrating each of the three
 ```
 
 ```js
-var ctx = document.getElementById('canvas').getContext('2d');
-var lineJoin = ['round', 'bevel', 'miter'];
+const ctx = document.getElementById('canvas').getContext('2d');
+const lineJoin = ['round', 'bevel', 'miter'];
 ctx.lineWidth = 10;
 
 for (let i = 0; i < lineJoin.length; i++) {
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md
index f79363bcd2db684..547056c3d5ceb04 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md
@@ -42,12 +42,12 @@ ctx.stroke();</textarea>
 ```
 
 ```js hidden
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const edit = document.getElementById("edit");
+const code = textarea.value;
 
 function drawCanvas() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
diff --git a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md
index 2be15f996e7d397..6490127badbb42f 100644
--- a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md
+++ b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md
@@ -45,8 +45,8 @@ This example applies a blue stroke color to a rectangle.
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
 ctx.strokeStyle = 'blue';
 ctx.strokeRect(10, 10, 100, 100);
@@ -69,7 +69,7 @@ only modify the green and blue values. (The red channel has a fixed value.)
 ```
 
 ```js
-var ctx = document.getElementById('canvas').getContext('2d');
+const ctx = document.getElementById('canvas').getContext('2d');
 
 for (let i = 0; i < 6; i++) {
   for (let j = 0; j < 6; j++) {
diff --git a/files/en-us/web/api/channelmergernode/channelmergernode/index.md b/files/en-us/web/api/channelmergernode/channelmergernode/index.md
index cf32c99499b0e7b..b7464a486cdb91f 100644
--- a/files/en-us/web/api/channelmergernode/channelmergernode/index.md
+++ b/files/en-us/web/api/channelmergernode/channelmergernode/index.md
@@ -57,13 +57,13 @@ A new {{domxref("ChannelMergerNode")}} object instance.
 ## Examples
 
 ```js
-var ac = new AudioContext();
+const ac = new AudioContext();
 
-var options = {
+const options = {
   numberOfInputs : 2
 }
 
-var myMerger = new ChannelMergerNode(ac, options);
+const myMerger = new ChannelMergerNode(ac, options);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md b/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md
index 3c70b0cfb79d9b8..dc3e82f4c97e428 100644
--- a/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md
+++ b/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md
@@ -53,13 +53,13 @@ A new {{domxref("ChannelSplitterNode")}} object instance.
 ## Examples
 
 ```js
-var ac = new AudioContext();
+const ac = new AudioContext();
 
-var options = {
+const options = {
   numberOfOutputs : 2
 }
 
-var mySplitter = new ChannelSplitterNode(ac, options);
+const mySplitter = new ChannelSplitterNode(ac, options);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/clipboarditem/gettype/index.md b/files/en-us/web/api/clipboarditem/gettype/index.md
index 136385eb8422717..376a6c13c21eafa 100644
--- a/files/en-us/web/api/clipboarditem/gettype/index.md
+++ b/files/en-us/web/api/clipboarditem/gettype/index.md
@@ -20,7 +20,7 @@ The **`getType()`** method of the {{domxref("ClipboardItem")}} interface returns
 ## Syntax
 
 ```js
-var blob = clipboardItem.getType(type);
+getType(type)
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/console/table/index.md b/files/en-us/web/api/console/table/index.md
index 53715eaa962ce4f..d9319adca96330b 100644
--- a/files/en-us/web/api/console/table/index.md
+++ b/files/en-us/web/api/console/table/index.md
@@ -49,7 +49,7 @@ function Person(firstName, lastName) {
   this.lastName = lastName;
 }
 
-var me = new Person("John", "Smith");
+const me = new Person("John", "Smith");
 
 console.table(me);
 ```
@@ -64,7 +64,7 @@ objects, then their elements or properties are enumerated in the row, one per co
 ```js
 // an array of arrays
 
-var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+const people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
 console.table(people);
 ```
 
@@ -78,9 +78,9 @@ function Person(firstName, lastName) {
   this.lastName = lastName;
 }
 
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
+const john = new Person("John", "Smith");
+const jane = new Person("Jane", "Doe");
+const emily = new Person("Emily", "Jones");
 
 console.table([john, jane, emily]);
 ```
@@ -93,7 +93,7 @@ name.
 ```js
 // an object whose properties are objects
 
-var family = {};
+const family = {};
 
 family.mother = new Person("Jane", "Smith");
 family.father = new Person("John", "Smith");
@@ -117,9 +117,9 @@ function Person(firstName, lastName) {
   this.lastName = lastName;
 }
 
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
+const john = new Person("John", "Smith");
+const jane = new Person("Jane", "Doe");
+const emily = new Person("Emily", "Jones");
 
 console.table([john, jane, emily], ["firstName"]);
 ```
diff --git a/files/en-us/web/api/contactsmanager/getproperties/index.md b/files/en-us/web/api/contactsmanager/getproperties/index.md
index 6b9f02848296c28..eaa1d7f8e0f561c 100644
--- a/files/en-us/web/api/contactsmanager/getproperties/index.md
+++ b/files/en-us/web/api/contactsmanager/getproperties/index.md
@@ -21,7 +21,7 @@ properties are available.
 ## Syntax
 
 ```js
-var ContactProperties = ContactsManager.getProperties();
+getProperties()
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/contentindexevent/contentindexevent/index.md b/files/en-us/web/api/contentindexevent/contentindexevent/index.md
index 977c17a1448ed7c..7d3632520d2da15 100644
--- a/files/en-us/web/api/contentindexevent/contentindexevent/index.md
+++ b/files/en-us/web/api/contentindexevent/contentindexevent/index.md
@@ -44,11 +44,11 @@ A new {{domxref("ContentIndexEvent")}} object configured using the given options
 This examples constructs a new {{domxref('ContentIndexEvent')}} with the relevant id.
 
 ```js
-var removeData = {
+const removeData = {
   id : 'unique-content-id'
 }
 
-var ciEvent = new ContentIndexEvent('contentdelete', removeData);
+const ciEvent = new ContentIndexEvent('contentdelete', removeData);
 
 ciEvent.id; // should return 'unique-content-id'
 ```
diff --git a/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md b/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md
index 4a7c01d3c372aa4..619c35e94932001 100644
--- a/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md
+++ b/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md
@@ -55,7 +55,7 @@ const writableStream = new WritableStream({
   }
 }, queuingStrategy);
 
-var size = queuingStrategy.size();
+const size = queuingStrategy.size();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/countqueuingstrategy/index.md b/files/en-us/web/api/countqueuingstrategy/index.md
index a0df510785a656f..1c2fc3e6087aa45 100644
--- a/files/en-us/web/api/countqueuingstrategy/index.md
+++ b/files/en-us/web/api/countqueuingstrategy/index.md
@@ -47,7 +47,7 @@ const writableStream = new WritableStream({
   }
 }, queueingStrategy);
 
-var size = queueingStrategy.size();
+const size = queueingStrategy.size();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/countqueuingstrategy/size/index.md b/files/en-us/web/api/countqueuingstrategy/size/index.md
index 0311aeb3db7ccec..498129c72032e96 100644
--- a/files/en-us/web/api/countqueuingstrategy/size/index.md
+++ b/files/en-us/web/api/countqueuingstrategy/size/index.md
@@ -50,7 +50,7 @@ const writableStream = new WritableStream({
   }
 }, queuingStrategy);
 
-var size = queuingStrategy.size();
+const size = queuingStrategy.size();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/css/escape/index.md b/files/en-us/web/api/css/escape/index.md
index f896245ac5f58ec..6d89ea440c499f4 100644
--- a/files/en-us/web/api/css/escape/index.md
+++ b/files/en-us/web/api/css/escape/index.md
@@ -51,14 +51,14 @@ To escape a string for use as part of a selector, the `escape()` method can
 be used:
 
 ```js
-var element = document.querySelector(`#${CSS.escape(id)} > img`);
+const element = document.querySelector(`#${CSS.escape(id)} > img`);
 ```
 
 The `escape()` method can also be used for escaping strings, although it
 escapes characters that don't strictly need to be escaped:
 
 ```js
-var element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`);
+const element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
index efb0f8d4548bd68..176fab86a995dc4 100644
--- a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
+++ b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md
@@ -142,7 +142,7 @@ The **media** and **type** of the style may or may not be given.
 Note that you can also change style of an element by getting a reference to it and then use its [`setAttribute`](/en-US/docs/Web/API/Element/setAttribute) method to specify the CSS property and its value.
 
 ```js
-var el = document.getElementById('some-element');
+const el = document.getElementById('some-element');
 el.setAttribute('style', 'background-color:darkblue;');
 ```
 
diff --git a/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md
index c63d1b60411c2dd..d6e75143c2275c0 100644
--- a/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md
+++ b/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md
@@ -87,8 +87,8 @@ A `float` value in the specified unit.
 ## Examples
 
 ```js
-var cs = window.getComputedStyle(document.body);
-var cssValue = cs.getPropertyCSSValue("margin-top");
+const cs = window.getComputedStyle(document.body);
+const cssValue = cs.getPropertyCSSValue("margin-top");
 console.log(cssValue.getFloatValue(CSSPrimitiveValue.CSS_CM));
 ```
 
diff --git a/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md
index 4abe0eef87cac8e..dc3b42fcaa5ff58 100644
--- a/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md
+++ b/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md
@@ -49,8 +49,8 @@ A {{domxref("Rect")}} object representing the rect value.
 ## Examples
 
 ```js
-var cs = window.getComputedStyle(document.getElementById("clippedDiv"));
-var cssValue = cs.getPropertyCSSValue("clip");
+const cs = window.getComputedStyle(document.getElementById("clippedDiv"));
+const cssValue = cs.getPropertyCSSValue("clip");
 console.log(cssValue.getRectValue());
 ```
 
diff --git a/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md
index 19604e7a14c52d0..6bea8d4fdeefd4c 100644
--- a/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md
+++ b/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md
@@ -49,8 +49,8 @@ An {{domxref("RGBColor")}} object representing the color value.
 ## Examples
 
 ```js
-var cs = window.getComputedStyle(document.body);
-var cssValue = cs.getPropertyCSSValue("color");
+const cs = window.getComputedStyle(document.body);
+const cssValue = cs.getPropertyCSSValue("color");
 console.log(cssValue.getRGBColorValue());
 ```
 
diff --git a/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md
index b58e36b4375fd6e..40dc2adfc171e44 100644
--- a/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md
+++ b/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md
@@ -47,8 +47,8 @@ A `string` value.
 ## Examples
 
 ```js
-var cs = window.getComputedStyle(document.body);
-var cssValue = cs.getPropertyCSSValue("display");
+const cs = window.getComputedStyle(document.body);
+const cssValue = cs.getPropertyCSSValue("display");
 console.log(cssValue.getStringValue());
 ```
 
diff --git a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md
index fc79152e1fcf5cd..84c462ed990612b 100644
--- a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md
+++ b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md
@@ -235,8 +235,8 @@ An `unsigned short` representing the type of the value. Possible values are:
 ## Examples
 
 ```js
-var cs = window.getComputedStyle(document.body);
-var cssValue = cs.getPropertyCSSValue("color");
+const cs = window.getComputedStyle(document.body);
+const cssValue = cs.getPropertyCSSValue("color");
 console.log(cssValue.primitiveType);
 ```
 
diff --git a/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md b/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md
index d6de3ca12c69137..4265c654ef80cd8 100644
--- a/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md
@@ -46,8 +46,8 @@ The following JavaScript code gets an object containing the computed RGB values
 the `color` CSS property:
 
 ```js
-var style = window.getComputedStyle(elem, null);
-var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
+const style = window.getComputedStyle(elem, null);
+const rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md b/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md
index b315692153d697f..5ce6eb05c4dfe1a 100644
--- a/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md
@@ -37,8 +37,8 @@ The following JavaScript code checks whether `margin` is marked as important
 in a CSS selector rule:
 
 ```js
-var declaration = document.styleSheets[0].cssRules[0].style;
-var isImportant = declaration.getPropertyPriority('margin') === 'important';
+const declaration = document.styleSheets[0].cssRules[0].style;
+const isImportant = declaration.getPropertyPriority('margin') === 'important';
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cssstyledeclaration/item/index.md b/files/en-us/web/api/cssstyledeclaration/item/index.md
index 395f05029c4df81..ecada967253842d 100644
--- a/files/en-us/web/api/cssstyledeclaration/item/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/item/index.md
@@ -37,7 +37,7 @@ A string that is the name of the CSS property at the specified index.
 JavaScript has a special simpler syntax for obtaining an item from a NodeList by index:
 
 ```js
-var propertyName = style[index];
+const propertyName = style[index];
 ```
 
 ### Exceptions
@@ -48,8 +48,8 @@ var propertyName = style[index];
 ## Examples
 
 ```js
-var style = document.getElementById('div1').style;
-var propertyName = style.item(1); // or style[1] - returns the second style listed
+const style = document.getElementById('div1').style;
+const propertyName = style.item(1); // or style[1] - returns the second style listed
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md
index 38a5c703df19d07..a6e26b509df5a1a 100644
--- a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md
@@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer browser.
 ### Syntax
 
 ```js
-var retVal = style.msGetPropertyEnabled(name);
+msGetPropertyEnabled(name)
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md
index 267f50cc63ac390..1ed073e831d1bcd 100644
--- a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md
@@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer and Microsoft Edge.
 ### Syntax
 
 ```js
-var retval = style.msPutPropertyEnabled(propertyName, true);
+msPutPropertyEnabled(name, boolean)
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/cssstyledeclaration/parentrule/index.md b/files/en-us/web/api/cssstyledeclaration/parentrule/index.md
index 3b0ed3fc9c0e9a5..39f50371b4ab4d5 100644
--- a/files/en-us/web/api/cssstyledeclaration/parentrule/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/parentrule/index.md
@@ -27,8 +27,8 @@ The following JavaScript code gets the parent CSS style rule from a
 {{domxref('CSSStyleDeclaration')}}:
 
 ```js
-var declaration = document.styleSheets[0].rules[0].style;
-var rule = declaration.parentRule;
+const declaration = document.styleSheets[0].rules[0].style;
+const rule = declaration.parentRule;
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md b/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md
index fe8f97d7007b74a..4ea70755b71bb09 100644
--- a/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md
+++ b/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md
@@ -40,8 +40,8 @@ The following JavaScript code removes the `background-color` CSS property
 from a selector rule:
 
 ```js
-var declaration = document.styleSheets[0].rules[0].style;
-var oldValue = declaration.removeProperty('background-color');
+const declaration = document.styleSheets[0].rules[0].style;
+const oldValue = declaration.removeProperty('background-color');
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/cssvalue/csstext/index.md b/files/en-us/web/api/cssvalue/csstext/index.md
index 2d0ceee042cb6bd..c445cd29523ff0b 100644
--- a/files/en-us/web/api/cssvalue/csstext/index.md
+++ b/files/en-us/web/api/cssvalue/csstext/index.md
@@ -31,8 +31,8 @@ A string representing the current CSS property value.
 ## Examples
 
 ```js
-var styleDeclaration = document.styleSheets[0].cssRules[0].style;
-var cssValue = styleDeclaration.getPropertyCSSValue("color");
+const styleDeclaration = document.styleSheets[0].cssRules[0].style;
+const cssValue = styleDeclaration.getPropertyCSSValue("color");
 console.log(cssValue.cssText);
 ```
 
diff --git a/files/en-us/web/api/cssvalue/cssvaluetype/index.md b/files/en-us/web/api/cssvalue/cssvaluetype/index.md
index 554183b6552cebf..7298f6f0847cd4e 100644
--- a/files/en-us/web/api/cssvalue/cssvaluetype/index.md
+++ b/files/en-us/web/api/cssvalue/cssvaluetype/index.md
@@ -74,8 +74,8 @@ Possible values are:
 ## Examples
 
 ```js
-var styleDeclaration = document.styleSheets[0].cssRules[0].style;
-var cssValue = styleDeclaration.getPropertyCSSValue("color");
+const styleDeclaration = document.styleSheets[0].cssRules[0].style;
+const cssValue = styleDeclaration.getPropertyCSSValue("color");
 console.log(cssValue.cssValueType);
 ```
 
diff --git a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md
index ae96f9ad8d3a925..ddbc457ead818ba 100644
--- a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md
+++ b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md
@@ -20,7 +20,7 @@ dragged item is a directory.
 ## Syntax
 
 ```js
-var handle = DataTransferItem.getAsFileSystemHandle();
+getAsFileSystemHandle()
 ```
 
 ### Parameters
diff --git a/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md b/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md
index 47f2c69f7275d33..614e789882308b9 100644
--- a/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md
+++ b/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md
@@ -29,7 +29,7 @@ A string.
 If a worker is created using a constructor with a `name` option:
 
 ```js
-var myWorker = new Worker("worker.js", { name : "myWorker" });
+const myWorker = new Worker("worker.js", { name : "myWorker" });
 ```
 
 the {{domxref("DedicatedWorkerGlobalScope")}} will now have a name of "myWorker",
diff --git a/files/en-us/web/api/device_memory_api/index.md b/files/en-us/web/api/device_memory_api/index.md
index adadf876b310ebd..f461db676a91048 100644
--- a/files/en-us/web/api/device_memory_api/index.md
+++ b/files/en-us/web/api/device_memory_api/index.md
@@ -21,7 +21,7 @@ There are two ways to determine the approximate amount of RAM a device has: use
 You may query the approximate amount of RAM a device has by retrieving {{DOMxRef("Navigator.deviceMemory")}}
 
 ```js
-var RAM = navigator.deviceMemory;
+const RAM = navigator.deviceMemory;
 ```
 
 ### Client Hints
diff --git a/files/en-us/web/api/document/createattribute/index.md b/files/en-us/web/api/document/createattribute/index.md
index 39c6d1e4afab4b3..8f0354899c8c34c 100644
--- a/files/en-us/web/api/document/createattribute/index.md
+++ b/files/en-us/web/api/document/createattribute/index.md
@@ -40,8 +40,8 @@ A {{domxref("Attr")}} node.
 ## Examples
 
 ```js
-var node = document.getElementById("div1");
-var a = document.createAttribute("my_attrib");
+const node = document.getElementById("div1");
+const a = document.createAttribute("my_attrib");
 a.value = "newVal";
 node.setAttributeNode(a);
 console.log(node.getAttribute("my_attrib")); // "newVal"
diff --git a/files/en-us/web/api/document/createattributens/index.md b/files/en-us/web/api/document/createattributens/index.md
index 057d67356d1e636..b4baff9817ba166 100644
--- a/files/en-us/web/api/document/createattributens/index.md
+++ b/files/en-us/web/api/document/createattributens/index.md
@@ -56,8 +56,8 @@ The new {{domxref("Attr")}} node.
 ## Examples
 
 ```js
-var node = document.getElementById("svg");
-var a = document.createAttributeNS("http://www.w3.org/2000/svg", "viewBox");
+const node = document.getElementById("svg");
+const a = document.createAttributeNS("http://www.w3.org/2000/svg", "viewBox");
 a.value = "0 0 100 100";
 node.setAttributeNode(a);
 console.log(node.getAttribute("viewBox")); // "0 0 100 100"
diff --git a/files/en-us/web/api/document/createcdatasection/index.md b/files/en-us/web/api/document/createcdatasection/index.md
index d714633c96aca81..a5ea5dfe0d1230b 100644
--- a/files/en-us/web/api/document/createcdatasection/index.md
+++ b/files/en-us/web/api/document/createcdatasection/index.md
@@ -32,9 +32,9 @@ A [CDATA Section](/en-US/docs/Web/API/CDATASection) node.
 ## Examples
 
 ```js
-var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml')
+const docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml')
 
-var cdata = docu.createCDATASection('Some <CDATA> data & then some');
+const cdata = docu.createCDATASection('Some <CDATA> data & then some');
 
 docu.getElementsByTagName('xml')[0].appendChild(cdata);
 
diff --git a/files/en-us/web/api/document/createcomment/index.md b/files/en-us/web/api/document/createcomment/index.md
index 7025078d6761c87..cad266eb32341cc 100644
--- a/files/en-us/web/api/document/createcomment/index.md
+++ b/files/en-us/web/api/document/createcomment/index.md
@@ -32,8 +32,8 @@ A new {{domxref("Comment")}} object.
 ## Examples
 
 ```js
-var docu = new DOMParser().parseFromString('<xml></xml>',  'application/xml');
-var comment = docu.createComment('This is a not-so-secret comment in your document');
+const docu = new DOMParser().parseFromString('<xml></xml>',  'application/xml');
+const comment = docu.createComment('This is a not-so-secret comment in your document');
 
 docu.getElementsByTagName('xml')[0].appendChild(comment);
 
diff --git a/files/en-us/web/api/document/createevent/index.md b/files/en-us/web/api/document/createevent/index.md
index 10bd0a4fe7871e0..fde4016ec87cbba 100644
--- a/files/en-us/web/api/document/createevent/index.md
+++ b/files/en-us/web/api/document/createevent/index.md
@@ -37,7 +37,7 @@ An [Event](/en-US/docs/Web/API/Event) object.
 
 ```js
 // Create the event.
-var event = document.createEvent('Event');
+const event = document.createEvent('Event');
 
 // Define that the event name is 'build'.
 event.initEvent('build', true, true);
diff --git a/files/en-us/web/api/document/createprocessinginstruction/index.md b/files/en-us/web/api/document/createprocessinginstruction/index.md
index bffda297e12e88d..e8dc9b25b6fdade 100644
--- a/files/en-us/web/api/document/createprocessinginstruction/index.md
+++ b/files/en-us/web/api/document/createprocessinginstruction/index.md
@@ -45,8 +45,8 @@ None ({{jsxref("undefined")}}).
 ## Examples
 
 ```js
-var doc = new DOMParser().parseFromString('<foo />', 'application/xml');
-var pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+const doc = new DOMParser().parseFromString('<foo />', 'application/xml');
+const pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
 
 doc.insertBefore(pi, doc.firstChild);
 
diff --git a/files/en-us/web/api/document/createtouch/index.md b/files/en-us/web/api/document/createtouch/index.md
index ab401ea8bf9c5ff..50182437f071135 100644
--- a/files/en-us/web/api/document/createtouch/index.md
+++ b/files/en-us/web/api/document/createtouch/index.md
@@ -76,10 +76,10 @@ In following code snippet, two {{DOMxRef("Touch")}} objects are created for the
 `target` element.
 
 ```js
-var target = document.getElementById("target");
+const target = document.getElementById("target");
 
-var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
-var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
+const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
+const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/document/createtouchlist/index.md b/files/en-us/web/api/document/createtouchlist/index.md
index 4b9573267178580..b72f72b57371aab 100644
--- a/files/en-us/web/api/document/createtouchlist/index.md
+++ b/files/en-us/web/api/document/createtouchlist/index.md
@@ -48,20 +48,20 @@ In following code snippet, some {{DOMxRef("Touch")}} objects are created for the
 {{DOMxRef("TouchList")}} objects.
 
 ```js
-var target = document.getElementById("target");
+const target = document.getElementById("target");
 
 // Create some touch points
-var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
-var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
+const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
+const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
 
 // Create an empty TouchList objects
-var list0 = document.createTouchList();
+const list0 = document.createTouchList();
 
 // Create a TouchList with only one Touch object
-var list1 = document.createTouchList(touch1);
+const list1 = document.createTouchList(touch1);
 
 // Create a list with two Touch objects
-var list2 = document.createTouchList(touch1, touch2);
+const list2 = document.createTouchList(touch1, touch2);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/document/createtreewalker/index.md b/files/en-us/web/api/document/createtreewalker/index.md
index ba70f4e1f9ff7f6..3ee73489f42e071 100644
--- a/files/en-us/web/api/document/createtreewalker/index.md
+++ b/files/en-us/web/api/document/createtreewalker/index.md
@@ -71,14 +71,14 @@ that is created to advance through the nodes (now all elements) and push them in
 array.
 
 ```js
-var treeWalker = document.createTreeWalker(
+const treeWalker = document.createTreeWalker(
   document.body,
   NodeFilter.SHOW_ELEMENT,
   { acceptNode(node) { return NodeFilter.FILTER_ACCEPT; } }
 );
 
-var nodeList = [];
-var currentNode = treeWalker.currentNode;
+const nodeList = [];
+let currentNode = treeWalker.currentNode;
 
 while(currentNode) {
   nodeList.push(currentNode);
diff --git a/files/en-us/web/api/document/doctype/index.md b/files/en-us/web/api/document/doctype/index.md
index 7dbe7f06e28d92a..ba10a6881975abb 100644
--- a/files/en-us/web/api/document/doctype/index.md
+++ b/files/en-us/web/api/document/doctype/index.md
@@ -26,7 +26,7 @@ A {{domxref("DocumentType")}} object.
 ## Examples
 
 ```js
-var doctypeObj = document.doctype;
+const doctypeObj = document.doctype;
 
 console.log(`doctypeObj.name: ${doctypeObj.name}`);
 console.log(`doctypeObj.internalSubset: ${doctypeObj.internalSubset}`);
diff --git a/files/en-us/web/api/document/elementsfrompoint/index.md b/files/en-us/web/api/document/elementsfrompoint/index.md
index 84fca163e2cbc3f..a0ff8035e6c5a83 100644
--- a/files/en-us/web/api/document/elementsfrompoint/index.md
+++ b/files/en-us/web/api/document/elementsfrompoint/index.md
@@ -55,7 +55,7 @@ An array of {{domxref('Element')}} objects, ordered from the topmost to the bott
 let output = document.getElementById("output");
 if (document.elementsFromPoint) {
   let elements = document.elementsFromPoint(30, 20);
-  for (var i = 0; i < elements.length; i++) {
+  for (let i = 0; i < elements.length; i++) {
     output.textContent += elements[i].localName;
     if (i < elements.length - 1) {
       output.textContent += " < ";
diff --git a/files/en-us/web/api/document/evaluate/index.md b/files/en-us/web/api/document/evaluate/index.md
index 153d92128312e6c..df49d76c409543b 100644
--- a/files/en-us/web/api/document/evaluate/index.md
+++ b/files/en-us/web/api/document/evaluate/index.md
@@ -99,11 +99,11 @@ if not, it is the same object as the one passed as the `result` parameter.
 ## Examples
 
 ```js
-var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+const headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
 /* Search the document for all h2 elements.
  * The result will likely be an unordered node iterator. */
-var thisHeading = headings.iterateNext();
-var alertText = "Level 2 headings in this document are:\n";
+let thisHeading = headings.iterateNext();
+let alertText = "Level 2 headings in this document are:\n";
 while (thisHeading) {
   alertText += `${thisHeading.textContent}\n`;
   thisHeading = headings.iterateNext();
diff --git a/files/en-us/web/api/document/getelementsbyname/index.md b/files/en-us/web/api/document/getelementsbyname/index.md
index 106c9e1be674ed0..0f0c14252601b6f 100644
--- a/files/en-us/web/api/document/getelementsbyname/index.md
+++ b/files/en-us/web/api/document/getelementsbyname/index.md
@@ -48,7 +48,7 @@ A live {{domxref("NodeList")}} collection, meaning it automatically updates as n
 ```
 
 ```js
-var up_names = document.getElementsByName("up");
+const up_names = document.getElementsByName("up");
 console.log(up_names[0].tagName); // displays "INPUT"
 ```
 
diff --git a/files/en-us/web/api/document/images/index.md b/files/en-us/web/api/document/images/index.md
index 7a174b888c0d9c8..aee7557b89d2e3c 100644
--- a/files/en-us/web/api/document/images/index.md
+++ b/files/en-us/web/api/document/images/index.md
@@ -40,9 +40,9 @@ This example looks through the list of images and finds one whose name is
 `"banner.gif"`.
 
 ```js
-var ilist = document.images;
+const ilist = document.images;
 
-for(var i = 0; i < ilist.length; i++) {
+for(let i = 0; i < ilist.length; i++) {
     if(ilist[i].src === 'banner.gif') {
         // found the banner
     }
diff --git a/files/en-us/web/api/document/lastmodified/index.md b/files/en-us/web/api/document/lastmodified/index.md
index 09833410b4a715c..12d146b54c2af98 100644
--- a/files/en-us/web/api/document/lastmodified/index.md
+++ b/files/en-us/web/api/document/lastmodified/index.md
@@ -65,14 +65,13 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(
 …the same example, but skipping the first visit:
 
 ```js
-var
-  nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
-  nLastModif = Date.parse(document.lastModified);
+const lastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1"));
+const lastModif = Date.parse(document.lastModified);
 
-if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+if (isNaN(lastVisit) || lastModif > lastVisit) {
   document.cookie = `last_modif=${Date.now()}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=${location.pathname}`;
 
-  if (isFinite(nLastVisit)) {
+  if (isFinite(lastVisit)) {
     alert("This page has been changed!");
   }
 }
diff --git a/files/en-us/web/api/document/mozsyntheticdocument/index.md b/files/en-us/web/api/document/mozsyntheticdocument/index.md
index 079e3e3f457676c..d43b33619850efd 100644
--- a/files/en-us/web/api/document/mozsyntheticdocument/index.md
+++ b/files/en-us/web/api/document/mozsyntheticdocument/index.md
@@ -26,7 +26,7 @@ This can be useful if you have a contextual menu item you only want to display f
 synthetic documents (or, conversely, for documents that aren't synthetic).
 
 ```js
-var isSynthetic = document.mozSyntheticDocument;
+const isSynthetic = document.mozSyntheticDocument;
 
 if (isSynthetic) {
   /* insert your menu item here */
diff --git a/files/en-us/web/api/document/msthumbnailclick_event/index.md b/files/en-us/web/api/document/msthumbnailclick_event/index.md
index 910de6e7a955796..e0e94faf2b5e3bb 100644
--- a/files/en-us/web/api/document/msthumbnailclick_event/index.md
+++ b/files/en-us/web/api/document/msthumbnailclick_event/index.md
@@ -66,7 +66,7 @@ window.external.msSiteModeClearIconOverlay();
 handlerdocument.addEventListener('msthumbnailclick', onButtonClicked, false);
 
 // add the buttons
-var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
+const btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
 
 // refresh the taskbar
 window.external.msSiteModeShowThumbBar();
diff --git a/files/en-us/web/api/document/querycommandenabled/index.md b/files/en-us/web/api/document/querycommandenabled/index.md
index ec739c8701b3ded..0cfb995175e1178 100644
--- a/files/en-us/web/api/document/querycommandenabled/index.md
+++ b/files/en-us/web/api/document/querycommandenabled/index.md
@@ -42,7 +42,7 @@ and `false` if the command isn't`.`
 ## Example
 
 ```js
-var flg = document.queryCommandEnabled("SelectAll");
+const flg = document.queryCommandEnabled("SelectAll");
 
 if(flg) {
   document.execCommand("SelectAll", false, null); // command is enabled, run it
diff --git a/files/en-us/web/api/document/querycommandsupported/index.md b/files/en-us/web/api/document/querycommandsupported/index.md
index e98c1f4fa6ff743..bbaa05238274a35 100644
--- a/files/en-us/web/api/document/querycommandsupported/index.md
+++ b/files/en-us/web/api/document/querycommandsupported/index.md
@@ -42,7 +42,7 @@ the action.
 ## Examples
 
 ```js
-var flg = document.queryCommandSupported("SelectAll");
+const flg = document.queryCommandSupported("SelectAll");
 
 if(flg) {
   // Do something…
diff --git a/files/en-us/web/api/document/queryselector/index.md b/files/en-us/web/api/document/queryselector/index.md
index 429db6341dbb23c..d9b795077001c53 100644
--- a/files/en-us/web/api/document/queryselector/index.md
+++ b/files/en-us/web/api/document/queryselector/index.md
@@ -97,7 +97,7 @@ In this example, the first element in the document with the class
 "`myclass`" is returned:
 
 ```js
-var el = document.querySelector(".myclass");
+const el = document.querySelector(".myclass");
 ```
 
 ### Complex selectors
@@ -109,7 +109,7 @@ class is "user-panel main" (`<div class="user-panel main">`) in the
 document is returned:
 
 ```js
-var el = document.querySelector("div.user-panel.main input[name='login']");
+const el = document.querySelector("div.user-panel.main input[name='login']");
 ```
 
 ### Negation
@@ -117,7 +117,7 @@ var el = document.querySelector("div.user-panel.main input[name='login']");
 As all CSS selector strings are valid, you can also negate selectors:
 
 ```js
-var el = document.querySelector("div.user-panel:not(.main) input[name='login']");
+const el = document.querySelector("div.user-panel:not(.main) input[name='login']");
 ```
 
 This will select an input with a parent div with the `user-panel` class but
diff --git a/files/en-us/web/api/document/registerelement/index.md b/files/en-us/web/api/document/registerelement/index.md
index eb5a58c863f7714..6f4f54c388e368a 100644
--- a/files/en-us/web/api/document/registerelement/index.md
+++ b/files/en-us/web/api/document/registerelement/index.md
@@ -47,7 +47,7 @@ None ({{jsxref("undefined")}}).
 Here is a very simple example:
 
 ```js
-var Mytag = document.registerElement('my-tag');
+const Mytag = document.registerElement('my-tag');
 ```
 
 Now the new tag is registered in the browser. The `Mytag` variable holds a
@@ -64,7 +64,7 @@ capability. And it won't be visible in the browser unless you add some content t
 tag. Here is one way to add content to the new tag:
 
 ```js
-var mytag = document.getElementsByTagName("my-tag")[0];
+const mytag = document.getElementsByTagName("my-tag")[0];
 mytag.textContent = "I am a my-tag element.";
 ```
 
diff --git a/files/en-us/web/api/document/scrollingelement/index.md b/files/en-us/web/api/document/scrollingelement/index.md
index c292a0bdb094b1e..48791f52744b16a 100644
--- a/files/en-us/web/api/document/scrollingelement/index.md
+++ b/files/en-us/web/api/document/scrollingelement/index.md
@@ -27,7 +27,7 @@ The {{domxref("Element")}} that scrolls the document, usually the root element (
 ## Examples
 
 ```js
-var scrollElm = document.scrollingElement;
+const scrollElm = document.scrollingElement;
 scrollElm.scrollTop = 0;
 ```
 
diff --git a/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md
index 0e4aee8b9ecd345..d2a63456f7e5463 100644
--- a/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md
+++ b/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md
@@ -38,47 +38,47 @@ Consider the following XML document:
 The W3C DOM API, supported by Mozilla, can be used to create an in-memory representation of this document like so:
 
 ```js
-var doc = document.implementation.createDocument("", "", null);
-var peopleElem = doc.createElement("people");
+const doc = document.implementation.createDocument("", "", null);
+const peopleElem = doc.createElement("people");
 
-var personElem1 = doc.createElement("person");
+const personElem1 = doc.createElement("person");
 personElem1.setAttribute("first-name", "eric");
 personElem1.setAttribute("middle-initial", "h");
 personElem1.setAttribute("last-name", "jung");
 
-var addressElem1 = doc.createElement("address");
+const addressElem1 = doc.createElement("address");
 addressElem1.setAttribute("street", "321 south st");
 addressElem1.setAttribute("city", "denver");
 addressElem1.setAttribute("state", "co");
 addressElem1.setAttribute("country", "usa");
 personElem1.appendChild(addressElem1);
 
-var addressElem2 = doc.createElement("address");
+const addressElem2 = doc.createElement("address");
 addressElem2.setAttribute("street", "123 main st");
 addressElem2.setAttribute("city", "arlington");
 addressElem2.setAttribute("state", "ma");
 addressElem2.setAttribute("country", "usa");
 personElem1.appendChild(addressElem2);
 
-var personElem2 = doc.createElement("person");
+const personElem2 = doc.createElement("person");
 personElem2.setAttribute("first-name", "jed");
 personElem2.setAttribute("last-name", "brown");
 
-var addressElem3 = doc.createElement("address");
+const addressElem3 = doc.createElement("address");
 addressElem3.setAttribute("street", "321 north st");
 addressElem3.setAttribute("city", "atlanta");
 addressElem3.setAttribute("state", "ga");
 addressElem3.setAttribute("country", "usa");
 personElem2.appendChild(addressElem3);
 
-var addressElem4 = doc.createElement("address");
+const addressElem4 = doc.createElement("address");
 addressElem4.setAttribute("street", "123 west st");
 addressElem4.setAttribute("city", "seattle");
 addressElem4.setAttribute("state", "wa");
 addressElem4.setAttribute("country", "usa");
 personElem2.appendChild(addressElem4);
 
-var addressElem5 = doc.createElement("address");
+const addressElem5 = doc.createElement("address");
 addressElem5.setAttribute("street", "321 south avenue");
 addressElem5.setAttribute("city", "denver");
 addressElem5.setAttribute("state", "co");
diff --git a/files/en-us/web/api/domimplementation/createdocumenttype/index.md b/files/en-us/web/api/domimplementation/createdocumenttype/index.md
index 4ddbc4b76442bdb..beaa9cb0edb2cd2 100644
--- a/files/en-us/web/api/domimplementation/createdocumenttype/index.md
+++ b/files/en-us/web/api/domimplementation/createdocumenttype/index.md
@@ -41,8 +41,8 @@ None ({{jsxref("undefined")}}).
 ## Examples
 
 ```js
-var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
-var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
+const dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
+const d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
 alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
 ```
 
diff --git a/files/en-us/web/api/dommatrix/dommatrix/index.md b/files/en-us/web/api/dommatrix/dommatrix/index.md
index 89d8227302c3ab3..fb455d139b499fe 100644
--- a/files/en-us/web/api/dommatrix/dommatrix/index.md
+++ b/files/en-us/web/api/dommatrix/dommatrix/index.md
@@ -40,13 +40,13 @@ This example creates a DOMMatrix to use as an argument for calling
 {{domxref("Point.matrixTransform()")}}.
 
 ```js
-var point = new DOMPoint(5, 4);
-var scaleX = 2;
-var scaleY = 3;
-var translateX = 12;
-var translateY = 8;
-var angle = Math.PI / 2;
-var matrix = new DOMMatrix([
+const point = new DOMPoint(5, 4);
+const scaleX = 2;
+const scaleY = 3;
+const translateX = 12;
+const translateY = 8;
+const angle = Math.PI / 2;
+const matrix = new DOMMatrix([
   Math.sin(angle) * scaleX,
   Math.cos(angle) * scaleX,
   -Math.sin(angle) * scaleY,
@@ -54,7 +54,7 @@ var matrix = new DOMMatrix([
   translateX,
   translateY
 ]);
-var transformedPoint = point.matrixTransform(matrix);
+const transformedPoint = point.matrixTransform(matrix);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/dompoint/dompoint/index.md b/files/en-us/web/api/dompoint/dompoint/index.md
index e86b7f8c8f90644..a68ba2ded38e231 100644
--- a/files/en-us/web/api/dompoint/dompoint/index.md
+++ b/files/en-us/web/api/dompoint/dompoint/index.md
@@ -52,8 +52,8 @@ current window, then creates a second point based on the first, which is then of
 100 pixels both vertically and horizontally.
 
 ```js
-var windTopLeft = new DOMPoint(window.screenX, window.screenY);
-var newTopLeft = DOMPoint.fromPoint(windTopLeft);
+const windTopLeft = new DOMPoint(window.screenX, window.screenY);
+const newTopLeft = DOMPoint.fromPoint(windTopLeft);
 newTopLeft.x += 100;
 newTopLeft.y += 100;
 ```
diff --git a/files/en-us/web/api/dompoint/frompoint/index.md b/files/en-us/web/api/dompoint/frompoint/index.md
index 7a61c98abea16d7..748f061fb7def4f 100644
--- a/files/en-us/web/api/dompoint/frompoint/index.md
+++ b/files/en-us/web/api/dompoint/frompoint/index.md
@@ -65,7 +65,7 @@ If you have a {{domxref("DOMPointReadOnly")}} object, you can easily create a mu
 copy of that point:
 
 ```js
-var mutablePoint = DOMPoint.fromPoint(readOnlyPoint);
+const mutablePoint = DOMPoint.fromPoint(readOnlyPoint);
 ```
 
 ### Creating a 2D point
@@ -76,7 +76,7 @@ use for {{domxref("DOMPointReadOnly.x", "x")}} and {{domxref("DOMPointReadOnly.y
 values (0 and 1 respectively).
 
 ```js
-var center = DOMPoint.fromPoint({x: 75, y: -50, z: -55, w: 0.25});
+const center = DOMPoint.fromPoint({x: 75, y: -50, z: -55, w: 0.25});
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md
index 13f925f639dd80d..d341d3a8d4a1299 100644
--- a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md
+++ b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md
@@ -60,9 +60,9 @@ space.
 The following code demonstrates creating both 2D and 3D points.
 
 ```js
-var point2D = new DOMPointReadOnly(50, 25);
-var point3D = new DOMPointReadOnly(50, 0, 10);
-var perspectivePoint3D = new DOMPointReadOnly(50, 50, 25, 0.5);
+const point2D = new DOMPointReadOnly(50, 25);
+const point3D = new DOMPointReadOnly(50, 0, 10);
+const perspectivePoint3D = new DOMPointReadOnly(50, 50, 25, 0.5);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/dompointreadonly/tojson/index.md b/files/en-us/web/api/dompointreadonly/tojson/index.md
index e73b58a2be2b3bf..3a4e58e53fa86c3 100644
--- a/files/en-us/web/api/dompointreadonly/tojson/index.md
+++ b/files/en-us/web/api/dompointreadonly/tojson/index.md
@@ -43,9 +43,9 @@ This example creates a {{domxref("DOMPoint")}} object representing the top-left
 of the current window, in screen coordinates, then converts that to JSON.
 
 ```js
-var topLeft = new DOMPoint(window.screenX, window.screenY);
+const topLeft = new DOMPoint(window.screenX, window.screenY);
 
-var pointJSON = topLeft.toJSON();
+const pointJSON = topLeft.toJSON();
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/dynamicscompressornode/attack/index.md b/files/en-us/web/api/dynamicscompressornode/attack/index.md
index 11aa7368e8a2214..633e71a8c8f79d9 100644
--- a/files/en-us/web/api/dynamicscompressornode/attack/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/attack/index.md
@@ -26,8 +26,8 @@ An {{domxref("AudioParam")}}.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
 compressor.attack.value = 0;
 ```
 
diff --git a/files/en-us/web/api/dynamicscompressornode/knee/index.md b/files/en-us/web/api/dynamicscompressornode/knee/index.md
index b84b2eaacac673b..562a0427f275e06 100644
--- a/files/en-us/web/api/dynamicscompressornode/knee/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/knee/index.md
@@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
 compressor.knee.value = 40;
 ```
 
diff --git a/files/en-us/web/api/dynamicscompressornode/ratio/index.md b/files/en-us/web/api/dynamicscompressornode/ratio/index.md
index 98c16ac1548ff5d..72196090352392d 100644
--- a/files/en-us/web/api/dynamicscompressornode/ratio/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/ratio/index.md
@@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
 compressor.ratio.value = 12;
 ```
 
diff --git a/files/en-us/web/api/dynamicscompressornode/reduction/index.md b/files/en-us/web/api/dynamicscompressornode/reduction/index.md
index 8ff95be35c313d7..0b0bc980fb952fd 100644
--- a/files/en-us/web/api/dynamicscompressornode/reduction/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/reduction/index.md
@@ -24,9 +24,9 @@ A float.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
-var myReduction = compressor.reduction;
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
+const myReduction = compressor.reduction;
 ```
 
 See [`BaseAudioContext.createDynamicsCompressor()`](/en-US/docs/Web/API/BaseAudioContext/createDynamicsCompressor#example) for more complete example code.
diff --git a/files/en-us/web/api/dynamicscompressornode/release/index.md b/files/en-us/web/api/dynamicscompressornode/release/index.md
index 94847740bb1571f..0318f01f338516d 100644
--- a/files/en-us/web/api/dynamicscompressornode/release/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/release/index.md
@@ -26,8 +26,8 @@ An {{domxref("AudioParam")}}.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
 compressor.release.value = 0.25;
 ```
 
diff --git a/files/en-us/web/api/dynamicscompressornode/threshold/index.md b/files/en-us/web/api/dynamicscompressornode/threshold/index.md
index c0bb45b43e449dc..66af10b1ab42e43 100644
--- a/files/en-us/web/api/dynamicscompressornode/threshold/index.md
+++ b/files/en-us/web/api/dynamicscompressornode/threshold/index.md
@@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}.
 ## Examples
 
 ```js
-var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
+const audioCtx = new AudioContext();
+const compressor = audioCtx.createDynamicsCompressor();
 compressor.threshold.value = -50;
 ```
 
diff --git a/files/en-us/web/api/element/fullscreenchange_event/index.md b/files/en-us/web/api/element/fullscreenchange_event/index.md
index 49cbfa254c46f80..95d4c91ba470091 100644
--- a/files/en-us/web/api/element/fullscreenchange_event/index.md
+++ b/files/en-us/web/api/element/fullscreenchange_event/index.md
@@ -68,7 +68,7 @@ function fullscreenchanged(event) {
   }
 };
 
-var el = document.getElementById('fullscreen-div');
+const el = document.getElementById('fullscreen-div');
 
 el.addEventListener('fullscreenchange', fullscreenchanged);
 // or
diff --git a/files/en-us/web/api/element/getboundingclientrect/index.md b/files/en-us/web/api/element/getboundingclientrect/index.md
index ddd63fe0ae947d8..4fef21dd4af245f 100644
--- a/files/en-us/web/api/element/getboundingclientrect/index.md
+++ b/files/en-us/web/api/element/getboundingclientrect/index.md
@@ -107,7 +107,7 @@ div {
 ```js
 let elem = document.querySelector('div');
 let rect = elem.getBoundingClientRect();
-for (var key in rect) {
+for (const key in rect) {
   if(typeof rect[key] !== 'function') {
     let para = document.createElement('p');
     para.textContent  = `${key} : ${rect[key]}`;
@@ -155,7 +155,7 @@ function update() {
   const rect = elem.getBoundingClientRect();
 
   container.innerHTML = '';
-  for (let key in rect) {
+  for (const key in rect) {
     if(typeof rect[key] !== 'function') {
       let para = document.createElement('p');
       para.textContent  = `${key} : ${rect[key]}`;
diff --git a/files/en-us/web/api/element/getelementsbyclassname/index.md b/files/en-us/web/api/element/getelementsbyclassname/index.md
index c3aedab8df77e58..10b9168769654fd 100644
--- a/files/en-us/web/api/element/getelementsbyclassname/index.md
+++ b/files/en-us/web/api/element/getelementsbyclassname/index.md
@@ -91,9 +91,9 @@ work as one might expect because `"matches"` will change as
 soon as any `"colorbox"` class is removed.
 
 ```js
-var matches = element.getElementsByClassName('colorbox');
+const matches = element.getElementsByClassName('colorbox');
 
-for (var i=0; i<matches.length; i++) {
+for (let i = 0; i < matches.length; i++) {
   matches[i].classList.remove('colorbox');
   matches.item(i).classList.add('hueframe');
 }
@@ -102,7 +102,7 @@ for (var i=0; i<matches.length; i++) {
 Instead, use another method, such as:
 
 ```js
-var matches = element.getElementsByClassName('colorbox');
+const matches = element.getElementsByClassName('colorbox');
 
 while (matches.length > 0) {
   matches.item(0).classList.add('hueframe');
@@ -123,8 +123,8 @@ method's `this` value. Here we'll find all {{HTMLElement("div")}} elements
 that have a class of `test`:
 
 ```js
-var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+const testElements = document.getElementsByClassName('test');
+const testDivs = Array.prototype.filter.call(testElements, function(testElement) {
   return testElement.nodeName === 'DIV';
 });
 ```
diff --git a/files/en-us/web/api/element/hasattribute/index.md b/files/en-us/web/api/element/hasattribute/index.md
index 214d3fef18ede1e..5807020c4258def 100644
--- a/files/en-us/web/api/element/hasattribute/index.md
+++ b/files/en-us/web/api/element/hasattribute/index.md
@@ -34,7 +34,7 @@ A boolean.
 ## Examples
 
 ```js
-var foo = document.getElementById("foo");
+const foo = document.getElementById("foo");
 if (foo.hasAttribute("bar")) {
     // do something
 }
diff --git a/files/en-us/web/api/element/hasattributens/index.md b/files/en-us/web/api/element/hasattributens/index.md
index 363df2d0b17034e..270c73f68213434 100644
--- a/files/en-us/web/api/element/hasattributens/index.md
+++ b/files/en-us/web/api/element/hasattributens/index.md
@@ -33,7 +33,7 @@ A boolean.
 
 ```js
 // Check that the attribute exists before you set a value
-var d = document.getElementById("div1");
+const d = document.getElementById("div1");
 if (d.hasAttributeNS(
         "http://www.mozilla.org/ns/specialspace/",
         "special-align")) {