Functions in JavaScript are like oxygen for humans.
It is a procedure where the set of statements performs a specific task or calculates a value. Most functions take in some inputs, process them, and then return an output where there is some obvious relationship between the input (s) and the output. Like the x and the y in linear functions in math.
What are the different types of functions? There are a variety of functions, but covered in this blog are:
- Function Declaration
- Function Expression
- Arrow Functions
Function Declaration:
What is the function declaration? A function Declaration is a short way to put together a function. It is defined using a function keyword, and it is defined as a function with the specified parameters.
What is the parameter? A parameter is a variable created inside the function to hold the argument. Arguments are the data you pass into a function call (invocation). That data could be anything such as numbers, strings, boolean, arrays, or objects.
Syntax:
Above is the syntax of the function. But how do you invoke it? In other words, how do you tell a function to execute the code block inside the function? You use a function invocation. A function invocation is done by using the nameOfTheFunction followed by parentheses which contain the arguments for the parameters to take it inside the code block evaluate it and return the output.
How to Invoke functions: nameOfTheFunction(argument);
In the example above using the function keyword, the function name is declared followed by two parameters inside parentheses separated by a comma between them. Next, on line 2, there is a new variable total created by using the let keyword. Which adds the parameters. Then on line 3 using the keyword return, it returns the total of the two numbers. Then, finally, outside of the function, the function is invoked using the function name followed by the arguments which are numbers in this case.
Function expression:
A function expression uses the keyword function to define the function inside the expression.
Syntax:
This is the syntax used for the function expression with the function invocation which is invoked outside of the function block. As you can see the function invocation is the same for every function.
The code example above shows the use of the function expression where we declare the function using the const keyword followed by the function name which is subtracted for this function. Then, it is assigned a function object which has a parameter of num. Then, the function body, which is defined by the curly braces, returns num minus 5. Then outside of the function, we are invoking the function using the function name and passing the argument of 8. So when the function is invoked it will take the argument of 8 store it inside the parameter num, and perform the subtraction 8 minus 5, which will return 3.
Arrow Function:
You might have guessed by the name that this third function uses the arrow ( => ) instead of a function keyword. Arrow functions are very similar in terms of their syntax to function expression. In the arrow function, the arrow is made up of an equal sign and a greater than character. It makes our code more appealing and easy to read.
Syntax:
Above is the syntax of the arrow function. Since function invocation is the same for every function, Arrow Functions are invoked the same as the above function. You reference the name of the function followed by parentheses containing arguments for the function to evaluate.
Above is an example of an arrow function that uses the const keyword to declare the function name. Then the variable is assigned a function object, beginning with the parameters in parenthesis, then the arrow =>, followed by the code block inside the curly brackets. In the curly brackets, it returns the multiplication of the two numbers. Then on the outside, we invoke the function by calling the function name and by passing the arguments in the parathesis of the function call.
However, this is not the only way to write the arrow function there is a much shorter way to write it, where you have everything in one line.
Here is how it looks:
By removing the curly brackets and the return keyword we can have the function pointing to the return statement which will return the same value as it would with the code block syntax.
Also, if you have only one parameter in the arrow function, then you do not need the parentheses around it.
Here is an example:
This will work perfectly fine. Without any errors. However, if you have more than one parameter you will need parentheses for it.
Conclusion:
There are different syntaxes to write functions. They all have their uniqueness where some are easy to read, some are hoisted and some are not hoisted. On the other side, some functions are written as a one-liner, and some take more lines of code. However, all of these functions are useful in JavaScript. You can use the one that you like or the one that suits best depending on the code that you are writing. Overall, knowing different types of functions are useful.
Thank You for your time.