in

JAVASCRIPT FUNCTIONS | Introduction To Functions In JavaScript

In this tutorial we will be discussing about JavaScript Functions which entails how to define and structure a function in JavaScript. In our previous tutorial we discussed about loop controls where we explained how to use break and continue statement and also labels to control loops in JavaScript. If you haven’t gone through the tutorial you can do so quickly using the link below

Read previous tutorial on: JavaScript Loop Control | Learn How To Control Loops in JavaScript

JAVASCRIPT FUNCTIONS

Functions in JavaScript are code structures used to perform a certain action. This code structure or group of codes are reusable anywhere in the JavaScript codes. So instead of repeating different codes to carry out a simple action, you can structure a function and call it anywhere you need the code to be executed.

JavaScript allows programmers or developers to build functions and also there are some inbuilt functions already present in JavaScript. Example include alert (), return () etc.

FUNCTION DEFINITION

The first step when structuring a function is to define the function. Just like defining variables in JavaScript, the simple way to define a function in JavaScript is by using the “function” followed by the unique name of the function, an empty bracket and lastly a curly brace having the rules to be executed.

The syntax for function is shown below

<script type = "text/javascript" name="javascript">
   <!--
      function nameoffunction(arguments) {
         code statements
      }
   //-->
</script>

Example

<script>
<!--
      function showHello(){
         alert ("hello world");
      }
   //-->
   </script>
   

CALLING JAVASCRIPT FUNCTIONS

calling a function in JavaScript involves invoking the function somewhere else when in need. The below example shows a function structured at the head section of the web page and called on the body of the web page.

<!DOCTYPE html>
<html lang="en">
<head>
   
   <script type="text/javascript" >
   <--
      function showHello(){
         document.write("hello world");
      }
      //-->
   </script>
   
   <title>FUNCTON CALLING</title>
</head>
<body>
<form>
   <input type="button" value="click me" onclick="showHello()" >
</form>
</body>
</html>

RESULT

FUNCTON CALLING

ADDING PARAMETERS TO JAVASCRIPT FUNCTIONS

in our previous examples we didn’t input anything inside the bracket in front of our function. This bracket can be used to hold parameters or arguments. The below example shows how to add parameters inside the function.

<!DOCTYPE html>
<html lang="en">
<head>
   
   <script type="text/javascript" >
     
         function myName(my_Name){
            document.write("hello my name is " + my_Name);
         }
         
      </script>
   <title>FUNCTION CALLING</title>
</head>
<body>
   <form>
      <input type = "button" onclick = "myName('erm')" value = "show name">
   </form> 
   
</body>
</html>

RESULT

FUNCTION CALLING

The return Statement

Javascript functions can be used to return a statement or even return another function. All depends on the need for such action. The below example shows how to return the sum of two numbers using the return statement.

<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" >
   function callFun(){
      return sumNumb();
   }
         function sumNumb(){
         a=7;
         b=8;
         sumofNumb = a+b;
         document.write("the sum is "+ sumofNumb );
         }
      </script>
   <title>THE RETURN STATEMENT</title>
</head>
<body>
   <form>
      <input type = "button" onclick = "callFun()" value = "show result">
   </form>    
</body>
</html>

THE RETURN STATEMENT

CONCLUSION

Function is one of the most important aspect of coding in JavaScript. Most actions performed on software’s are as a result of the help of functions. We hope with the help of this tutorial, you will be able to define and make proper use of functions when coding.

NEXT TUTORIAL: JAVASCRIPT EVENTS

What do you think?

javascript loop control

JavaScript Loop Control | Learn How To Control Loops in JavaScript

JavaScript event

JAVASCRIPT EVENT | Learn How To Structure Events Using JavaScript