Functions in JavaScript

Introduction

 
In the previous chapter, we learned about the use of a JavaScript block, continue, break, and return Statements and how to use these statements in JavaScript with example programs.
 
In this chapter, we learn about Functions in JavaScript. Function refers to a set of Statements, to perform some specific task. When a JavaScript code is executed, the instructions are carried out inside the main function. There are many ways we can create a function in JavaScript.
  • Function Declaration
  • Function Parameters
  • Function Return Statement

Function

 
A function is a block of code designed to perform a specific task. It enhances code reuse in functions, and the same function can be used multiple times within the program. Any function created using different methods of JavaScript functions will be one of the functions below:
  • A function without parameters and without returning value
  • A function without parameters and with returning value
  • A function with parameters and with returning value
  • A function with parameters and without returning value

Uses of Function

  • Code reusability
  • You can eliminate the need to write the same code.
  • The function can be called anywhere in the program.

Variables using function

  • Local variable- using inside the function.
  • Global variable- using outside the function.

Function Declaration

 
Using the ‘function’ keyword, followed by a set of ‘function name’ and ‘parentheses ()’. The block of code to be executed inside the Curly braces {}.
 
Syntax
  1. function name () // inside the brazes pass the parameters/arguments    
  2. {    
  3.    //code to be executed;    
  4. }    
Note
 
A function name can contain a letter, digit, underscore, and dollar symbol only. Don’t use any other special characters.
 
Example 1
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Functions in JavaScript</h2>    
  9.     <script type="text/javascript">    
  10.         function myfunction()      //define a function    
  11.         {    
  12.             document.write("Hello World");    
  13.         }    
  14.     </script>    
  15. </body>    
  16. </html>    
Output
 
 

Calling a Function

 
In Example 1, we have a function, but there is no output. Why? To execute the function, you need to call the function. To call a function, start with the name of the function, then follow it with the function arguments in parentheses.
 
Example 2 
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Functions in JavaScript</h2>    
  9.     <script type="text/javascript">    
  10.         function myfunction() // declare a function    
  11.         {    
  12.             document.write("Hello World");    
  13.         }    
  14.         myfunction();  // calling a function    
  15.     </script>    
  16. </body>    
  17. </html>   
Output
 
 
Example 2.1
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions</title>    
  6.     <script type="text/javascript">    
  7.         function myfunction()    
  8.         {    
  9.             document.write("Hello World");      
  10.         }    
  11.         myfunction();    
  12.     </script>    
  13. </head>    
  14. <body>    
  15.     <h2>Functions in JavaScript</h2>    
  16.     <p>Click on the button Show the message</p>    
  17.     <button onclick="myfunction()"> Click_Here</button> // calling a function    
  18. </body>    
  19. </html>    
Output
 
 
 

Function Parameters

 
A function can take a parameter, which is just values passing to the function. Parameters are specified into the parentheses. It is provided in the argument field of the function.
 
Syntax
  1. function name (pram 1, param 2, param 3,) {    
  2. // block of code    
  3. }    
Example 3
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions in Parameters</title>    
  6. </head>    
  7. <body>    
  8.     <h1>Passing the Parameters in function</h1>    
  9.     <script type="text/javascript">    
  10.         function sayHello(name, age) // parameters     
  11.         {    
  12.             alert( name + " is " + age + " years old.");    
  13.         }    
  14.         sayHello("NaveenKumar", 23) // calling a function     
  15.         sayHello("VijayKumar", 21)    
  16.         sayHello("Surya", 21)    
  17.     </script>    
  18. </body>    
  19. </html>    
Output
 
 
 

Default Parameters

 
The default parameter is nothing but to set a default value for the function parameter. If the value is not passed, it is undefined.
 
Syntax
  1. function name (param1 = value1, param2 = value2, param3 = value3)    
  2. {    
  3.          //Statements;    
  4. }   
Example 3.1
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions in Parameters</title>    
  6. </head>    
  7. <body>    
  8.     <h1>Default Parameters in function</h1>    
  9.     <script type="text/javascript">    
  10.         function sayHello(name, age =20) // default parameters    
  11.         {    
  12.             document.write( name + " is " + age + " years old.");    
  13.         }    
  14.         sayHello("vijay"); // not assign value for default parameter    
  15.     </script>    
  16. </body>    
  17. </html>   
Output
 
 

The Return Statement

 
The return statement is used to return a value from the function. You need to make a calculation and receive the result.
 
Example 4
 
Try it yourself:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Functions in Parameters</title>    
  6. </head>    
  7. <body>    
  8.     <h1>Return Statememnt in function</h1>    
  9.     <script type="text/javascript">    
  10.         function myfunction(a,b) {    
  11.             return a*b; //return statement    
  12.         }    
  13.         document.write("Product of Two Numbers"+myfunction(10,30));    
  14.     </script>    
  15. </body>    
  16. </html>    
Output
 
 

Summary

 
In this chapter, we learned about functions in JavaScript, declaration of the function, and how to use these functions in JavaScript example programs. 
Author
Vijayakumar S
411 3.9k 1.9m
Next » Events In JavaScript

©2024 C# Corner.