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