A starter guide to Functions in Javascript
Functions are the heart of Javascript. They are known as first class objects. Coming from a background where I wrote C++ during my initial days of learning how to code, it blew my mind when I came to know that in JS we can even pass functions as parameters to another functions. Also, there are atleast 4 ways in which we can write a function in Javascript. But before learning more about them, we first have to know the difference between Function Expression and Function Declaration.
Function Declaration vs. Function Expression
A Function Declaration begins with the keyword function, followed by the name of the function, then a set of parenthesis inside which we write its parameters. The operations that are needed to be performed in the functions are written inside curly braces.
function nameOfFunction(parameters){
// define function here
}
A Function Expression is the same as function declaration. Here, the function is created and assigned to a variable. The important thing to keep to keep in mind is that Function Declaration is hoisted whereas Function Expression is not.
var multiply = function (a, b){
return a * b
}
//calling a function
multiply(3,5) //output : 15
Functions in Javascript can have optional return statements. When we do not use a return keyword inside a function definition, undefined is returned from the function. With the difference cleared, we can now move on to the various ways in which we can write functions in Javascript. They are :
- Function Declaration
Anonymous Function Expression
Named Function Expression
Arrow Function
The following code snippets shows the different ways we write these functions
function functionDeclaration(){
// function definition
}
var anonymousFunctionExpression = function() {
// function definition
};
var namedFunctionExpression = function functionName (){
// function definition
};
var arrowFunctionExpression() => {
// function definition
};
The difference between Anonymous Function Expression and Named Function Expression is that in case of Anonymous Function Expression, the function actually has no name. It is assigned to a variable which has a name and not the function.
IIFE - Immediately Invoked Function Expression
IIFEs are functions that are immediately executed as soon as its declared. The syntax of IIFE is different from other Javascript function expressions. We write a function declaration inside parenthesis , follwed by () to execute the function.The variables declared inside IIFEs are not accessible from outside.
The syntax of IIFE is as follows
(function (){
// function definition
})();
Conclusion
Functions are one of the building blocks of any language. Understanding the different types of functions in Javascript will make our journey into JS much easier. This seems to be like a good place to stop. I hope it helped :)
I write blogs documenting the things I learn and the insights I get from them.