Review: JS Functions & Function Callbacks
Tags: callback, functions, javascript
Published: 2020-04-24 17:35:24

# Quick Review of Function Callbacks

I just wanted to write this post to review frequently seen forms of functions, including function callbacks, in both vanilla Javascript and React. I've noticed some people confusing the syntax when seeing functions used with event listeners. This is aimed at Javascript beginners but I welcome any feedback from experienced programmers.

 * [If you want a quick reference, skip to the bottom](#ch4)

## Table of Contents 
 * [Example 1: JS Event Listener] (#ch1)
 * [Functions: Declaration, Expression, Anonymous] (#ch2) 
 * [Arrow Functions] (#ch3)
 * [Many Examples] (#ch4)
 * [Conclusion] (#ch5) 

<a name="ch1" />
## Example 1: Vanilla JS and DOM Event Listener 

Let's use a vanilla Javascript example. I will first create a button element in my DOM:

```js
 // Let's make a button called myBtn 
 const myBtn = document.createElement('button')
```
Take a look at the following options:

Option 1:
```js
 // Option 1 
 myBtn.addEventListener('click', myFunc)
```
Option 2:
```js
 // Option 2 
 myBtn.addEventListener('click', myFunc())
```
Option 3:
```js
 // Option 3
 myBtn.addEventListener('click', () => myFunc())
```
Option 4:
```js
 // Option 4
 myBtn.addEventListener('click', () => {
     myFunc()
 })
```

One of these doesn't work. Can you pick it out?

<a name="ch2" />
## Functions: Declaration, Expression and Anonymous  


This post is not meant to be exhaustive, but recall that Javascript has function declarations and function expressions. 

#### Function Declaration
Simply put, you tell Javascript that it's a function, the name of the function and the parameters. 

Example:
```js
// function name is 'myFunc' 
// parameters are 'params'

 function myFunc(params) {
   // run your code inside the function here 
 }
```

#### Function Expression 
Define a function by writing a Javascript expression. This usually is in the form of assigning an anonymous function to a variable.

Example:
```js
 const myFunc = function(params) {
  // run your code inside the function here
 }
```

Also recall that if you don't need to pass any parameters, the parentheses () can be empty.

#### Anonymous Functions 
```js
 function(params) { 
  // run your code here 
 }
```
As shown in the example above, a function can be defined with no name (if you look at the right side of the equals sign). They are frequently used when a function is an argument to a function but you don't need to call it elsewhere in the code. 

To tie it back to the topic of our post, these anonymous functions are similar to function callbacks because they don't run where they are declared, but are run when called.

<a name="ch3" />
## Arrow Functions 
ES6 introduced arrow functions in Javascript, which don't need the __function__ keyword. 

Function expression: 
```js
 const myFunc = (params) => {
  // run your code here 
 } 
```

If you look at the right side of the equals (=) sign, the anonymous function form of the arrow function is:
```js
 (params) => {
  // run your code here 
 }
```

By the way, if you have one parameter, you can omit the parentheses:
```js
 param => {
  // run your code here 
 }
```

<a name="ch4">
## Many Examples: JS and React Event Listeners 
For simplicity, examples will omit parameters and code inside the object unless otherwise noted.

#### Javascript Functions 
|   | Function keyword  | Arrow function |
|---|---|---|
| Declaration | function myFunc() {} | N/A |
| Expression | const myFunc = function() { <br> &nbsp; // code here <br> } | const myFunc = () => { <br> &nbsp; // code here <br> } | 
| Anonymous | function() { <br> &nbsp; // code here <br>  } | () => { <br> &nbsp; // code here <br> } |

#### Event Listener Examples

What can be used as arguments into another function such as event listener?

Let's look at our Javascript __click__ event listener:
```js
 // add event listener to myBtn 

 myBtn.addEventListener('click', /* WHAT GOES HERE??? */ )
```

Similarly, let's look at a React __onClick__ event listener:
```js
 <button onClick={/* WHAT GOES HERE??? */} > Press this button </button> 
```

What we can insert: 

|  __What__   | __How__ | 
| --- | --- | 
| __Run Named Function <br> in Event Listener__ | myFunc |  
| __Run Anonymous <br> Function in Event Listener__ | function() { <br> &nbsp; // code here <br> } | 
| &nbsp; Arrow Version | () => { <br> &nbsp; // code here <br> } |
| __Run Named Function <br> inside Anonymous Function <br> in Event Listener__ | function() { <br> &nbsp; myFunc() <br> } |
| &nbsp; Arrow Version | () => { <br> &nbsp; myFunc() <br> } |
| &nbsp; Short Arrow Version | () => myFunc() |
| __Run Named Function <br> with Event Argument__ |  function(e) { <br> &nbsp; myFunc(e) <br> }) |
| &nbsp; Arrow Version |  (e) => { <br> &nbsp; myFunc(e) <br> }) |
| &nbsp; Arrow Version <br> &nbsp; One Line |  (e) => myFunc(e)) |
| &nbsp; Arrow Version <br> &nbsp; No Parentheses | e => myFunc(e) |

##### Notes for React Event Listener Examples 
 * __myFunc()__ would run on page load instead of waiting for the event listener to trigger. However, __myFunc__ is a function callback, and __() => myFunc()__ has an anonymous function wrapping the function call __myFunc()__ so it also waits for the event to trigger.
 * If your functions need to take other parameters, besides the __e__ or event from the event listener, you need to pass them. This would result in __(e) => myFunc(e, args)__

<a name="ch5" /> 
## Conclusion 

Thanks for reading my first blog post. Even though it is oriented towards beginners, I hope it helps disambiguate some syntax so that people can properly write and call their functions. This is especially important when learning Javascript frameworks such as React.