JavaScript Function Definition Methods
Tags: javascript, es6, webdev
Published: 2022-09-03 22:37:15

## 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.
```javascript
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** operator

### 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](https://developer.mozilla.org/en-US/docs/Glossary/IIFE), a function that runs as soon as it is defined.
```javascript
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.
```javascript
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.
```javascript 
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.
```javascript
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 `{}`.
```javascript
const arrFuncGreet = () => "Hello"
```
It can be defined with parameters like others, but with or without the `return` keyword and braces `{}`
```javascript
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. 
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) documentation on JavaScript Function definitions.

Connect with me on Twitter [@Tech Evangelist](https://twitter.com/theDocWhoCodes) 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**