Review: JS Functions & Function Callbacks

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

Table of Contents

• Example 1: JS Event Listener
• Functions: Declaration, Expression, Anonymous
• Arrow Functions
• Many Examples
• Conclusion

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:

 // Let's make a button called myBtn 
 const myBtn = document.createElement('button')

Take a look at the following options:

Option 1:

 // Option 1 
 myBtn.addEventListener('click', myFunc)

Option 2:

 // Option 2 
 myBtn.addEventListener('click', myFunc())

Option 3:

 // Option 3
 myBtn.addEventListener('click', () => myFunc())

Option 4:

 // Option 4
 myBtn.addEventListener('click', () => {
     myFunc()
 })

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

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:

// 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:

 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

 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.

Arrow Functions

ES6 introduced arrow functions in Javascript, which don't need the function keyword.

Function expression:

 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:

 (params) => {
  // run your code here 
 }

By the way, if you have one parameter, you can omit the parentheses:

 param => {
  // run your code here 
 }

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() {   // code here }	const myFunc = () => {   // code here }
Anonymous	function() {   // code here }	() => {   // code here }

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:

 // add event listener to myBtn 

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

Similarly, let's look at a React onClick event listener:

 <button onClick={/* WHAT GOES HERE??? */} > Press this button </button> 

What we can insert:

What	How
Run Named Function in Event Listener	myFunc
Run Anonymous Function in Event Listener	function() {   // code here }
Arrow Version	() => {   // code here }
Run Named Function inside Anonymous Function in Event Listener	function() {   myFunc() }
Arrow Version	() => {   myFunc() }
Short Arrow Version	() => myFunc()
Run Named Function with Event Argument	function(e) {   myFunc(e) })
Arrow Version	(e) => {   myFunc(e) })
Arrow Version   One Line	(e) => myFunc(e))
Arrow Version   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)

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.