Function in Javascript in Hindi
functions एक code block या समूह है जिसे program में बार बार इस्तेमाल किया जाता है | कई बार ऐसा होता है हमे एक जैसी कोड की बार बार जरुरत पड़ती है | तब ऐसे बार बार इस्तेमाल होने वाले कोड को एक block में रख दी जाती है और उस block को function कहा जाता है |
जब भी उस code की जरुरत होती है तब सिर्फ उस function के नाम के जरिये उस कोड को access की जाती है |
function की बिशेषताएं Benefits Of Function
- function की दो ख़ास विशेषताएं होती वो है code reusability, modularity |
- code reusability में एक जैसी कोड को बार बार लिखने की जरुरत नहीं पड़ती | एक जैसी कोड को एक function के अंदर रख दी जाती है | जहाँ जरुरत है सिर्फ function के नाम का उपयोग किया जाता है | जिससे फिर बिना कारण लम्बी program लिखने में समय की बर्बादी नहीं होती और पूरी program clean और clear बनती है |
- एक जैसी कोड को एक function के अंदर और दुसरे सेट को दुसरे function में रख कर अलग अलग module में बाटां जा सकता है | इससे फिर जरुरत के हिसाब उस्केसी जुडी module में आसानी से बदलाव लाया जा सकता है |
- function modularity के जरिये कहाँ error आ रहा है उसे पहचानना और उसे सही भी किया जा सकता है |
Javascript Function Types
Function दो प्रकार के होतें हैं 1) Built-in Function, 2) User-Defined Function
Built-In Function
Built-In Function javascript में पहले से यानी system के जरिये define होतें हैं | javascript में बहोत सारे Build-in function है जैसे की toString(), parseInt(), Date(), alert(), prompt() |
User-Defined Function
User-Defined Function को यूजर यानी की प्रोग्रामर define करता है | program में जरुरत के हिसाब से इसे define की जाती है और इसका कई बार उपयोग की जाती है | इसे function keyword से define की जाती है |
Function Syntax
function functionname(parameter names)
{
// code blocks;
}user-defined function को function keyword से सुरु किया जाता है | और function को एक नाम दिया जाता और उसके साथ () parenthesis लगाना बहोत जरुरी है |
parameters डालना optional है | अगर कुछ inputs लेना है user से, और उस value के हिसाब से function के code को लिखना है, तब उन values को parameters के जरिये function में भेज सकते हैं |
function की output को return statement के जरिये भी बताई जा सकती है या बिना return के भी उपयोग की जा सकती है |
हम return statement के साथ और बिना return statement के साथ दोनों को, उदाहरण के जरिये समझेगें |
Function के उदाहरण
सरल उदाहरण बिना parameters के
<!doctype html>
<html>
<head>
<title>user-defined functions</title>
</head>
<body>
<script>
function calculate()
{
var a=10;
var b=20;
var res = parseFloat(a) + parseFloat(b);
document.write("result is: " + res);
}
calculate();
</script>
</body>
</html>
ऊपर के उदाहरण में calculate() नाम का function हमने बनाया है | जहाँ दो values लिए हैं और उसका addition करके result को document.write( ) के जरिये दिखाया है |
function का नाम और ()parenthesis लगाकर function call किया जाता है | किसी button click या अन्य event पे function call करना हो या direct call करना हो जैसे हमने ऊपर के उदाहरण में किया है | तो सिर्फ function का नाम और ()parenthesis दीया जाता है |
अब हम एक function का उदाहरण देखेगें जहाँ parameter का उपयोग होगा |
Function की उदाहरण parameters के साथ
<!doctype html>
<html>
<head>
<title>user-defined functions</title>
</head>
<body>
<script>
function Sum(num1, num2) // define function
{
var res = parseFloat(num1) + parseFloat(num2);
document.write(res);
}
show(10,20); //Function Call
</script>
</body>
</html>
उदाहरण में देखिये Sum() नाम का function है जिसमे num1, num2 नाम के दो parameters लिया गया है | और इन दोनों की values को जोड़ कर document.write() के जरिये दिखाया गया है |
parameter की values function call के समय दी जाती है | जैसे उदाहरण में दी गयी है show(10, 20) | जिस order में value दी जायेगी उस order में values, parameters को assign होगी | यानि पहली value पेहली parameter को जायेगी और दूसरी value दूसरी parameter को जायेगी |
Function की उदाहरण parameters और return statement के साथ
<!doctype html>
<html>
<head>
<title>user-defined functions</title>
</head>
<body>
<script>
function Sum(num1, num2) // define function
{
var res = parseFloat(num1) + parseFloat(num2);
return res;
}
var result = Sum(50,40); //function call
document.write(result);
</script>
</body>
</html>
Function के अन्दर और एक function को call करने का उदाहरण
एक function के अन्दर दुसरे function को कैसे इस्तेमाल करें उसे हम एक उदाहरण से देखेंगें |
<!doctype html>
<html>
<head>
<title>user-defined functions</title>
</head>
<body>
<script>
function Sum(mark1, mark2, mark3) //1st function
{
var res = parseFloat(mark1) + parseFloat(mark2) + parseFloat(mark3);
return res;
}
function percent() //2nd function
{
var total = Sum(90,70,80); // 1st function call
var perc = total/300 * 100;
document.write("Marks Total is " + total);
document.write("<br>Percentage is "+perc);
}
percent(); //2nd function call
</script>
</body>
</html>
ऊपर के उदाहरण में हमने एक Sum() function बनाया है और उसे percent() function के अन्दर call किया है | Sum() function से return हो रही total marks का उपयोग करके percentage निकाली गयी है percent() function के जरिये |
output
function कितने प्रकार से define की जा सकती है
javascript function declarations types
javascript में 3 तरह से function को declare किया जा सकता है |
1) function keyword के जरिए
javascript में function declare करने का सबसे पुराना तरीका है | function keyword के जरिये एक user-defined function को declare किया जा सकता है |
Syntax:
function functionName()
{
//statements
}
उदाहरण
function myFunction()
{
console.log("Hello world");
console.log("I am declared by function keyword ");
}
//calling function
myFunction();
2) Assigning function to a variable
दूसरा तरीका है function को किसी variable में assign करके |
Syntax:
var functionName = function ()
{
//statements
}
उदाहरण
var showData = function() {
console.log("Hello I am variable assigning function");
}
//calling function
showData();
3) arrow function
arrow function को ECMAScript6 में define किया गया है |
Syntax
var functionName = () => {
//statements
}
उदाहरण
var arr = () =>{
console.log("i am arrow function");
}
//calling function
arr();
नॉटपॉइंट: इन ३नो तरीकों में function declaration सिर्फ अलग होता है, पर function call करने का तरीका same होता है | function के नाम और ()parenthesis के जरिये function को call किया जाता है |
function declaration कोनसा approach सही है ?
ऊपर के उदाहरण में आपने देखा function 3 तरह से declare किया जा सकता है | और इन ३नो में दूसरा और तीसरा approach को सही माना जाता है |
पहली approach की क्या limitation है?
जब हम function को पहली approach से define करते हैं यानि की function keyword से function लिखते हैं तब वो system को नहीं बताता की पहले function declaration होगा उसके इसे call किया जाये |
इसका अर्थ क्या है? देखिये javascript, program को top से लेकर bottom तक run करता है | हम अगर function call पहले कर दें और उसके बाद function को define करेंगे तब javascript कोई error नहीं देगा | पर ये programmer के लिए confusion create कर सकता है |
इसीलिए javascript programming में function declaration, variable assigning या फिर arrow function के जरिये prefer किया जाता है | इन दोनों approach में पहले function को declare किया जाता है तब जाकर function call होता है |
Formal Parameters और Actual Parameters क्या होता है
function declaration के समय जो parameters ()parenthesis के अंदर लिखी जाती है उसे formal parameters कहा जाता है और function calling के समय जो parameters भेजी जाती है उसे actual parameters कहा जाता है |
उदाहरण
<script>
function Sum(num1, num2) //num1, num2 are formal parameters
{
var res = num1 + num2;
console.log(res);
}
var a1 = 10; a2 = 20;
Sum(a1, a2); ////a1, a2 are actual parameters
</script>
उदाहरण में देखिए Sum() define करते के समय num1, num2 parmeters को भेजी गयी है, इसे formal parameters कहा जायेगा | जब हम Sum() को call कर रहें हैं, तब a1, a2 parameters भेजी गयी है | यहाँ a1, a2 actual parameters कहलायेगा |
javascript local और global variables क्या है ?
variables जिसे किसी module के अंदर declare किया जाता है उसे local variable कहा जाता है | यानि local variable को हम किसी function के अंदर declare करते हैं |
variables जो module के बाहार declare होता है उसे global variable कहा जाता है | global variable को हम कहीं भी access कर सकतें हैं | पर local variable को सिर्फ उसी module में access कर सकतें हैं जहाँ उसे declare किया गया हो |
उदाहरण
<script>
var a; //global variable
function callFun()
{
var b = 10; // b is local variable
a = 9;
console.log("b value is "+b);
}
callFun();
console.log("a value is "+a);
a = 11;
console.log("a value is "+a);
</script>
ऊपर के उदाहरण में a एक global variable है और b एक local variable है | b variable को सिर्फ हम callFun() के अंदर access कर सकतें हैं पर a variable को हम callFun() के अंदर भी और बाहार भी access कर सकतें हैं |
नॉटपॉइंट: javascript programming में global variable declare करने को preference नहीं दिया जाता है | क्यूंकि ये कहीं भी access हो सकता है, कोई भी इसमें बदलाव कर सकता है | इसीलिए program लिखते समय global variable define करने के लिए मना किया जाता है |
अगर कोई variable बिना declare किये उसे direct value assign कर दिया जाए, तब वो variable अपने आप global variable बन जाता है |
उदाहरण
<script>
function callFun()
{
a = 99;
console.log("a value is "+ a);
}
callFun();
a = 11;
console.log("a value is "+a);
</script>
उदाहरण में देखिये callFun() के अंदर a variable को सिर्फ value assign किया गया है पर उसे declare नहीं किया गया है | इसीलिए a एक global variable बन गया है | इसी कारण इसे callFun() के अंदर भी access किया गया है और इसके बाहार भी access किया गया है |
Arguments Object
javascript में function के अंदर जितने भी parameters pass होतें है वो by-default arguments object में store होतें हैं |
arguments, javascript function में by default define होता है | ये एक object है जो सारे parameters को array के हिसाब से लेता है |
arguments कोई array नहीं होता है पर ये array की length property का उपयोग करता है | और इसके अंदर की argument को index number से जान सकते हैं | और index value 0(zero) से सुरु होती है |
length property के जरिए arguments के अंदर कितनी parameters है वो पता लगा सकतें हैं |
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arguments Object Example</title>
</head>
<body>
<script>
function addValues()
{
var result = 0;
for(var i=0; i<arguments.length;i++)
{
result+=arguments[i];
}
console.log("Sum is "+result);
}
addValues(1,2,3,4,5);
</script>
</body>
</html>
function declaration के समय अगर कोई parameter नहीं भी देते हैं तब भी function call के समय जितनी भी parameters दें, वो arguments object में store होता जाएगा |
ऊपर के उदाहरण में हमने addValues() नाम का function बनाया है पर declaration में कोई parameter नहीं दिया है | पर जब function call किया तब 5 parameters डाला है जिसे arguments object के जरिए access करके उसका sum() निकाला है |
इसी तरह हम addValues() में 0 या एक से अधिक parameter भेज सकतें हैं |
addValues(); addValues(1,2); addValues(1,2,3,4,5);
arguments object के जरिए parameter value को जरुरत के हिसाब से बदल भी सकतें हैं |
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arguments Object Example</title>
</head>
<body>
<script>
function test()
{
arguments[0]=100;
console.log("1st value is "+arguments[0]);
console.log("2nd value is "+arguments[1]);
}
test(10,20);
</script>
</body>
</html>
उदाहरण में देखिये test() function call के समय हमने पहला parameter 10 भेजा था पर function के अंदर उसे 100 से बदल दिया है | इसी तरह arguments के जरिये हम parameter की value में बदलाव कर सकतें हैं |
output
नॉटपॉइंट->arguments का उपयोग non-arrow function में होता है |
What is Recursive Function in Javascript
same function जब खुदको call करता है अपने function body के अंदर, उस function को recursive function कहा जाता है | function body के अंदर same function call के process को recursion कहा जाता है |
उदाहरण
<script>
let num = 5;
function countDown(num)
{
console.log(num);
num = num - 1;
if(num > 0)
{
countDown(num);
}
}
countDown(5);
</script>
उदाहरण में देखिए countDown() function खुदको call कर रहा है और ये 5 से लेकर 1 तक की value print कर रहा है |