recursal/MDN huggingface dataset:
ElementInternals: labels property
=================================

The **`labels`** read-only property of the `ElementInternals` interface returns the labels associated with the element.

Value
-----

A `NodeList` containing all of the label elements associated with this element.

Examples
--------

 The following example shows a custom checkbox component with a `<label>` element linked to it.
 Printing the value of `labels` to the console returns a `NodeList` with one entry, representing this label.


```html
<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <label for="custom-checkbox">Join newsletter</label>
</form>
```



```js
let element = document.getElementById("custom-checkbox");
console.log(element.internals_.label);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-labels |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: ariaDescription property
==========================================

The **`ariaDescription`** property of the `ElementInternals` interface reflects the value of the `aria-description` attribute, which defines a string value that describes or annotates the current element.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string.

Examples
--------

In this example the value of `ariaDescription` is set to "A description of this widget".


```js
this.internals_.ariaDescription = "A description of this widget";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariadescription |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: validationMessage property
============================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`validationMessage`** read-only property of the `ElementInternals` interface returns the validation message for the element.

Value
-----

A string containing the validation message of this element.

Examples
--------

In the following example the validation message is set with `ElementInternals.setValidity()`, and then returned with `validationMessage`.


```js
this.internals_.setValidity({ valueMissing: true }, "my message");
console.log(this.internals_.validationMessage); // "my message"
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-elementinternals-validationmessage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: ariaValueNow property
=======================================

The **`ariaValueNow`** property of the `ElementInternals` interface reflects the value of the `aria-valuenow` attribute, which defines the current value for a range widget.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string which contains a number.

Examples
--------

In this example the value of `ariaValueNow` is set to "1".


```js
this.internals_.ariaValueNow = "1";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariavaluenow |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ElementInternals: ariaExpanded property
=======================================

The **`ariaExpanded`** property of the `ElementInternals` interface reflects the value of the `aria-expanded` attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed.

**Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the Accessibility Object Model explainer.

Value
-----

A string with one of the following values:

`"true"`

The grouping element this element owns or controls is expanded.

`"false"`

The grouping element this element owns or controls is collapsed.

`"undefined"`

The element does not own or control a grouping element that is expandable.

Examples
--------

In this example the value of `ariaExpanded` is set to "true".


```js
this.internals_.ariaExpanded = "true";
```

Specifications
--------------

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaexpanded |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileSystemSyncAccessHandle: close() method
==========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`close()`** method of the
 `FileSystemSyncAccessHandle` interface closes an open synchronous file handle, disabling any further operations on it and releasing the exclusive lock previously put on the file associated with the file handle.

**Note:** In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

* Creates a synchronous file access handle.
* Gets the size of the file and creates an `ArrayBuffer` to contain it.
* Reads the file contents into the buffer.
* Encodes the message and writes it to the end of the file.
* Persists the changes to disk and closes the access handle.


```js
onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};
```

Specifications
--------------

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-close |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File System API
* The File System Access API: simplifying access to local files
FileSystemSyncAccessHandle: getSize() method
============================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`getSize()`** method of the
 `FileSystemSyncAccessHandle` interface returns the size of the file associated with the handle in bytes.

**Note:** In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.

Syntax
------


```js
getSize()
```

### Parameters

None.

### Return value

A number representing the size of the file in bytes.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the associated access handle is already closed.

Examples
--------

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

* Creates a synchronous file access handle.
* Gets the size of the file and creates an `ArrayBuffer` to contain it.
* Reads the file contents into the buffer.
* Encodes the message and writes it to the end of the file.
* Persists the changes to disk and closes the access handle.


```js
onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};
```

Specifications
--------------

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-getsize |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File System API
* The File System Access API: simplifying access to local files
FileSystemSyncAccessHandle: flush() method
==========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`flush()`** method of the
 `FileSystemSyncAccessHandle` interface persists any changes made to the file associated with the handle via the `write()` method to disk.

Bear in mind that you only need to call this method if you need the changes committed to disk at a specific time, otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases.

**Note:** In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.

Syntax
------


