📘 Lesson · Lesson 20

Functions

What Functions Are

A function is a reusable block of code that performs a specific task — you define it once, then run it whenever you need it. Think of it like a recipe: you write down the steps once, then follow that recipe any time you want the dish. Or think of a kitchen appliance — you don't rebuild the mixer every time you bake; you just press the button. Functions let you name a chunk of logic ("calculateTotal", "showMessage"), reuse it endlessly, and keep your code organised. They are the single most important building block in all of JavaScript.

Declaring a Function

function greet() {
    console.log("Hello!");
    console.log("Welcome to CodeKaFunda");
}

/*  function  greet  ()          { ... }
    keyword   name   parameters   body   */

A function declaration has four parts: the function keyword, a NAME you choose (in camelCase, describing what it does), a pair of parentheses () for parameters (empty here — we'll cover those next chapter), and a body in curly braces containing the code to run. Important: declaring a function does NOT run it. The code inside sits ready and waiting, doing nothing until you call it. This is the crucial distinction beginners miss — writing the function is like writing the recipe; nothing gets cooked yet.

Calling a Function — making it run

function greet() {
    console.log("Hello!");
}

greet();      // ← this CALLS (runs) the function. Output: Hello!
greet();      // call it again — reuse!
greet();      // and again

greet;        // ✗ WITHOUT parentheses, nothing happens!

To run a function, write its name followed by parentheses: greet(). This is called "calling" or "invoking" it. Each call runs the whole body from top to bottom. And here's the payoff: you can call it as many times as you want, from anywhere in your code — that's reusability in action. The parentheses are essential. Writing greet without them doesn't run anything; it just refers to the function itself as a value. Forgetting the () is an extremely common bug, and one that fails silently.

Function Expressions — functions stored in variables

// Declaration (the standard way):
function greet() { console.log("Hi"); }

// Expression — a function assigned to a variable:
const greet2 = function() {
    console.log("Hi");
};
greet2();      // called the same way

// Modern arrow function (coming in a later chapter):
const greet3 = () => console.log("Hi");

In JavaScript, functions are values — you can store one in a variable. That's a function expression: const greet2 = function() {...}. You call it exactly the same way, with greet2(). Why have two forms? Function expressions are useful when passing a function to another function (which you'll do a lot with events and array methods), and they behave differently with hoisting — a topic coming later in this group. For now, the function name() {} declaration is the clearest starting form. Note the semicolon after a function expression: it's an assignment statement.

Why Functions Matter — DRY code

// ✗ WITHOUT functions — repeated everywhere (WET code)
console.log("Total: " + (100 * 1.18));
console.log("Total: " + (250 * 1.18));
console.log("Total: " + (80 * 1.18));

// ✓ WITH a function — write the logic ONCE
function showTotal(price) {
    console.log("Total: " + (price * 1.18));
}
showTotal(100);
showTotal(250);
showTotal(80);
// Tax rate changed? Fix ONE line instead of hunting through the file.

Functions exist to eliminate repetition — the DRY principle ("Don't Repeat Yourself") you met in CSS best practices applies just as strongly here. When logic is written once inside a function, changing it means editing a single place. Beyond DRY, functions bring three more benefits: they give code a MEANINGFUL NAME (calculateGST() explains itself), they let you break a big problem into small manageable pieces, and they make testing easier. As programs grow, functions are what keep them understandable. Every professional codebase is built from them.

Exam Corner

Q: What is a function? A named, reusable block of code that performs a specific task.

Q: Does declaring a function run it? No — it only runs when you call it with name().

Q: How do you call a function? Write its name followed by parentheses: greet().

Q: What happens if you write greet without parentheses? Nothing runs — it just refers to the function as a value.

Q: What is a function expression? A function stored in a variable: const f = function() {...}.

Functions क्या हैं

Function code का reusable block है जो कोई खास काम करता है — आप इसे एक बार define करते हैं, फिर जब चाहें चलाते हैं. इसे recipe समझिए: आप steps एक बार लिख लेते हैं, फिर जब भी वह dish चाहिए उस recipe को follow करते हैं. या kitchen appliance सोचिए — आप हर बार बेकिंग के लिए mixer दोबारा नहीं बनाते; बस button दबाते हैं. Functions आपको logic के टुकड़े को नाम देने ("calculateTotal", "showMessage"), उसे अनगिनत बार reuse करने, और अपना code व्यवस्थित रखने देते हैं. ये पूरी JavaScript का सबसे ज़रूरी building block हैं.

