no more vars in Web/API (2) (#18864)

* no more vars in Web/API

* See #16662
* See #10389
* See https://github.com/orgs/mdn/discussions/143
* Mostly automated via my ESLint setup, using the rules 'no-var' and 'prefer-const'

* split var declarations into 2 lines, rename them

* Apply suggestions from code review

Co-authored-by: rubiesonthesky <[email protected]>

* keep var in polyfills

* Apply suggestions from code review

Co-authored-by: Jean-Yves Perrier <[email protected]>

Co-authored-by: rubiesonthesky <[email protected]>
Co-authored-by: Jean-Yves Perrier <[email protected]>

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
 
 // …

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);

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

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
 
 // …

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

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
 

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
 

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
 

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
 

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
 

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

files/en-us/web/api/bluetooth/getdevices/index.md

@@ -23,7 +23,7 @@ permission prompts.
 ## Syntax
 
 ```js
-var readerPromise = Bluetooth.getDevices();
+getDevices()
 ```
 
 ### Parameters

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")}}.
 

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!');
 ```
 

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, …)
 

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

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

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

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;

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,

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;