IconVault logoIconVault
Sign in

JS Decorators - Interactive Lab | IconVault

Learn JavaScript decorators with runnable patterns: log, memoize, debounce, validate, deprecated and class decorators. Free, runs in your browser.

All tools

JS Decorators

Runnable decorator patterns: log, memoize, debounce and more

5 of 5 free uses left

Patterns

Demos apply decorators by hand (the same functions the @syntax calls), so they run here with zero build config. In TypeScript, enable experimentalDecorators to use the @ form directly.

@log calls

Wrap any method to record its arguments and return value.

pattern.js
function log(target, key, descriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args) {
    console.log("call", key, "with", args);
    const result = original.apply(this, args);
    console.log(key, "returned", result);
    return result;
  };
}

class Cart {
  @log
  add(item, qty) {
    return qty + "x " + item;
  }
}
new Cart().add("book", 2);

Live output

// press "Run demo" to execute this pattern in your browser

5 of 5 free demo runs left.

About this tool

IconVault's JS Decorators lab teaches the decorator pattern with real, runnable code. Each pattern, from @log and @measure to @memoize, @debounce, @validate, @deprecated and class-level @register, comes with copyable source and a Run button that executes it live and prints the output to an on-page console. It is free and runs fully in your browser.

Decorators are functions that wrap classes, methods or fields to add behavior without changing their bodies, which makes them perfect for cross-cutting concerns like logging, caching, timing and validation. The demos apply decorators by hand (the exact functions the @ syntax calls), so everything runs with zero build config; in TypeScript you only need experimentalDecorators to use the @ form directly.

Frequently asked questions

Popular searches

javascript decoratorsjs decoratorstypescript decoratorsdecorator pattern javascriptwhat are decorators in jsjs decorator tutorialtypescript decorator examplemethod decorator javascriptclass decorator javascriptexperimentaldecoratorsenable decorators typescripttsconfig experimentaldecoratorsdecorator factory typescriptparameterized decorator js@log decoratormethod logging decorator@memoize decoratormemoize decorator javascript@debounce decoratordebounce decorator js@validate decoratorvalidation decorator typescript@deprecated decoratordeprecated decorator jsmeasure performance decoratortiming decorator javascriptpropertydescriptor decoratorhow decorators work javascriptare decorators functionsapply decorator manually jsdecorator without typescriptbabel decoratorslegacy decorators vs standard decoratorstc39 decorators proposalangular decorators explainednestjs decoratorsmobx decoratortypeorm decoratorsdecorator metadatareflect metadata decoratordecorator compositionmultiple decorators orderdecorator evaluation ordermethod decorator descriptor.valuewrap method with decoratordecorator design patterndecorator pattern exampledecorators vs higher order functionsdecorators vs middlewarecross cutting concerns javascriptaop javascript decoratorsjavascript decorator playgroundinteractive decorators lablearn js decoratorsdecorator patterns cheat sheettypescript decorator patternscustom decorator typescript example

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →