What are different ways of defining functions in JavaScript?

In this tutorial, we will learn the different ways of defining functions in JavaScript.

In programming, writing the same code again and again is not a great idea. It will increase the length and decrease the readability with more effort required for the program. The functions are there in the programming languages to make it easier for programmers.

The function is like a container containing certain lines of programs inside. The function does not execute by only defining it. We have to call it somewhere in the program by which it can run the code it consists of. We can call the function numerous times in the program to execute the same code multiple times. Here, let's learn to define a function in JavaScript.

So, let us look at different ways of defining functions in JavaScript.

Following are the ways of defining functions in JavaScript

  • Function Declaration

  • Function Expression

  • Arrow Function

Using Function Declaration to define a function

The function declaration is the most common way of defining functions in JavaScript. To declare a function, we have to use the function keyword followed by a function name with opening and closing parentheses. After that, we have to use opening and closing curly brackets between which we can add the function's code.

We have to use the function name and parenthesis to run the function. It will execute the code inside the function.

Users can follow the below syntax to define a function using function declaration.

Syntax

//function declaration
function function_name(){
   
   //Code inside function
}

//Calling a function
function_name();

Follow the above syntax to declare and call the function in JavaScript.

Example

In the example below, we have added an onclick event on the button and executed a function inside the onclick attribute. After executing a function, a text with some style applied to the page will be displayed.

<html>
<head>
   <style>
      #para {
         margin: 5px;
         padding: 0px;
         font-family: cursive;
         font-size: 36px;
         background: linear-gradient(45deg, #f3ec78, #af4261);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
      }
   </style>
</head>
<body>
   <h2> Using <i> Function declaration </i> to define a function in JavaScript </h2>
   <button onclick="func()"> Call a function </button>
</body>
<script>
   function func() {
      var element = document.createElement('p');
      var text = document.createTextNode("The Function has been executed");
      element.appendChild(text);
      element.id = "para";
      document.body.appendChild(element);
   }
</script>
</html>

In the above example, users can see that we have displayed a text by executing a function on clicking a button.

Using Function Expression to Define a Function

We have learned Function Declaration previously. The function expression is the same as the declaration, but we store the function inside the variable. We take the function as a statement and initialize a variable with a function.

We have to use the variable name with parenthesis to run the function. This will call the function declared inside the variable.

Users can follow the below syntax to use function expression to define a function in JavaScript.

Syntax

<script>
var variable = function func() {
   //function will execute on hovering the cursor
}
variable();
</script>

Follow the above syntax to declare and call the function using the function expression in JavaScript.

Example

In the example below, we have added a function expression to execute a function on a button click. We will take two numbers from the user and display the output with a button click.

<html>
<body>
   <h2> Using <i> Function Expression </i> to define a function in JavaScript </h2>
   <label for="number1"> Number 1: </label>
   <input type="number" id="number1" />
   <label for="number2"> Number 2: </label>
   <input type="number" id="number2" />
   <button id="btn"> Add </button>
   <div id="div"> </div>
</body>
<script>
   const expression = function() {
      var number1 = document.getElementById("number1").value;
      var number2 = document.getElementById("number2").value;
      var add = parseInt(number1) + parseInt(number2);
      var element = document.createElement('p');
      element.innerHTML = "Addition of two numbers: " + add;
      element.style.color = "red";
      document.getElementById("div").appendChild(element);
   }
   document.getElementById("btn").addEventListener("click", expression);
</script>
</html>

In the above example, users can see that we have added two numbers using a function defined by a function expression.

Using Arrow Function to define a function

The arrow function works the same as the function expression. But, here, we can omit the function keyword from the syntax. Instead, we must add equal and greater than signs after the parenthesis.

This function is used to make a code for defining a function shorter. This function is commonly used inside parenthesis like, in the map statements.

Users can follow the below syntax to use the arrow function to define a function in JavaScript.

Syntax

<script>
   var func= () => {
      
      //The Code in the function
   }
   
   //call the function
   func();
</script>

Follow the above syntax to define a function using the arrow function in JavaScript.

Example

In the example below, we have used an input field to take a string input from a user. After clicking a submit button, we will execute an arrow function. The arrow function converts the string into an array, and again by using the map method, we will print elements by appending text to each.

<html>
<body>
   <h2> Using <i> Arrow function </i> to define a function in JavaScript </h2>
   <label for="string"> Add a String </label>
   <input type="text" id="string" />
   <button id="btn"> Submit </button>
   <div id="div"> </div>
</body>
<script>
   const arrow = () => {
      var value = document.getElementById("string").value;
      var array = value.split("");
      array.map((array_element) => {
         var element = document.createElement('p');
         element.innerHTML = "Array Element: " + array_element;
         element.style.color = "red";
         document.getElementById("div").appendChild(element);
      })
   }
   document.getElementById("btn").addEventListener("click", arrow);
</script>
</html>

In the above example, users can see that we have used two arrow functions. One will execute after clicking a button, and one is in the map method.

In this tutorial, we have learned the different ways of defining functions in JavaScript.

Updated on: 15-Nov-2022

691 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements