JAVASCRIPT FUNCTIONS AND EVENTS

 


Index

1. JavaScript Functions

2. JavaScript Events


1. JAVASCRIPT FUNCTIONS

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

Syntax:

  • A JavaScript function is defined with the Function keyword, followed by a name, followed by parentheses ().
  • Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
  • The parentheses may include parameter names separated by commas:
  • The code to be executed, by the function, is placed inside curly brackets: {}

 Function myfunction( ) {

// code

}

Example

<html>

<head>

</head>

<body>

    <button onclick="myfunction()"> Click me </button>


    <script>

         Function myfunction( ) {

             alert("Hello JS");

        }

    </script

</body>

</html>

The code inside the function will execute when "something" calls the function:

  • when a user clicks a button
  • When it is called from JavaScript code
  • Automatically Calls the function.

Function Return

When JavaScript reaches a Return statement, the function will stop executing.

If the function was calls from a statement, JavaScript will "return" to execute the code after the call statement.

Functions often compute a return value. The return value is "returned" back to the "caller".

Syntax:

<html>

<head>

</head>

<body>

        <p id="demo"> </p>

    <script>

       let x = myFunction(4, 3);

        document.getElementById("demo").innerHTML = x;

        function myFunction(a, b) {

          return a * b;

        }

    </script

</body>

</html>

Output: 12

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

  1. Code reusability: We can call a function several times so it save coding.
  2. Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

ARROW FUNCTION

Arrow function is concise way of writing JavaScript function in shorter way. Arrow functions were introduced in the ES6 version they make our core more structured and readable. 

Arrow functions are anonymous function i.e. fuction without a name but they are often assigned to any variable they are also called Lambda Function.

Syntax:

 Function myfunction( ) {

// code

}

Example:

<html>

<head>

</head>

<body>

        <p id="demo"> </p>

    <script>

         myFunction() => {

          return "Hello JavaScript;

        }

        document.getElementById("demo").innerHTML = myfunction();

    </script

</body>

</html>

Advantages of Arrow Functions

  • Arrow functions reduce the size of the code.
  • The return statement and function brackets are optional for single-line functions.
  • It increases the readability of the code.
  • Arrow functions provide a lexical this binding. It means, they inherit the value of “this” from the enclosing scope. This feature can be advantageous when dealing with event listeners or callback functions where the value of “this” can be uncertain.

Limitations of Arrow Functions

  • Arrow functions do not have the prototype property.
  • Arrow functions cannot be used with the new keyword.
  • Arrow functions cannot be used as constructors.
  • These functions are anonymous and it is hard to debug the code.
  • Arrow functions cannot be used as generator functions that use the yield keyword to return multiple values over time.