653

August 14th, 2023 × #javascript#webdev#decorators

JS Fundamentals - Decorators

Scott and Wes discuss JavaScript decorators - what they are, how to use them, their current status, and potential future use cases.

or

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is.

Show Notes

on classes

@loggged
class C {}

on fields

class C {
@logged x = 1;
}

Auto Accessor

class C {
  accessor x = 1;
}

sugar for below

class C {
  #x = 1; // # means private

  get x() {
    return this.#x;
  }

  set x(val) {
    this.#x = val;
  }
}

Can be decorated and decorator can return new get and set and init functions

function logged(value, { kind, name }) {
  if (kind === "accessor") {
    let { get, set } = value;

    return {
      get() {
        console.log(`getting ${name}`);

        return get.call(this);
      },

      set(val) {
        console.log(`setting ${name} to ${val}`);

        return set.call(this, val);
      },

      init(initialValue) {
        console.log(`initializing ${name} with value ${initialValue}`);
        return initialValue;
      }
    };
  }

  // ...
}

Tweet us your tasty treats

Share