JavaScript functions are used to perform actions when certain events occur. They are also called methods.
A JavaScript function is usually a block of code that contains a group of instructions to execute.
There are many ways to declare a simple function in JavaScript. In this tutorial, we will explore them with some examples.
1)- Ways to declare functions
a)- Function declaration
Also called a function statement or a function definition, is the most common way of declaring a function in JavaScript.
The function declaration method simply means that we will declare the function using the keyword function followed by the name of the function itself like below:
So here “function” is the keyword, and “course” is the name of the function.
If we want to call the function all we have to do is write its name followed by the parenthesis like below:
A function can take arguments. If we have dynamic data, we can pass the function as many parameters as we want.
Let’s say that for function course() whenever we call it we want it to display “Welcome to this tutorial” plus the name of the student.
The name of the student can change, as we can have 10 or 20 or 30 students….
So to do that we will pass a parameter called “studentName” to the function.
So now for the function to display what we want, at the moment when we will call it we should pass it the name of the student.
Let’s say that the student’s name is Thomas.
So the code will be:
b)- Anonymous function
When a function is declared anonymously, it means that the function does not have any name.
Unlike in the general declaration function where a name is given to a function, in the anonymous function there is no name.
An anonymous function is declared using the function keyword only, like below:
As you can see, the function does not have any name. That’s why it is called anonymous.
However, as an anonymous function is not accessible after its initial creation, and as it can only be accessed via a variable, we will store it in a variable that we’ll call course, and this is what we’ll see in the next paragraph.
c)- Function expression
The function expression method allows us to create an anonymous function that doesn’t have any function name.
Below is an example of an anonymous function expression. let’s see the code:
Here the variable course stores an anonymous function.
So the anonymous function is invoked by calling out the variable with trailing parenthesis and semicolons.
The code below will call the function:
d)- Arrow function
This method is a cleaner way of creating JavaScript functions.
So instead of declaring a function like this:
We can declare it like this:
However, as the arrow function does not have a name, it should be stored in a variable if we want to invoke it later, just like the function expression.
So the code will be:
Arrow functions provide a concise syntax for defining anonymous functions. An arrow function expression has a shorter syntax compared to other ways of declaring functions.
An Arrow function can also have arguments like this:
When creating an arrow function, the parenthesis pairs and curly braces are optional for a single function parameter and a single statement.
If there are many instructions that the function should execute, then these instructions should be wrapped inside curly braces:
e)- Constructor function
Another way to declare a function is by using the Function constructor with the new keyword.
Let’s have a look at the syntax first:
JavaScript has a built-in constructor Object called Function that can be used to declare and create functions.
This constructor can take any number of arguments. For this example we passed it 2 arguments which are “a” and “b“.
The last parameter is where the instructions that the function is supposed to execute should be added. It is there where goes the function body.
The general syntax is:
So in this example we created a function using the Function object, its name is sum().
2)- Which way is better?
There is no answer to this question because all depends on the situation and the function code.
You can use any method or function type you want and all of them will give you the same results.
so if you’re comfortable with either approach, feel free to pick whichever you prefer. However, I’d recommend sticking with the arrow function type whenever possible, as it offers better performance and readability.
Read More
Object constructor functions: How does the Javascript constructor work?
Send form data received in the backend to the database (MongoDB)
Send form data to the back-end (Node JS)
Get the data back from the database (MongoDB) and display it on the front-end
How to send data from back-end(Node JS) to MongoDB database?
Top comments (0)