JavaScript Functions

A function is a named block of code that does one job. You write it once, give it a name, and then you can run it again and again just by calling its name. Think of a recipe: a chai recipe says how to make one cup. You do not rewrite the recipe every time someone orders chai — you follow the same recipe again. A function is the recipe; calling it is making the chai.

Diagram — see how it fits together

Without functions, you would copy the same lines of code everywhere you need them. If the price of chai changes, you would have to find and fix every copy. With a function, the price lives in one place. Change it once, and every call uses the new price. That is why professional programmers put almost everything inside functions.

Declaring and calling a function

You declare a function with the word function, a name, round brackets, and a body in curly braces. To run it, you write its name followed by round brackets — that is called calling the function.

function sayHello() {
  alert("Namaste! Welcome to KAMALDNP.");
}
sayHello();

Nothing happens when you only declare a function — the code inside waits quietly until someone calls it. One declaration can be called a hundred times, from anywhere in your page.

Parameters and arguments

Most functions need some input to work with. The values you list inside the brackets when you declare the function are called parameters. The actual values you pass when you call it are called arguments. In the chai example below, cups is the parameter and 3 is the argument.

function chaiBill(cups) {
  return cups * 10;
}
let total = chaiBill(3);  // total is 30

A function can take as many parameters as it needs, separated by commas. If you call it with fewer arguments than it expects, the missing ones become undefined — so always pass what the function needs.

Return — sending an answer back

The return keyword sends a value back to the place that called the function. Without return, a function still runs, but it gives back undefined. Think of it this way: a function that only shows a message is like a cook who serves the chai; a function with return is like a cashier who tells you the total so you can use it.

Once a function hits return, it stops immediately — no lines after it will run. That is a handy way to exit early when you already have the answer.

Common mistakes

• Forgetting the brackets when calling — sayHello without () does nothing; it only refers to the function, it does not run it.
• Using return and then expecting more lines to run — code after return never executes.
• Forgetting to pass an argument — the parameter becomes undefined and your maths turns into NaN.
• Naming a function the same as a variable — the later one wins and the first one is lost.

Remember

• A function is a named block of code: declare once, call many times.
• Parameters are the inputs in the declaration; arguments are the values you pass when calling.
• return sends a value back; without it, a function gives back undefined.
• Write once, call many times — a function is a recipe you name and reuse.

Example explained

• function chaiBill(cups) { return cups * 10; } — the recipe: one cup costs ₹10, so the bill is the number of cups times 10. cups is the parameter.
• document.getElementById("cups").value — reads the number the visitor typed into the input box.
• let total = chaiBill(3); — calling the function with 3 cups returns 30, which is stored in total.
• onclick="showBill()" — when the visitor clicks the button, the showBill function runs and fills in the answer.
• document.getElementById("result").innerHTML = ... — writes the answer into the result paragraph on the page, so the visitor sees it without reloading.