JavaScript Functions: Creating Reusable Blocks of Code

What Is a Function? The Recipe Analogy 🍳

Afunctionis a named, reusable recipe for your code:

• 📜Define it once— write the steps (the ingredients go in, the dish comes out)
• 📞Call it whenever— say its name, and the steps execute
• ♻️Reuse it forever— same recipe, unlimited meals

// ① DEFINING — writing the recipe (nothing runs yet!):function makeTea() {  console.log("1. Boil water 💧");  console.log("2. Add tea leaves 🍃");  console.log("3. Pour and serve ☕");}
// ② CALLING — actually cooking (now it runs!):makeTea();makeTea();

Output:

1. Boil water 💧2. Add tea leaves 🍃3. Pour and serve ☕1. Boil water 💧2. Add tea leaves 🍃3. Pour and serve ☕

⚠️ The Critical Distinction: Defining vs Calling

function makeTea() {
  /* steps */
}// 📜 defining — code sits dormantmakeTea;                              // 👀 just referencing — nothing happensmakeTea();                            // 📞 calling — the parentheses RUN it! ✅

No parentheses, no execution.makeTeais the recipe card;makeTea()is actually cooking.

Anatomy of a Function Declaration 🔬

function greet(name) {
  // ← declaration header  console.log(`Hello, ${
  name
}! 👋`);   // ← body: the steps
}
// ← note: NO semicolon after the brace

Parameters and Arguments: The Input System 📥

Functions become truly powerful when they acceptinputs:

// 'name' is a PARAMETER — the placeholder slot:function greet(name) {  console.log(`Hello, ${name}! 👋`);}
// "Priya" is an ARGUMENT — the actual value you pass in:greet("Priya");    // Hello, Priya! 👋greet("Amit");     // Hello, Amit! 👋greet("Riya");     // Hello, Riya! 👋

🗣️ Interview-perfect definitions:Aparameteris the variable in the function's definition (the slot). Anargumentis the actual value passed during the call (what fills the slot). Parameters are the parking spaces; arguments are the cars. 🚗

Multiple Parameters

function introduce(name, age, city) {
  console.log(`${name}, ${age}, from ${city} 🏙️`);
}introduce("Priya", 22, "Mumbai");
// Priya, 22, from Mumbai 🏙️

⚠️ Order Matters — And Missing Arguments Become undefined

introduce("Mumbai", 22, "Priya");
// "Mumbai, 22, from Priya" 😵 — wrong order!introduce("Priya");                 // "Priya, undefined, from undefined" 😬

Arguments fill parametersleft to right. Missing ones becomeundefined.

Default Parameters — The Safety Net ✅

Give parameters fallback values with=:

function greet(name = "Guest", greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}greet("Priya", "Welcome");
// Welcome, Priya!greet("Priya");              // Hello, Priya! — greeting defaultedgreet();                     // Hello, Guest! — both defaulted ✅

No moreundefinedguests. Defaults are one of the most-used features in real-world code.

return: Sending Results Back 📤

So far our functions onlyprintedthings. But printing is a dead end — the value vanishes into the console.returnsends a value back to whoever called the function, so it can beused:

function add(a, b) {
  return a + b;
  // 📤 sends the result back}
  const total = add(10, 5);
  // 📥 the returned value gets stored!console.log(total);          // 15console.log(total * 2);      // 30 — we can keep using it ✅

🚨 return vs console.log — The #1 Beginner Confusion

This deserves its own spotlight, becauseeverybeginner mixes these up:

// ❌ The classic mistake — printing instead of returning:function addWrong(a, b) {  console.log(a + b);        // displays 15… then the value is GONE}const result = addWrong(10, 5);console.log(result);         // undefined 😱 — nothing was returned!
// ✅ The fix:function addRight(a, b) {  return a + b;              // hand the value back}const result2 = addRight(10, 5);console.log(result2);        // 15 ✅ — stored and usable!

Rule of thumb:console.logis foryou(debugging).returnis foryour program(data flow). A function that calculates something should almost alwaysreturnit.

return Ends the Function Immediately 🛑

The momentreturnexecutes, the function exits — code after itnever runs:

function checkAge(age) {
  if (age < 0) {
    return "Invalid age ❌";
    // exits HERE for negative ages  }  if (age >= 18) {    return "Adult ✅";          // exits HERE for adults  }  return "Minor 🧒";            // only reachable for 0–17}
    console.log(checkAge(25));
    // "Adult ✅"console.log(checkAge(-3));   // "Invalid age ❌"

This pattern —early returns— replaces deepif/elsenesting and is the professional way to write clean decision logic.

Functions Without return

A function with noreturn(or a barereturn;) gives backundefined:

function doNothing() {
  // no return statement}
  console.log(doNothing());
  // undefined

Functions Are Values: Expressions & Arrow Functions 🎁

From Lesson 5: functions are a data type! You can store them in variables:

Function Expressions

const multiply = function(a, b) {
  // function stored in a variable  return a * b;};
  console.log(multiply(4, 5));
  // 20

Arrow Functions — The Modern Shorthand 🏹

// The full form:const add = function(a, b) {  return a + b;};
// Arrow version — same thing, sleeker:const add = (a, b) => {  return a + b;};
// One-liner superpower — implicit return (no braces, no return keyword):const add = (a, b) => a + b;
console.log(add(4, 5));
// 9 ✅

The arrow shortcuts:

const square = x => x * x;
// one param: no () needed!const sayHi = () => console.log("Hi!");    // zero params: () requiredconst double = n => n * 2;                 // one expression: implicit return

Declaration vs Expression vs Arrow — when?

(There's a deeper dive on hoisting and arrow-vs-regularthisin Lesson 29 — arrows inheritthis, regular functions don't!)

Functions + Scope: The Lesson 10 Connection 🔗

Remember the one-way mirror fromLesson 10? Functions enforce it perfectly:

const TAX_RATE = 0.18;
// 🌍 global — visible everywhere
function calculate(price) {
  const tax = price * TAX_RATE;
  // ✅ global visible INSIDE  const total = price + tax;     // 🏠 total is function-scoped  return total;}
  console.log(calculate(100));
  // 118console.log(total);              // ❌ ReferenceError — total died with the call!

Each function call creates a fresh scope — variables born inside vanish when the function ends. (Unless a closure packs them in a backpack — Lesson 22's magic! 🎒)

🛠️ Mini Project: Shopping Bill Calculator 🧾

Small functions working as a team — the professional way:

// 🧾 Shopping Bill Calculator — functions calling functions
const TAX_RATE = 0.18;
const FREE_DELIVERY_MIN = 500;
const DELIVERY_FEE = 40;


function calculateSubtotal(price, quantity) {
  return price * quantity;
}


function calculateTax(amount) {
  return amount * TAX_RATE;
}


function calculateDelivery(subtotal) {
  return subtotal >= FREE_DELIVERY_MIN ? 0 : DELIVERY_FEE;   // ternary — Lesson 16! ✨
}


function printBill(item, price, quantity) {
  const subtotal = calculateSubtotal(price, quantity);
  const tax = calculateTax(subtotal);
  const delivery = calculateDelivery(subtotal);
  const grandTotal = subtotal + tax + delivery;


  console.log(`🧾 BILL — ${item} ×${quantity}`);
  console.log(`Subtotal:  ₹${subtotal}`);
  console.log(`Tax (18%): ₹${tax.toFixed(2)}`);
  console.log(`Delivery:  ${delivery === 0 ? "FREE 🎉" : "₹" + delivery}`);
  console.log(`TOTAL:     ₹${grandTotal.toFixed(2)}`);
  console.log("─────────────────");


  return grandTotal;
}


printBill("Keyboard", 1299, 1);
printBill("Mouse Pad", 149, 2);

Output:

🧾 BILL — Keyboard ×1
Subtotal:  ₹1299
Tax (18%): ₹233.82
Delivery:  FREE 🎉
TOTAL:     ₹1532.82
─────────────────
🧾 BILL — Mouse Pad ×2
Subtotal:  ₹298
Tax (18%): ₹53.64
Delivery:  ₹40
TOTAL:     ₹391.64
─────────────────

The architecture lesson:each tiny function doesone joband returns a value;printBillorchestrates them. Change the tax rate → one line. Change the delivery rule → one function. This is how professional codebases stay maintainable. 🏆

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 38 Quiz 🧠

1. What's the difference between a parameter and an argument?
2. What's the output?
   script.js

   Copy Code Run Online

   function test() {
     console.log("A");
     return 5;
     console.log("B");
   }console.log(test());

3. Why doesconst x = add(2, 3); console.log(x);printundefinedwhenaddusesconsole.log(a + b)inside?
4. Write an arrow functioncubethat returns n³ in one line.
5. What doesgreet("Priya")print if defined asfunction greet(name = "Guest") { console.log("Hi " + name); }— and what doesgreet()print?

(Answers: 1. Parameter = the slot in the definition; argument = the actual value passed in the call · 2. "A" then 5 — "B" never prints because return exits the function · 3. console.log displays but returns nothing — the function has no return statement, so x receives undefined; fix: return a + b · 4.const cube = n => n ** 3;· 5. "Hi Priya" and "Hi Guest" — the default kicks in when no argument is passed)