If you develop with JavaScript you likely use functions fairly often. And, because you're a developer, you've likely made some mistakes.

For me, it was last week. I called a function without parentheses and it didn't exactly do what I wanted. But why? Why was that a mistake? In React there are lots of times we use functions without parentheses and everything works just fine!

Today we're going to talk about why.

How do parantheses impact functions

Let's start with a typical function.

const someString = () => {
  return 'some string'
}

If we wanted to call this function, we'd do so like this.

const result = someString()
// result is now "some string"

But what happens if we do this?

const result = someString

result is now equal to [Function: someString]. It's a reference to the function rather than the result of evaluating the function.

Well that was a quick post. Always use parentheses, problem solved.

Not so fast!

React and functions

Sometimes in React we want to execute a function. But other times, we want to pass around a reference.

const ExampleComponent = () => {
  const clickHandler = () => {
    console.log('I was clicked')
  }

  return <button onClick={clickHandler}>Click me</button>
}

onClick is an event handler which takes a function as a callback. So it needs a reference to the function it's going to call.

What happens if we add parantheses? Will it still work?

const ExampleComponent = () => {
  const clickHandler = () => {
    console.log('I was clicked')
  }

  return <button onClick={clickHandler()}>Click me</button>
}

Nope! Nothing will get logged. The event handler was expecting a function that it can call. However, it got the return value of the function.

Any other syntax weirdness we should talk about? Sure, why not!

Parameters

By default, event is passed as an argument to the callback function. Something like this.

const ExampleComponent = () => {
  const clickHandler = event => {
    event.preventDefault()
    console.log('I was clicked')
  }

  return <button onClick={clickHandler}>Click me</button>
}

This actually introduces an interesting detail! The code above is equivalent to the code below, passing our function wrapped in an anonymous function that exposes event.

const ExampleComponent = () => {
  const clickHandler = event => {
    event.preventDefault()
    console.log('I was clicked')
  }

  return <button onClick={event => clickHandler(event)}>Click me</button>
}

Anonymous functions

As it turns out, we can define our function inline.

const ExampleComponent = () => (
  <button onClick={() => console.log('I was clicked')}>Click me</button>
)

This also gives us the opportunity to pass our own parameters.

const ExampleComponent = () => {
  const clickHandler = message => {
    console.log(message)
  }

  return <button onClick={() => clickHandler('I was clicked')}>Click me</button>
}

But what if we want the event object in addition to our other parameter(s)?

const ExampleComponent = () => {
  const clickHandler = message => event => {
    event.preventDefault()
    console.log(message)
  }

  return <button onClick={clickHandler('I was clicked')}>Click me</button>
}

This makes sense if we think about what we already know. That event is always passed, whether we reference it or not.

I'm a little confused

If that last example confused you, that's ok! It looks a lot like our earlier example where we passed the result of a function rather than a reference to it.

The trick is to look at the definition of clickHandler a little bit closer. We'll make it a bit more verbose to make that easier.

const clickHandler = message => {
  return event => {
    event.preventDefault()
    console.log(message)
  }
}

The "result" of clickHandler is a function! It returns a reference to a function. So we're all good.

Functions are fun

I know that was a lot of syntax, but I hope you feel a bit more confident. Knowing what is happening under the hood can turn guess and check errors into intentional fixes. You'll still make mistakes, we all do, but maybe you'll catch them faster.