JS Fundamentals - Decorators

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

• 00:25 Welcome
• 01:00 Are decorators finally here?
• TC39 proposal
• How this compares to other versions of decorators
• 06:47 What are use cases for decorators?
• 10:55 How do you define a decorator?
• 14:20 Auto Accessor

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

• Scott's Instagram
• LevelUpTutorials Instagram
• Wes' Instagram
• Wes' Twitter
• Wes' Facebook
• Scott's Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky