JavaScript Function Definition Methods

Introduction

Like every other programming language, JavaScript has functions as one of its building blocks. But unlike most languages, it has several ways of defining a function.

This article explains three popular function definition methods, outlines the differences between them, and gives examples of their use cases.

Function Declaration

Function declaration defines a function starting with the function keyword with specified parameters.

function funcDeclareName(param1, param2, /*...,*/ paramN) {
    return param1, param2, paramN
}

• funcDeclareName is the name of the function
• param1 and param2 are the first and second parameters respectively, while /*...,*/ indicates more parameters the developer wishes to add, and paramN is the last parameter.

Note: The ... in /*...,*/ does not insinuate the spread parameter

Function Expression

Function expression, unlike Function declaration, is defined and bound to a variable name. Also, it can be used as an Immediately Invoked Function Expression, a function that runs as soon as it is defined.

const funcExpress = function(param1, param2, /*...,*/ paramN) {
    return param1, param2, paramN
}

It may be an anonymous function expression as in the above code block or a named function expression as in the code block below.

const funcExpress = function Name(param1, param2, /*...,*/ paramN) {
    return param1, param2, paramN
}

For the anonymous function expression, the variable name is used when calling the function.

console.log(funcExpress(a, b, /*...,*/ N))

And the named function expression is used when the current function is referred to inside a function body. The name is then local to the function scope.

const objSample = {
  factorialMath: function factorial(n) {
    let current = n
  if(current <= 1) {
    return 1;
  } 
   return current * factorial(current - 1);
  }
}

console.log(objSample.factorialMath(10))

In the objSample object;

• factorialMath is the function expression binding. In this case, it serves as a method because it is defined inside an object.
• factorial is the function expression name, and it is called inside its function body recursively.

Arrow Function

The arrow function is a simpler alternative to JavaScript's traditional functions. It can be defined without a parameter like any other JavaScript function, but on a single line without the return keyword and braces {}.

const arrFuncGreet = () => "Hello"

It can be defined with parameters like others, but with or without the return keyword and braces {}

const arrFuncGreet = (user) => `Hello ${user}`

console.log(arrFuncGreet("John Doe"))

or

const friendNames = (user, friend1, friend2, friend3, friend4) => {
    return `Hello! I'm ${user} and my friends are ${friend1}, 
      ${friend2}, ${friend3}, and ${friend4}`
}

console.log(friendNames("Ghost", "Tommy", "Tasha", "Kanan", "Angie"))

Result:

> Hello John Doe

or

> Hello! I'm Gabriel and my friends are Ghost, Tasha, Tommy, and Angie

It can take arrays or objects as parameters as well. However, when compared to traditional functions, its simple nature has some limitations.

• It does not have binding to this, arguments or super, and should therefore not be used as a method.
• It is unsuitable for use as a constructor
• It does not have access to the new.target keyword
• It does not work with call, apply, and bind methods, which generally rely on scopes.

Nevertheless, It adopts a straightforward structure, making it the best function for callbacks, most especially in array methods.

const friendArr = ['Ghost', 'Tommy', 'Tasha', 'Proctor', 'Angela']

friendArr.forEach(friend => console.log(`My friend's name is ${friend}`))

Result:

> My friend's name is Ghost
> My friend's name is Tommy
> My friend's name is Tasha
> My friend's name is Proctor
> My friend's name is Angela

The callback for the forEach array method is the unnamed arrow function within the forEach parenthesis.

While the array function is denied some functionalities, it is more efficient when it comes to certain programs.

Conclusion

There is bigger flexibility on the part of a developer with a good knowledge of different JavaScript function definition methods and their respective applications.

This article has extensively elucidated JavaScript function declaration, function expression, and arrow functions, the three popular function definition methods, and their best use cases.

After a thorough perusal of this article, you should be able to know when to use the arrow function, as well as other function definition methods, and when to stay away from it, and in all, be a better JavaScript developer.

For more context, visit MDN documentation on JavaScript Function definitions.

Connect with me on Twitter @Tech Evangelist and tell me how helpful the article is to you, and what I need to improve on. Don't forget to share it with your friends and any JavaScript community you belong to.

Gracias, Bye, 👋.

Cover Image by Jorge Moller