Function Definitions and When to Use Then

As a beginning developer, you might struggle with when to use a function declaration versus an anonymous function versus an arrow function versus a function expression. They all seem to do the same thing right? Being a beginner developer myself, this is a concept I’ve been struggling to grasp. In this blog, we will explore the similarities and differences between these types of functions and see if there really is a better time to use one over the other.

What is a Function?

Let’s start with a simple question, what is a function? According to MDN [1]:

“Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure — a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.”

The technical definition can be a little intimidating, so I like to think of a function as a reusable block of code. This block of code is saved and can be “called” or “invoked” at a later point in time (sometimes….).

The Different Ways to Define a Function

Okay let’s talk about these different types of functions:

Function declaration:

A function declaration requires the use of the function keyword. Afterwards, you write the name of the function, followed by a parenthesis () where you can include parameters if needed, and lastly, the curly braces {} where you put the code you want to execute when the function is called.

Figure 1: Function Declaration Breakdown [2]

function sayHi(name) {
  console.log("Hi " + name);
}
sayHi("Kim");
 
LOG: "Hi Kim"

Anonymous function:

Anonymous functions are very similar to function declarations expect they do not have a name, hence anonymous. However, without a name, you cannot invoke an anonymous function.

function () {
 console.log("Hi world!");
}

Function Expression:

A function expression is an anonymous function that is assigned to a variable name. Creating a function expression is one method that allows us to have access to and invoke an anonymous function.

const sum = function(a, b) {return a + b}
sum(2,4); => 6

Arrow Function:

Arrow functions allow for a kind of shorthand to create functions involving, you guessed it, an arrow =>.

const difference = (a, b) => a - b;
difference(7, 3); => 4
 
const squared = a => a**2;
squared(4); => 16

Let’s Compare

Alright now let’s compare these definitions! There’s one very big advantage to using function declarations as compared to the others and that is that function declarations are hoisted, while the others are not. This means that you can invoke a function that has been defined using function declaration earlier in your code before the function is actually defined.

helloWorld();

// Random lines of code
// Random lines of code

function helloWorld() {
  console.log("Hello World!");
}
 
 LOG: "Hello World!"

You can see in the sample of code above that helloWorld() will still console log out, even though it is in front of the actual function definition in the code.

Get Kimberly Love’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now, function declarations seem to have the upper hand right now with hoisting, so when might we use the others? Especially anonymous functions since they must be assigned to a variable to use them. Well, actually that’s not the only way they can be invoked, you may see an anonymous function used as a callback function. Anonymous functions are useful when you don’t want to crowd the global scope and only want to invoke a function once for a certain task.

Note: If you don’t assign an arrow function to a variable, it is also technically an anonymous function because it has no name. Anonymous arrow functions are often passed as callbacks in other functions as well.

Let’s compare function declarations and arrow functions. Arrow functions create a shorthand and eliminate the function keyword all together. You also do not need to include parenthesis around the parameter if there is only one parameter. Lastly, arrow functions allow you to do both implicit and explicit returns.

Created By: Kim Love

Conclusion

After all this, which function is the best one to use? What we have learned is that there are several ways to declare functions and pros and cons to each way. So, there is no one best function definition to use, it depends on the situation and how you want that function to be used. If you need to reuse a block of code quite a bit throughout your program, and want to take advantage of hoisting, using a function declaration in the global scope might be best. If you want to write a shorthand function and use implicit return, then an arrow function would work great. Or if you only want to call a function one time throughout your program, using an anonymous function (or anonymous arrow function) would get the job done and not pollute the global scope.

In the end just think about how you want your function to be used throughout your program and that’ll help you decide which function definition to use!

Reference List

[1] MDN Contributors, “Functions — javascript: MDN,” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions (accessed Aug. 10, 2023).

[2] Functions, https://fireship.io/courses/javascript/beginner-js-functions/ (accessed Aug. 10, 2023).