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();