What's the point of JavaScript decorators?

Question

I googled about JavaScript decorators but I'm not sure what the difference between calling a function using a decorator and calling a function normally is.

function myFunction(text) {
  console.log(text)
}

myFunction() vs @myFunction vs @myFunction()

I have a feeling I'm more than wrong here. Can someone explain?

Answer 1

Decorators are there to enable separation of concerns. Consider the following function:

function add(a, b) {
  return a + b;
}

Which is all well and dandy. But let's say that you want to add logging:

function add(a, b) {
  const sum = a + b;
  console.log(a, b, sum);
}

Now the function is longer and more complicated and conflates two things (summing and logging) that really don't have any relation. A better way to do it would be this:

function logs(f) {
  return function(...args) {
    const result = f(...args);
    console.log(args, result);
    return result;
  };
};

const addAndLog = logs(add);

And that's what a decorator is. What you're talking about (i.e. the JavaScript decorator proposal) is just a syntactic shortcut for the pattern above. Here logs is a decorator that adds a capability to the passed in function, the ability to log without having to complicate the function with a lot of extraneous code. The proposal is at the moment restricted to classes and methods, but I find it conceptually easier to explain with normal functions.

Answer 2

Decorators are used to literally decorate a function.

Let's say you want to type your own decorator which can be used to see how much time a function needs to run. You could write a decorator @time() that does just that. When you are done, you can use this decorator before every function you want to track.

Decorators are used as high-order functions, mainly to have a functional composition of your code!

A nice example would be a @Component() decorator in Angular. Whilst using this decorator before your class, Angular knows it has to handle it as a component and does a couple of methods with it behind the scenes.