Understanding JavaScript Functions

  • What is a Function?
  • In JavaScript, a function is a block of code that can be defined and then called or invoked to perform a particular task. Functions can accept inputs called parameters and can return a value.

  • Structure of Function :
  • The basic structure of a function in JavaScript consists of several parts:
    Function Keyword: The keyword function is used to declare a function.
    Function Name: This is the identifier for the function, which you use to call it later. It follows the function keyword.
    Parameters (Optional): These are placeholders for values that the function expects to receive when it's called. Parameters are listed within parentheses after the function name.
    Function Body: This is the block of code enclosed within curly braces {}. It contains the statements that define what the function does.
    Return Statement (Optional): This statement specifies the value that the function will return when it's called. Not all functions have a return statement, but those that do must use the return keyword followed by the value to be returned.
    Here's a simple example that demonstrates the structure of a function:
    function add(a, b) {
    return a + b;
    }
    var result = add(3, 5);
    document.write(result);
    Output : 8
    In this example:
    - add is the function name.
    - a and b are the parameters.
    - return a + b; is the return statement within the function body.
    - add(3, 5); is the function call with arguments 3 and 5.
    - document.write(result); outputs the result of the function call, which is 8.


  • Examples :
  • JavaScript code
    # Write a program to accept a number and check whether number is Even or odd, using the function name void check (int n).
    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var n=parseInt(prompt("Enter a no.")); check(n); function check(n) { if(n%2==0) document.write("Even"); else document.write("Odd"); } </script> </body> </html>

    Output :
    Enter a no. 4
    Even
    Enter a no. 5
    Odd

    JavaScript code
    # Write a program to find the sum of any ten natural numbers, using the function name sum (int n).
    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var n=10; sum(n); function sum(n) { var s=0; for(var i=1;i<=n;i++) { var a=parseInt(prompt("Enter no")); s=s+a; } document.write("Sum="+s); } </script> </body> </html>

    Output :
    Enter no 1, Enter no 2, Enter no 3, Enter no 4, Enter no 5, Enter no 6, Enter no 7, Enter no 8, Enter no 9, Enter no 10.
    Sum=55

    JavaScript code
    # Write a program to print the last digit of given number , using the function lastdigit().
    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var n=parseInt(prompt("Enter a no.")); lastdigit(n); function lastdigit(n) { r=n%10; document.write(r); } </script> </body> </html>

    Output :
    Enter a no. 123
    3

    JavaScript code
    # Write a program to accept a number and check whether a number is palindrome or not, using function name reverse (int n) which returns the number after revering the digits.
    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var n=parseInt(prompt("Enter no.")); var p=reverse(n); if(p==n) document.write("Palindrome"); else document.write("not Palindrome"); function reverse(n) { var s=0; while(n>0) { r=parseInt(n%10); s=s*10+r; n=parseInt(n/10); } return s; } </script> </body> </html>

    Output :
    Enter no. 121
    Palindrome
    Enter no. 257
    not Palindrome

  • Use of Function :
  • Functions are used in programming for various purposes, including:
    Modularization : Breaking down a program into smaller, manageable pieces, making it easier to understand and maintain.
    Reuse : Writing a function once and using it multiple times throughout the program, reducing redundancy and promoting code efficiency.
    Abstraction : Hiding the implementation details of a task behind a function interface, allowing the user to focus on what the function does rather than how it does it.
    Parameterization: Accepting inputs (parameters) to customize the behavior of a function, making it adaptable to different situations.
    Encapsulation : Grouping related code together within a function, providing a clear boundary and preventing unintended interference with other parts of the program.
    Organization : Structuring code into logical units, improving readability and maintainability.

  • Conclusion :
  • Functions are a fundamental aspect of JavaScript programming. They allow developers to encapsulate blocks of code, promote modularity, facilitate code reuse, and abstract complex logic into manageable units. Whether you're building web applications, server-side code, or scripting interactive elements on a webpage, mastering functions is essential for writing clean, efficient, and maintainable JavaScript code.