What is this Javascript syntax

Question

Below is an react HOC but I don't understand why such a syntax could work - note that two fat arrows as in Component => props =>?

const withLogging = Component => props => {
  useEffect(() => {
    fetch(`/logger?location=${ window.location}`);
  }, []);
  return <Component {...props } />;
};

And when I tried to convert it to typescript, it gives me errors

const withLogging = (Component: React.Component) =>(props: any)  => {
  useEffect(() => {
    fetch(`/logger?location=${ window.location}`);
  }, []);
  return < Component {...props } />;
};

You have to add these error messages to your question or we are not able to understand the problem — tkausl
– tkausl, Commented Dec 25, 2022 at 15:37

tkausl · Accepted Answer · 2022-12-25 05:12:00Z

2

I don't understand why there are two fat arrows

This isn't some special syntax, that's just a arrow function returning another arrow function

// a function taking in a i returning that i
i => i

// a function taking in a i, returning another function which takes in a j and returns i + j
i => j => i + j

above is similar to

function(i) { return i; }

function(i) {
    return function(j) {
        return i + j;
    }
}

answered Dec 25, 2022 at 5:12

tkausl

14.4k3 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kakacii Over a year ago

Thanks for your answer. I've updated my question while I was trying to convert it to typescript to understand further

Collectives™ on Stack Overflow

What is this Javascript syntax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related