Function Declare करना

function greet() {
    console.log("Hello!");
    console.log("Welcome to CodeKaFunda");
}

/*  function  greet  ()          { ... }
    keyword   naam   parameters   body   */

Function declaration के चार हिस्से हैं: function keyword, आपका चुना NAAM (camelCase में, जो बताए यह क्या करता है), parameters के लिए parentheses () की जोड़ी (यहां खाली — अगले chapter में cover करेंगे), और curly braces में body जिसमें चलने वाला code है. ज़रूरी: function declare करना उसे CHALATA नहीं. अंदर का code तैयार बैठा रहता है, कुछ नहीं करते जब तक आप उसे call न करें. यही अहम भेद beginners चूकते हैं — function लिखना recipe लिखने जैसा है; अभी कुछ पका नहीं.

Function Call करना — उसे चलाना

function greet() {
    console.log("Hello!");
}

greet();      // ← yeh function ko CALL (chalata) hai. Output: Hello!
greet();      // dobara call karo — reuse!
greet();      // aur phir

greet;        // ✗ parentheses BINA, kuch nahi hota!

Function चलाने को, उसका नाम लिखिए उसके बाद parentheses: greet(). इसे "calling" या "invoking" कहते हैं. हर call पूरी body ऊपर से नीचे चलाता है. और यहां फायदा है: आप इसे जितनी बार चाहें call कर सकते हैं, अपने code में कहीं से भी — यही reusability काम करते हुए है. Parentheses ज़रूरी हैं. greet बिना उनके लिखना कुछ नहीं चलाता; यह बस function को value के रूप में refer करता है. () भूलना बेहद common bug है, और ऐसा जो चुपचाप fail होता है.

Function Expressions — variables में रखे functions

// Declaration (standard tarika):
function greet() { console.log("Hi"); }

// Expression — variable me assign kiya function:
const greet2 = function() {
    console.log("Hi");
};
greet2();      // usi tarah call kiya

// Modern arrow function (baad ke chapter me):
const greet3 = () => console.log("Hi");

JavaScript में functions values हैं — आप एक को variable में रख सकते हैं. वही function expression है: const greet2 = function() {...}. आप इसे बिल्कुल उसी तरह call करते हैं, greet2() से. दो रूप क्यों? Function expressions तब उपयोगी हैं जब function को दूसरे function को pass करें (जो आप events और array methods के साथ बहुत करेंगे), और वे hoisting के साथ अलग व्यवहार करते हैं — इस group में आगे आने वाला विषय. अभी के लिए, function name() {} declaration सबसे साफ शुरुआती रूप है. Function expression के बाद semicolon ध्यान दीजिए: यह assignment statement है.

Functions क्यों ज़रूरी — DRY code

// ✗ Functions ke BINA — har jagah dohraya (WET code)
console.log("Total: " + (100 * 1.18));
console.log("Total: " + (250 * 1.18));
console.log("Total: " + (80 * 1.18));

// ✓ Function ke SAATH — logic EK BAAR likho
function showTotal(price) {
    console.log("Total: " + (price * 1.18));
}
showTotal(100);
showTotal(250);
showTotal(80);
// Tax rate badla? File me dhoondhne ke bajaye EK line theek karo.

Functions दोहराव मिटाने को हैं — DRY सिद्धांत ("Don't Repeat Yourself") जो आप CSS best practices में मिले, यहां उतनी ही मज़बूती से लागू है. जब logic function के अंदर एक बार लिखा हो, उसे बदलना मतलब एक जगह edit करना. DRY के अलावा, functions तीन और फायदे लाते हैं: वे code को SARTHAK NAAM देते हैं (calculateGST() खुद को समझाता है), वे बड़ी समस्या को छोटे संभालने लायक टुकड़ों में तोड़ने देते हैं, और testing आसान बनाते हैं. जैसे programs बढ़ते हैं, functions ही उन्हें समझने योग्य रखते हैं. हर professional codebase इन्हीं से बना है.

Exam Corner

Q: Function क्या है? Named, reusable code block जो कोई खास काम करता है.

Q: क्या function declare करना उसे चलाता है? नहीं — यह तभी चलता है जब आप name() से call करें.

Q: Function कैसे call करते हैं? उसका नाम लिखिए उसके बाद parentheses: greet().

Q: greet बिना parentheses लिखें तो क्या होता है? कुछ नहीं चलता — यह बस function को value के रूप में refer करता है.

Q: Function expression क्या है? Variable में रखा function: const f = function() {...}.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.