A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 653: JS Fundamentals - Decorators

0:00

LOUDNESS

Aug 14th, 2023

JS Fundamentals - Decorators

👇 Download Show✏️ Edit Show Notes

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