JavaScript

Different Ways of Writing Functions in JavaScript

In JavaScript, it is crucial to learn about functions, and the most important reason is that functions provide the users with the capability to implement modularity. Modularity is the ability to divide a big problem or hurdle into smaller, manageable chunks. Functions generally consist of two parts, one is where a function is written or created, and the other is one is the “function call” to perform the task written inside it. In JavaScript, a user can create a function in three different ways, which are:

Method 1: Functions Declarations

Function Declarations are the most standard and widely used way of creating functions. A function declaration contains four different parts in this sequence:

  • The keyword function
  • The identifier or the function’s name
  • The functions’ parameters enclosed in parenthesis
  • The function’s body is enclosed with curly brackets.

To create a function for adding two different values and returning the sum of the two values, take the following lines:

function getSum(num1, num2) {

return num1 + num2;

}

As you can see, the function declaration started with the keyword function followed up by the name of the function “getSum”. After the name, parameters are declared, and then the function’s body. The user can call this function with:

console.log(getSum(5, 10));

This will produce the following output on the terminal:

The result of 5 + 10 was printed on the terminal as 15.

Method 2: Function Expressions

Function expressions are quite like function declarations, but the major difference comes in the sequence of its parts. The sequence of the parts of a function expression is as follows:

  • Function identifier or name
  • Assignment operator “=”
  • They keyword function
  • Parameters (inside parenthesis)
  • Body of the function {inside curly brackets}

Unlike the function declaration, function expressions start with the identifier of the function which is then set equal to (using the assignment operator) the keyword function and so on. To create the same getSum function (as in method 1), use the following lines of code:

getSum = function (num1, num2) {

return num1 + num2;

};

Call a function created through a function expression is the same as a function created with function declaration:

console.log(getSum(30, 5));

This will produce the following result on the terminal:

The result, 35 was printed on the terminal

Method 3: Arrow Functions / Fat Arrow Function

Arrow functions are the newest way of creating a function as released in the ECMAv6 version of JavaScript. Arrow functions use a special keyword (more like a key symbol) that is created by two special characters, “=>”, which looks like an arrow, hence the name arrow function. But since it uses a “=” character instead of “-” to create an arrow-like shape, it got popular with the name Fat Arrow function. The way of creating a function includes the following sequence of parts:

  • The Identifier of the function
  • The assignment operator “=”
  • Parameters (in parenthesis)
  • Fat arrow “=>”
  • Body of the function {in curly brackets}

To create the function getSum(just like in the previous methods) use the following lines of code:

getSum = (num1, num2) => {

return num1 + num2;

};

Calling the function created with a fat arrow is exactly the same as functions created with other methods:

console.log(getSum(150, 270));

This will give the following result on the terminal:

The value of 150 + 270 was printed on the terminal as “420”

Wrap up

In the ES6 version of JavaScript, the user can create a function three different ways. These creation methods are function declarations, function expressions, and fat arrow functions. The function declarations and function expressions can also work in other versions of JavaScript. However, the Fat arrow functions or Arrow functions are specific to ES6 versions of JavaScript. This article has displayed all three of these methods with examples.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.