> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Accessor Decorator
An accessor decorator is a function that intercepts and modifies the definition of class getters and setters during the class evaluation phase. Under the ECMAScript Stage 3 Decorators specification, it allows developers to replace the original accessor function, observe its metadata, or inject initialization logic before the class is fully constructed.
## Decorator Signature
When applied to a standard `get` or `set` method, the decorator function receives two arguments: the original accessor function and a context object.
```javascript theme={"dark"}
function accessorDecorator(value, context) {
// Evaluation logic here
}
```
### 1. The `value` Parameter
For standard accessors, `value` is the original getter or setter function defined in the class.
### 2. The `context` Parameter
The `context` object provides metadata about the accessor being decorated and utility functions for the class lifecycle:
* **`kind`**: A string literal, either `"getter"` or `"setter"`.
* **`name`**: A string or symbol representing the identifier of the accessor.
* **`static`**: A boolean indicating if the accessor is static.
* **`private`**: A boolean indicating if the accessor is a private class member.
* **`access`**: An object containing a `get` method (for getters) or a `set` method (for setters) that allows bypassing private boundaries to access the value on an instance.
* **`addInitializer(fn)`**: A method that registers a callback function to run during object instantiation (for instance accessors) or class initialization (for static accessors).
## Return Value Mechanics
An accessor decorator can return:
* **A new function**: This completely replaces the original getter or setter on the class prototype (or the class itself, if static). The new function is invoked with the `this` binding of the current instance.
* **`undefined` (or no return)**: The original accessor remains unmodified.
```javascript theme={"dark"}
function modifyGetter(originalGetter, context) {
if (context.kind === 'getter') {
// Return a replacement getter function
return function() {
const originalValue = originalGetter.call(this);
return typeof originalValue === 'string'
? originalValue.toUpperCase()
: originalValue;
};
}
}
class User {
#name = "alice";
@modifyGetter
get name() {
return this.#name;
}
}
```
## Auto-Accessors
The ECMAScript specification introduces the `accessor` keyword, which automatically generates a backing private field alongside a getter and setter. Decorating an auto-accessor alters the decorator signature and expected return type.
```javascript theme={"dark"}
class Data {
@autoAccessorDecorator
accessor count = 0;
}
```
When decorating an auto-accessor:
* **`value`**: Instead of a single function, `value` is an object containing both `{ get, set }` functions that interact with the hidden backing field.
* **`context.kind`**: The kind is strictly `"accessor"`.
* **Return Value**: The decorator can return an object containing `{ get, set, init }`.
* `get` replaces the generated getter.
* `set` replaces the generated setter.
* `init` is a function that receives the initial field value (e.g., `0` in the example above) and returns a new value to initialize the backing field.
```javascript theme={"dark"}
function autoAccessorDecorator(value, context) {
if (context.kind === 'accessor') {
return {
get() {
return value.get.call(this);
},
set(newValue) {
value.set.call(this, newValue);
},
init(initialValue) {
// Modifies the initial assignment of the backing field
return initialValue;
}
};
}
}
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
