fix: syntax errors in JS example sections (v2) (#18191)

* syntax fixes

* use descriptive variable names

* incorporate review suggestions

* syntax fixes

* remaining review feedback changes

* incorporate review suggestions

* store patterns in variables pattern[1..4]

files/en-us/web/api/url_pattern_api/index.md

@@ -62,7 +62,9 @@ explained below, but they can be overwritten.
 const pattern = new URLPattern({ pathname: '/books' });
 console.log(pattern.test('https://example.com/books')); // true
 console.log(pattern.exec('https://example.com/books').pathname.groups); // {}
+```
 
+```js
 // A pattern matching with a named group
 const pattern = new URLPattern({ pathname: '/books/:id' });
 console.log(pattern.test('https://example.com/books/123')); // true
@@ -102,12 +104,16 @@ Some regex patterns do not work as you may expect:
   const pattern = new URLPattern({ pathname: '(^b)' });
   console.log(pattern.test('https://example.com/ba')); // false
   console.log(pattern.test('https://example.com/xa')); // false
+  ```
 
+  ```js
   // with `^` in protocol
   const pattern = new URLPattern({ protocol: '(^https?)' });
   console.log(pattern.test('https://example.com/index.html')); // true
   console.log(pattern.test('xhttps://example.com/index.html')); // false
+  ```
 
+  ```js
   // without `^` in protocol
   const pattern = new URLPattern({ protocol: '(https?)' });
   console.log(pattern.test('https://example.com/index.html')); // true
@@ -121,12 +127,16 @@ Some regex patterns do not work as you may expect:
   const pattern = new URLPattern({ pathname: '(path$)' });
   console.log(pattern.test('https://example.com/path')); // false
   console.log(pattern.test('https://example.com/other')); // false
+  ```
 
+  ```js
   // with `$` in protocol
   const pattern = new URLPattern({ hash: '(hash$)' });
   console.log(pattern.test('https://example.com/#hash')); // true
   console.log(pattern.test('xhttps://example.com/#otherhash')); // false
+  ```
 
+  ```js
   // without `$` in protocol
   const pattern = new URLPattern({ hash: '(hash)' });
   console.log(pattern.test('https://example.com/#hash')); // true
@@ -140,17 +150,23 @@ Some regex patterns do not work as you may expect:
   const pattern = new URLPattern({ pathname: '(a(?=b))' });
   console.log(pattern.test('https://example.com/ab')); // false
   console.log(pattern.test('https://example.com/ax')); // false
+  ```
 
+  ```js
   // negative-lookahead
   const pattern = new URLPattern({ pathname: '(a(?!b))' });
   console.log(pattern.test('https://example.com/ab')); // false
   console.log(pattern.test('https://example.com/ax')); // false
+  ```
 
+  ```js
   // lookbehind
   const pattern = new URLPattern({ pathname: '((?<=b)a)' });
   console.log(pattern.test('https://example.com/ba')); // false
   console.log(pattern.test('https://example.com/xa')); // false
+  ```
 
+  ```js
   // negative-lookbehind
   const pattern = new URLPattern({ pathname: '((?<!b)a)' });
   console.log(pattern.test('https://example.com/ba')); // false
@@ -160,11 +176,11 @@ Some regex patterns do not work as you may expect:
 - Parentheses need to be escaped in range expressions within URLPattern even though they don't in RegExp.
 
   ```js
-  const pattern = new URLPattern({ pathname: '([()])' }); // throws
-  const pattern = new URLPattern({ pathname: '([\\(\\)])' }); // ok
+  new URLPattern({ pathname: '([()])' }); // throws
+  new URLPattern({ pathname: '([\\(\\)])' }); // ok
 
-  const regex = new RegExp('[()]'); // ok
-  const regex = new RegExp('[\\(\\)]'); // ok
+  new RegExp('[()]'); // ok
+  new RegExp('[\\(\\)]'); // ok
   ```
 
 ### Unnamed and named groups
@@ -178,7 +194,9 @@ result based on their order in the pattern.
 // A named group
 const pattern = new URLPattern('/books/:id(\\d+)', 'https://example.com');
 console.log(pattern.exec('https://example.com/books/123').pathname.groups); // { id: '123' }
+```
 
+```js
 // An unnamed group
 const pattern = new URLPattern('/books/(\\d+)', 'https://example.com');
 console.log(pattern.exec('https://example.com/books/123').pathname.groups); // { '0': '123' }
@@ -199,15 +217,19 @@ console.log(pattern.test('https://example.com/books')); // true
 console.log(pattern.test('https://example.com/books/')); // false
 console.log(pattern.test('https://example.com/books/123/456')); // false
 console.log(pattern.test('https://example.com/books/123/456/789')); // false
+```
 
+```js
 // A repeating group with a minimum of one
 const pattern = new URLPattern('/books/:id+', 'https://example.com');
 console.log(pattern.test('https://example.com/books/123')); // true
 console.log(pattern.test('https://example.com/books')); // false
 console.log(pattern.test('https://example.com/books/')); // false
 console.log(pattern.test('https://example.com/books/123/456')); // true
 console.log(pattern.test('https://example.com/books/123/456/789')); // true
+```
 
+```js
 // A repeating group with a minimum of zero
 const pattern = new URLPattern('/books/:id*', 'https://example.com');
 console.log(pattern.test('https://example.com/books/123')); // true
@@ -233,13 +255,17 @@ const pattern = new URLPattern('/book{s}?', 'https://example.com');
 console.log(pattern.test('https://example.com/books')); // true
 console.log(pattern.test('https://example.com/book')); // true
 console.log(pattern.exec('https://example.com/books').pathname.groups); // {}
+```
 
+```js
 // A group delimiter without a modifier
 const pattern = new URLPattern('/book{s}', 'https://example.com');
 console.log(pattern.pathname); // /books
 console.log(pattern.test('https://example.com/books')); // true
 console.log(pattern.test('https://example.com/book')); // false
+```
 
+```js
 // A group delimiter containing a capturing group
 const pattern = new URLPattern({ pathname: '/blog/:id(\\d+){-:title}?' });
 console.log(pattern.test('https://example.com/blog/123-my-blog')); // true
@@ -264,20 +290,26 @@ const pattern = new URLPattern('/books/:id?', 'https://example.com');
 console.log(pattern.test('https://example.com/books/123')); // true
 console.log(pattern.test('https://example.com/books')); // true
 console.log(pattern.test('https://example.com/books/')); // false
+```
 
+```js
 // A pattern with a repeating group, preceded by a slash
 const pattern = new URLPattern('/books/:id+', 'https://example.com');
 console.log(pattern.test('https://example.com/books/123')); // true
 console.log(pattern.test('https://example.com/books/123/456')); // true
 console.log(pattern.test('https://example.com/books/123/')); // false
 console.log(pattern.test('https://example.com/books/123/456/')); // false
+```
 
+```js
 // Segment prefixing does not occur outside of pathname patterns
 const pattern = new URLPattern({ hash: '/books/:id?' });
 console.log(pattern.test('https://example.com#/books/123')); // true
 console.log(pattern.test('https://example.com#/books')); // false
 console.log(pattern.test('https://example.com#/books/')); // true
+```
 
+```js
 // Disabling segment prefixing for a group using a group delimiter
 const pattern = new URLPattern({ pathname: '/books/{:id}?' });
 console.log(pattern.test('https://example.com/books/123')); // true
@@ -299,7 +331,9 @@ console.log(pattern.test('https://example.com/books/123')); // true
 console.log(pattern.test('https://example.com/books')); // false
 console.log(pattern.test('https://example.com/books/')); // true
 console.log(pattern.test('https://example.com/books/123/456')); // true
+```
 
+```js
 // A wildcard in the middle of a pattern
 const pattern = new URLPattern('/*.png', 'https://example.com');
 console.log(pattern.test('https://example.com/image.png')); // true
@@ -379,11 +413,11 @@ console.log(pattern.hash); // ''
 
 // Prints `true`
 console.log(
-    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg");
+    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg"));
 
 // Prints `false` because the search component does not match
 console.log(
-    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1");
+    pattern.test("https://cdn-1234.example.com/product/assets/hero.jpg?q=1"));
 ```
 
 ### Constructing a URLPattern with an ambiguous URL string

files/en-us/web/api/urlpattern/urlpattern/index.md

@@ -50,27 +50,34 @@ new URLPattern(input, baseURL)
 
 ```js
 // Matching a pathname
-let pattern = new URLPattern('https://example.com/books/:id')
-    = new URLPattern(
-        '/books/:id',
-        'https://example.com',
-      )
-    = new URLPattern({
-        protocol: 'https',
-        hostname: 'example.com',
-        pathname: '/books/:id',
-      })
-    = new URLPattern({
-        pathname: '/books/:id',
-        baseURL: 'https://example.com',
-      });
+let pattern1 = new URLPattern('https://example.com/books/:id')
+// same as
+let pattern2 = new URLPattern(
+  '/books/:id',
+  'https://example.com',
+);
+// or
+let pattern3 = new URLPattern({
+  protocol: 'https',
+  hostname: 'example.com',
+  pathname: '/books/:id',
+});
+// or
+let pattern4 = new URLPattern({
+  pathname: '/books/:id',
+  baseURL: 'https://example.com',
+});
+```
 
+```js
 // Match the protocol and hostname
 let pattern = new URLPattern({
-    protocol: 'http{s}?',
-    hostname: ':subdomain.example.com',
-  });
+  protocol: 'http{s}?',
+  hostname: ':subdomain.example.com',
+});
+```
 
+```js
 // Match all possible structured parts
 let pattern = new URLPattern({
   protocol: 'http{s}?',
@@ -91,7 +98,8 @@ pattern object, or a pattern string and optional baseURL.
 
 ```js
 new URLPattern(obj);
-new URLPattern(pattern[, baseURL]);
+new URLPattern(pattern);
+new URLPattern(pattern, baseURL);
 ```
 
 The first type of constructor (see above) takes an object that describes the

files/en-us/web/api/usbendpoint/index.md

@@ -64,9 +64,9 @@ This code identifies the correct endpoints by searching for the interface implem
 let inEndpoint = undefined;
 let outEndpoint = undefined;
 
-for (const interface of device.configuration.interfaces) {
+for (const { alternates } of device.configuration.interfaces) {
   // Only support devices with out multiple alternate interfaces.
-  const alternate = interface.alternates[0];
+  const alternate = alternates[0];
 
   // Identify the interface implementing the USB CDC class.
   const USB_CDC_CLASS = 10;

files/en-us/web/api/user_timing_api/using_the_user_timing_api/index.md

@@ -30,16 +30,17 @@ function create_marks(ev) {
     log("Create Marks: performance.mark Not supported", 0);
     return;
   } else {
-  log("Create marks", 0);
-  // Create several performance marks including two with the same name
-  performance.mark("mark-1");
-  do_work(50000);
-  performance.mark("mark-2");
-  do_work(50000);
-  performance.mark("mark-2");
-  const marks = ["mark-1", "mark-2", "mark-2"];
-  for (let i = 0; i < marks.length; i++)
-    log("... Created mark = " + marks[i], 0);
+    log("Create marks", 0);
+    // Create several performance marks including two with the same name
+    performance.mark("mark-1");
+    do_work(50000);
+    performance.mark("mark-2");
+    do_work(50000);
+    performance.mark("mark-2");
+    const marks = ["mark-1", "mark-2", "mark-2"];
+    for (let i=0; i < marks.length; i++)
+      log("... Created mark = " + marks[i], 0);
+  }
 }
 ```
 

files/en-us/web/api/videoframe/videoframe/index.md

@@ -122,7 +122,7 @@ The following examples are from the article [Video processing with WebCodecs](ht
 ```js
 const cnv = document.createElement('canvas');
 // draw something on the canvas
-…
+// ...
 let frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });
 ```
 

files/en-us/web/api/videotrack/index.md

@@ -59,7 +59,7 @@ for (var i = 0; i < tracks.length; i++) {
     tracks[i].selected = true;
     break;
   }
-});
+};
 ```
 
 The {{domxref("VideoTrack.language", "language")}} is in standard ({{RFC(5646)}}) format. For US English, this would be `"en-US"`, for example.

files/en-us/web/api/vrdisplay/cancelanimationframe/index.md

@@ -93,7 +93,7 @@ function drawVRScene() {
   // WebVR: Request the next frame of the animation
   vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
 
-  ...
+  // ...
 }
 ```
 

files/en-us/web/api/vrdisplay/getframedata/index.md

@@ -94,7 +94,7 @@ function drawVRScene() {
     // draw the view for each eye
   }
 
-    ...
+  // ...
 
   // WebVR: Indicate that we are ready to present the rendered frame to the VR display
   vrDisplay.submitFrame();

files/en-us/web/api/vrdisplay/getpose/index.md

@@ -50,10 +50,10 @@ if(navigator.getVRDisplays) {
       vrDisplay = displays[0];
       console.log('Display found');
 
-          // Return the current VRPose object for the display
-          const pose = vrDisplay.getPose();
+      // Return the current VRPose object for the display
+      const pose = vrDisplay.getPose();
 
-          // …
+      // ...
 
     }
   });

files/en-us/web/api/vrdisplay/requestanimationframe/index.md

@@ -94,7 +94,7 @@ function drawVRScene() {
     // draw the view for each eye
   }
 
-    ...
+  // ...
 
   // WebVR: Indicate that we are ready to present the rendered frame to the VR display
   vrDisplay.submitFrame();

files/en-us/web/api/vrdisplay/submitframe/index.md

@@ -92,7 +92,7 @@ function drawVRScene() {
     // draw the view for each eye
   }
 
-    ...
+  // ...
 
   // WebVR: Indicate that we are ready to present the rendered frame to the VR display
   vrDisplay.submitFrame();

files/en-us/web/api/vrframedata/timestamp/index.md

@@ -57,7 +57,7 @@ function drawVRScene() {
   // and do something with it
   framedata.timestamp
 
-    ...
+  // ...
 
   // WebVR: Indicates that we are ready to present the rendered frame to the VR display
   vrDisplay.submitFrame();

files/en-us/web/api/vrlayerinit/index.md

@@ -52,7 +52,7 @@ if(navigator.getVRDisplays) {
           // Here it returns an array of VRLayerInit objects
           var layers = vrDisplay.getLayers();
 
-          ...
+          // ...
         });
       });
     }
@@ -62,7 +62,7 @@ if(navigator.getVRDisplays) {
 
 {{domxref("VRLayerInit")}} objects look something like this:
 
-```js
+```
 {
   leftBounds : [ ... ],
   rightBounds: [ ... ],

files/en-us/web/api/vrpose/angularacceleration/index.md

@@ -46,7 +46,7 @@ function drawVRScene() {
   var aaz = angAcc[2];
 
   // render the scene
-  ...
+  // ...
 
   // WebVR: submit the rendered frame to the VR display
   vrDisplay.submitFrame();

files/en-us/web/api/vrpose/angularvelocity/index.md

@@ -46,7 +46,7 @@ function drawVRScene() {
   var avz = angVel[2];
 
   // render the scene
-  ...
+  // ...
 
   // WebVR: submit the rendered frame to the VR display
   vrDisplay.submitFrame();