```js
flush()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the associated access handle is already closed.

Examples
--------

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

* Creates a synchronous file access handle.
* Gets the size of the file and creates an `ArrayBuffer` to contain it.
* Reads the file contents into the buffer.
* Encodes the message and writes it to the end of the file.
* Persists the changes to disk and closes the access handle.


```js
onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};
```

Specifications
--------------

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-flush |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File System API
* The File System Access API: simplifying access to local files
FileSystemSyncAccessHandle: truncate() method
=============================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`truncate()`** method of the
 `FileSystemSyncAccessHandle` interface resizes the file associated with the handle to a specified number of bytes.

**Note:** In earlier versions of the spec, `close()`, `flush()`, `getSize()`, and `truncate()` were wrongly specified as asynchronous methods, and older versions of some browsers implement them in this way. However, all current browsers that support these methods implement them as synchronous methods.

Syntax
------


```js
truncate(newSize)
```

### Parameters

`newSize`

The number of bytes to resize the file to.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the associated access handle is already closed, or if the modification of the file's binary data otherwise fails.

`QuotaExceededError` `DOMException`

Thrown if the `newSize` is larger than the original size of the file, and exceeds the browser's storage quota.

`TypeError`

Thrown if the underlying file system does not support setting the file size to the new size.

Examples
--------


```js
async function truncateFile() {
  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Truncate the file to 0 bytes
  accessHandle.truncate(0);

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
}
```

Specifications
--------------

| Specification |
| --- |
| File System Standard # api-filesystemsyncaccesshandle-truncate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File System API
* The File System Access API: simplifying access to local files
AudioDestinationNode: maxChannelCount property
==============================================

The `maxchannelCount` property of the `AudioDestinationNode` interface is an `unsigned long` defining the maximum amount of channels that the physical device can handle.

The `AudioNode.channelCount` property can be set between 0 and this value (both included). If `maxChannelCount` is `0`, like in `OfflineAudioContext`, the channel count cannot be changed.

Value
-----

An `unsigned long`.

Examples
--------

The following would set up a simple audio graph, featuring an `AudioDestinationNode` with `maxChannelCount` of 2:


```js
const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(myMediaElement);
source.connect(gainNode);
audioCtx.destination.maxChannelCount = 2;
gainNode.connect(audioCtx.destination);
```


To see a more complete implementation, check out one of our MDN Web Audio examples, such as Voice-change-o-matic or Violent Theremin.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiodestinationnode-maxchannelcount |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
JavaScript Guide
================

The JavaScript Guide shows you how to use JavaScript and gives an overview of the language. If you need exhaustive information about a language feature, have a look at the JavaScript reference.

This Guide is divided into the following chapters.

Introduction
------------

Overview: Introduction

* About this guide
* About JavaScript
* JavaScript and Java
* ECMAScript
* Tools
* Hello World
Grammar and types
-----------------

Overview: Grammar and types

* Basic syntax & comments
* Declarations
* Variable scope
* Variable hoisting
* Data structures and types
* Literals
Control flow and error handling
-------------------------------

Overview: Control flow and error handling

* `if...else`
* `switch`
* `try`/`catch`/`throw`
* Error objects
Loops and iteration
-------------------

Overview: Loops and iteration

* `for`
* `while`
* `do...while`
* `continue`
* `break`
* `for...in`
* `for...of`
Functions
---------

Overview: Functions

* Defining functions
* Calling functions
* Function scope
* Closures
* Arguments & parameters
* Arrow functions
Expressions and operators
-------------------------

Overview: Expressions and operators

* Assignment & Comparisons
* Arithmetic operators
* Bitwise & logical operators
* Conditional (ternary) operator
Numbers and dates
-----------------

Overview: Numbers and dates

* Number literals
* `Number` object
* `Math` object
* `Date` object
Text formatting
---------------

Overview: Text formatting

* String literals
* `String` object
* Template literals
* Internationalization
* Regular Expressions
Indexed collections
-------------------

Overview: Indexed collections

Keyed collections
-----------------

Overview: Keyed collections

* `Map`
* `WeakMap`
* `Set`
* `WeakSet`
Working with objects
--------------------

Overview: Working with objects

* Objects and properties
* Creating objects
* Defining methods
* Getter and setter
Using classes
-------------

Overview: Using classes

* Declaring a class
* Various class features
* Extends and inheritance
* Why classes?
Promises
--------

Overview: Promises

* Guarantees
* Chaining
* Error handling
* Composition
* Timing
Typed arrays
------------

Overview: Typed arrays

Iterators and generators
------------------------

Overview: Iterators and generators

* Iterators
* Iterables
* Generators
Meta programming
----------------

Overview: Meta programming

* `Proxy`
* Handlers and traps
* Revocable Proxy
* `Reflect`
JavaScript modules
------------------

Overview: JavaScript modules

* Exporting
* Importing
* Default exports
* Renaming features
* Aggregating modules
* Dynamic module loading
* Next »
Increment (++)
==============

The **increment (`++`)** operator increments (adds one to) its operand and returns the value before or after the increment, depending on where the operator is placed.

Try it
------

Syntax
------


```js
x++
++x
```

Description
-----------

The `++` operator is overloaded for two types of operands: number and BigInt. It first coerces the operand to a numeric value and tests the type of it. It performs BigInt increment if the operand becomes a BigInt; otherwise, it performs number increment.

If used postfix, with operator after operand (for example, `x++`), the increment operator increments and returns the value before incrementing.

If used prefix, with operator before operand (for example, `++x`), the increment operator increments and returns the value after incrementing.

The increment operator can only be applied on operands that are references (variables and object properties; i.e. valid assignment targets). `++x` itself evaluates to a value, not a reference, so you cannot chain multiple increment operators together.


```js
++(++x); // SyntaxError: Invalid left-hand side expression in prefix operation
```

Examples
--------

### Postfix increment


```js
let x = 3;
const y = x++;
// x is 4; y is 3

