Functions in Java Script

on

Functions in JavaScript

The function is programming convection that allow us to package of code in a manner that we can reuse it without having to re-write it.

function add(a,b){ return a+b; } document.write(add(2,3));

here is the another example

var fruits=["Orange", "Mango", "Grapes"];
var vegies=["Carrot", "Turnip", "Onion"];
var fastfood=["burger", "noodles", "hotdog"];

function loopArray( arrayName){
   for (var i=0; i<arrayName.length; i++){
       document.write(arrayName[i] + "<br>");
}
}

loopArray(fruits);  // function call with argument "fruits"
loopArray(vegies);
loopArray(fastfood);

using the function is called invoking the function or calling the function:


Here is the link for practical: https://codepen.io/preptuts/pen/dgpWed?editors=0010

Scope Functions

There are two types of scope in JS one is global and other is within the function. Anything between the script tag is a global scope. In below example, the "data" is the global scope.

var data="Global Scope";

function getdata(yourdata){

    return yourdata;

}

document.write(getdata(data)+"<br>");


 here is another exaple
var storage=[];
function sendData(){
 storage.push(" First Data ");
 storage.push(" Second Data ");
 storage.push(36);
};
sendData();
function retriveData(d,i){
return d[i];
};

retriveData(storage,0);   // First Data
retriveData(storage,1);  // Second Data
retriveData(storage,2);  //36



Here is the practical:https://codepen.io/preptuts/pen/pxNRXr?editors=0010



If we use a variable inside the function without assign "var" keyword then it is the global scope.

var data="Important Data";
function testScope(){
data="Some Data";
}
testScope();
document.write(data); // some data



if we call function testScope then inside data variable become global and overwritten.

Variable Hoisting Function

The phenomenon of taking variable declaration at the top is called variable hoisting.
Variable has two parts. Variable declaration and initialization.
var abc;   // declare
abc= 123;// initialization

The return statement is optional. IF you do not use return then it returns undefined.

function add(a,b)
{
var data= a+b;
}
add(1,2);
document.write(data);  //undefined

here is an example to illustrate the variable hoisting

function test(){
var item;
document.write(item);
}
test(); // output undefined.

or

function test(){
document.write(item);
var item = 10;
}
test(); // output undefined.

so always declare the variable at the top.

It is always good practice to declare your variables at the top of the scope they are contained within. 

Function Declarations & Expressions

function funName(){    // empty function declaration
}
 var funName = function(){  // empty function expression

}

Treat function like a variable.
 Here is the example:

var add= function(a,b){
return a+b;
};
add (2,2);
var addMinTwo = add(2,2)-2;
document.write(addMinTwo);  //2

The difference between function declaration and expression is by example:

document.write(add(3,4));
function add(a,b){
return a+b;
}

if you call the function then declare it works because it works globally.

in expression, it does not work

document.write(add(3,4));
var add = function(a,b){
return a+b;
}
 it does not work.


Here is the practical:https://codepen.io/preptuts/pen/pxNRXr?editors=0010

Self-Invoking and Anonymous Functions

anonymous functions are simply without name.
function (a,b){
return a+b;
}

this will declare and executed all in one step.

IIFE this is an acronym for immediately invoked function Expression
(function add(a,b){
return a+b;
}(2,2);

In regular function, there are two steps for it.

Here is the example of self-invoking function with the same name but different results.

(function(){
function mathcalc(a,b){
document.write(a*b+"<br>");
}
mathcalc(20,50);
} ());

(function(){
function mathcalc(a,b){
document.write(a+b+"<br>");
}
mathcalc(20,50);
} ());

These are needed when you executed code once.


Call Back Function

callback is a function that is used as an argument in another function.

function callbacktest(callback){
callback();
}
callbacktest();

here is a practical example:

function add(a,b){
return a + b;
}
function mul(a,b){
return a*b;
}

function mathcalc(a,b, callback){
callback();
};
document.write(matchcalc(1000,10, add)+"<br>"); // 1010
document.write(matchcalc(1000,10, mul)+"<br>"); // 10000 

Anonymous Function

function exampleFunc(arg1, arg2, callback){
var my_number = arg1 + arg2;
callback(my_number);

};

exampleFunc(5,15,function(n){

console.log(n)
});

anonymous functions can be used as callback function.

The function that returns function


function doMath(a,b){
return function(){ return a+b;}
}
var doMathReturn= doMath(2,5);
document.write(doMathReturn());



Closures

Closures are functions that refer to independent (free) variable.
function define in the closures "remember" the environment in which it was created.
like Mozilla Develpwer Network.

In programming language a closure(also lexical closure or function closure) is a function or reference to a function together with a referencing environment a table storing a reference to each of the non- local variables( also called free variables or upvalues of the function.

here is the example:

function box(){
var text= "Lorem Text";
             return function getText(){
                 document.write(text);
             }
}
var getText= box();
getText();  //Lorem Text

here is another example:

function outerFun(){
var counter= 0;
return function showData(){
return counter++;
}
}

var inner = outerFun();
document.write(inner()+"<br>");
document.write(inner()+"<br>");
document.write(inner()+"<br>");

Comments

Post a Comment