Functions, fat arrows and parentheses
Tags: javascript, react, webdev, beginners
Published: 2021-09-07 15:25:03

---
title: Functions, fat arrows and parentheses
published: true
description: Sometimes syntax doesn't make a lot of sense and feels arbitrary. But often there is a reason under the hood.
tags: javascript, react, webdev, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayc5nx8p3dv4gaonhbaz.png
canonical_url: https://laurieontech.com/posts/function-fun/
---


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.

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

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

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

But what happens if we do this?

```javascript
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.

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

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

`onClick` is an [event handler](https://laurieontech.com/posts/event-listeners/#what-about-react) 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?

```jsx
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.

```jsx
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`.

```jsx
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.

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

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

```jsx
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)?

```jsx
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.

```javascript
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.