let x2 = 3n;
const y2 = x2++;
// x2 is 4n; y2 is 3n
```

### Prefix increment


```js
let x = 3;
const y = ++x;
// x is 4; y is 4

let x2 = 3n;
const y2 = ++x2;
// x2 is 4n; y2 is 4n
```

Specifications
--------------

| Specification |
| --- |
| ECMAScript Language Specification # sec-postfix-increment-operator |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Addition (`+`)
* Subtraction (`-`)
* Division (`/`)
* Multiplication (`*`)
* Remainder (`%`)
* Exponentiation (`**`)
* Decrement (`--`)
* Unary negation (`-`)
* Unary plus (`+`)
Decrement (--)
==============

The **decrement (`--`)** operator decrements (subtracts one from) its operand and returns the value before or after the decrement, depending on where the operator is placed.

Try it
------

Syntax
------


```js
x--
--x
```

Description
-----------

The `--` operator is overloaded for two types of operands: number and BigInt. It first coerces the operand to a numeric value and tests the type of it. It performs BigInt decrement if the operand becomes a BigInt; otherwise, it performs number decrement.

If used postfix, with operator after operand (for example, `x--`), the decrement operator decrements and returns the value before decrementing.

If used prefix, with operator before operand (for example, `--x`), the decrement operator decrements and returns the value after decrementing.

The decrement operator can only be applied on operands that are references (variables and object properties; i.e. valid assignment targets). `--x` itself evaluates to a value, not a reference, so you cannot chain multiple decrement operators together.


```js
--(--x); // SyntaxError: Invalid left-hand side expression in prefix operation
```

Examples
--------

### Postfix decrement


```js
let x = 3;
const y = x--;
// x is 2; y is 3

let x2 = 3n;
const y2 = x2--;
// x2 is 2n; y2 is 3n
```

### Prefix decrement


```js
let x = 3;
const y = --x;
// x is 2; y = 2

let x2 = 3n;
const y2 = --x2;
// x2 is 2n; y2 is 2n
```

Specifications
--------------

| Specification |
| --- |
| ECMAScript Language Specification # sec-postfix-decrement-operator |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Addition (`+`)
* Subtraction (`-`)
* Division (`/`)
* Multiplication (`*`)
* Remainder (`%`)
* Exponentiation (`**`)
* Increment (`++`)
* Unary negation (`-`)
* Unary plus (`+`)