Loading...
Loading...
00:00:00

Javascript Functions

In javascript functions are set of codes performing the specific task. There are different ways to declare a functions in javascript. Function is best way to reuse code. There are some important terms used in functions listed here

  • Function definition - In function body we write some code for specific task and it is not working unless it is called.
  • Function Arguments or parameters- Function '( )' Arguments is providing some values or variables for function which is used in function body to execute the task. It is not necessary parameters can be more than one or two.
  • Function call - when we use function that is called function call. function must be call for use it.
  • Function return - function may return a value and may not.
  • Function can access global variable.
function function_name(params) {   //function define
    // code 
}
function_name(params); //function call 

Example:

Write a function to add two numbers. here is example to show, how to define and use.

 // function definition 
function add(number1, number2) {
    let x = number1 + number2;
    console.log("Addition is " + x);
}

// function call 
add(10, 20);

Function Example Without Parameter

Write a function to add two numbers. here is example to show, how to define and use.

 // function definition without parameter
function add() {
   let x = 20 + 30;
    console.log("Addition is " + x);
}
// function call 
add(10, 20);

Function Default Parameters

function default parameters is used when user do not provide any parameter. In case of parameter not providing variable value assinged is Undefined.

function add(number1 = 0, number2 = 0) {  // default parameter 
    let x = number1 + number2;
    console.log("Addition is " + x);
}

add();  //not providing arguments

Function Returns A Value

Function may return a value. For returning the value we have use return keyword. In case of single statement in function body not require.

function add(number1, number2) {  
    return number1 + number2;   // returning the value
}
console.log( add(10, 20) );  //  return 30

Function Variable Or Alias

function can be stored in a variable and variable can be used as function (alias). In this case not need to write function name.

//storing a function in a variable 
let add = function (number1, number2) {
    return number1 + number2;   // returning the value
}
console.log(add(10, 20));  // using variable as a function

Function Call In HTML Document

We can directly call functions in HTML element based on different types of events.

<h1 onclick="add(10,20)">Lorem ipsum dolor sit libero</h1>
<script>
let add = function (number1, number2) { // called when click on h1
console.log(number1 + number2);
}
</script>

Arrow Function In Javascript

Arrow function is the short form of regular function. It is invoked where it is defined. No need to call. It can be stored in a variable. It is replacement of function call in another method or function when we are passing a function.

let squre = (a) => {    // arrow function
    return a * a;
}
console.log(squre(5))  // returning 25

Arrow Function Example Call When Click On Element

arrow function in another function. when btn is click function automatically called.

let btn = document.getElementById("myBtn");
btn.addEventListener('click', () => {    // arrow function 
console.log("This is arrow function invoke when btn click");
})

Arrow Function In One Line

Arrow function can be written in one line without using return statement or parenthesis if function body has only one statement. In this example we are printing Hello World.

let x = ()=> {  return (console.log("Hello World")) }    // arrow function in one line
x();   //function call using variable

let x = ()=> console.log("hello World")    // if function body contain only one statement
x();