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
andparam2
are the first and second parameters respectively, while/*...,*/
indicates more parameters the developer wishes to add, andparamN
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, 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
orsuper
, and should therefore not be used as amethod
. - 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
, andbind
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
Top comments (0)