DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 5 ways to declare a function in JavaScript
ABOUMEROUANE Salma
ABOUMEROUANE Salma

Posted on

5 ways to declare a function in JavaScript

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:

Image description

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:

Image description

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.

Image description

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:

Image description

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:

Image description

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:

Image description

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:

Image description

d)- Arrow function
This method is a cleaner way of creating JavaScript functions.

So instead of declaring a function like this:

Image description

We can declare it like this:

Image description

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:

Image description

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:

Image description

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:

Image description

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:

Image description

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:

Image description

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)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-