Defining function (with and without parameters), calling function, return statement, page redirection

📖 Theory

એ જ પાંચ લીટીઓ, બધે

FestConnect ત્રણ જગ્યાએ ફી ગણે છે: event ના card પર, સારાંશમાં, અને પહોંચમાં. તમે એ જ base * count નું ગણિત ત્રણેયમાં નકલ કરો છો. પછી ફી નું સૂત્ર બદલાય છે, અને તમારે દરેક નકલ શોધી કાઢવી પડે છે.

Function આ સુધારે છે: તર્ક એક વાર લખો, એને નામ આપો, અને જ્યાં જોઈએ ત્યાં એને બોલાવો. એક જગ્યાએ બદલો, બધે સુધરી જાય. Functions એ જ રીત છે જેનાથી code દોહરાવવાનું બંધ કરીને ફરી વાપરી શકાય એવો બને છે.

📖 Theory

ફરી વાપરી શકાય એવી રસોઈની રીત

રસોઈની રીત એક વાર લખાય છે અને અનેક વાર અનુસરાય છે. એ સામગ્રી (parameters) લે છે, પોતાનાં પગલાં કરે છે, અને એક વાનગી (return નું મૂલ્ય) બનાવે છે. '2 ચા બનાવો' અને '5 ચા બનાવો' એ જ રીત જુદા જથ્થા સાથે વાપરે છે. Function એ code માટેની રીત છે: પગલાં એક વાર વ્યાખ્યાયિત કરો, પછી જ્યારે પરિણામ જોઈએ ત્યારે જુદાં inputs સાથે એને બોલાવો.

📖 Theory

વ્યાખ્યાયિત કરો, બોલાવો, પાછું આપો

• વ્યાખ્યાયિત કરો: function calcFee(base, count) { return base * count; }. કૌંસમાંનાં નામ એ parameters (inputs) છે.
• બોલાવો: calcFee(200, 2) એને arguments 200 અને 2 સાથે ચલાવે છે, અને 400 આપે છે. બોલાવવા કૌંસ જોઈએ.
• return: બોલાવનારને મૂલ્ય પાછું આપે છે અને function પૂરું કરે છે. return ન હોય તો એ undefined આપે છે.
• પાનું બદલવું: window.location.href = "thanks.html" browser ને બીજા પાના પર મોકલે છે, જે સફળ ક્રિયા પછી કામનું છે.

⌨️ Practical

FestConnect નાં functions

// with parameters, returns a value
function calcFee(base, count) {
  return base * count;      // ends here; sends value back
}
console.log(calcFee(200, 2));   // 400

// without parameters
function showWelcome() {
  console.log("Welcome to FestConnect");
}
showWelcome();     // runs it (note the parentheses)

// calling vs referencing
console.log(calcFee);      // the function itself (no run)
console.log(calcFee(200, 1)); // 200 (called)

// after a successful register, redirect the browser
function goThanks() {
  window.location.href = "thanks.html";
}

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

કૌંસ શું બદલે છે?

button.addEventListener('click', register) સામે button.addEventListener('click', register()) માં, એક function ને click સાથે જોડે છે અને બીજું bug છે. કયું કયું છે, અને bug વાળું શું કરે છે?

🧩 Quiz

એક function માં `return total;` છે અને એની પછી `console.log("done");`. Log ક્યારેય છપાતું નથી. શા માટે?

1. return function ને તરત પૂરું કરે છે, એટલે એની પછીનો code ચાલતો નથી
2. console.log ફક્ત functions ની બહાર જ કામ કરે છે
3. આગળ વધવા તમારે return બે વાર બોલાવવું પડે
4. Log ને ચાલવા માટે પોતાનું function જોઈએ

⚠️ Watch out

Function ના ફાંદા

1. બોલાવવા કૌંસ ભૂલી જવા: એકલું showWelcome કશું કરતું નથી; showWelcome() એને ચલાવે છે. પણ event ના handlers માટે તમે જાણી જોઈને એ છોડી દો છો (નામ પસાર કરો).

2. return પછીનો code: એ ક્યારેય ચાલતો નથી. return એ નિકાસ છે.

3. Parameters સામે arguments: parameters એ વ્યાખ્યામાંનાં નામ છે; arguments એ બોલાવતી વખતે તમે પસાર કરેલાં ખરેખરાં મૂલ્યો છે. બહુ ઓછાં પસાર કરવાથી ખૂટતાં undefined રહે છે.

📖 Theory

register() એ ધ્યેય છે

આ એકમનું બધું એક જ function તરફ બંધાય છે: register(). એ form ના submit ના event પર બોલાવાશે, DOM ની પદ્ધતિઓથી ખાનાં વાંચશે, એમને validate કરશે (પછીના બે પાઠ), અને સફળ થાય તો window.location થી thanks.html પર મોકલશે. એ function નો આકાર હવે તમારી પાસે છે; પછીના પાઠો પાસ કે નાપાસ નક્કી કરતી ચકાસણીઓ ભરે છે.

✅ Summary

Key takeaways

• Function એ નામ આપેલો, ફરી વાપરી શકાય એવો ટુકડો છે: એક વાર વ્યાખ્યાયિત કરો, અનેક વાર બોલાવો.
• Parameters એ વ્યાખ્યામાંનાં inputs છે; arguments એ બોલાવતી વખતે પસાર કરેલાં મૂલ્યો.
• કૌંસ સાથે બોલાવો: calcFee(200, 2). return મૂલ્ય પાછું આપે છે અને function પૂરું કરે છે.
• Event ના handlers માટે function નું નામ કૌંસ વગર પસાર કરો; કૌંસ એને તરત ચલાવે છે.
• window.location.href = "page.html" browser ને બીજા પાના પર મોકલે છે, દા.ત. સફળ નોંધણી પછી.
• Memory hook: ફરી વાપરી શકાય એવી રીત, કૌંસ સાથે બોલાવાયેલી.