JavaScript — Functions

Code you can name

A function bundles steps under a name so you can run them anywhere, any number of times:

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

greet();   // runs the bundle
greet();   // and again — same code, no copy-paste

Without functions, every repetition is a copy-paste invitation; fix a bug in three copied blocks? You'll miss one.

Parameters — inputs

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

greet("Ada");     // Hello, Ada!
greet("Grace");   // Hello, Grace!

name is a parameter (the placeholder); "Ada" is an argument (the actual value).

Multiple parameters, comma-separated:

function add(a, b) {
    return a + b;
}
console.log(add(2, 3));        // 5
console.log(add(10, -4));      // 6

Return values — outputs

return hands a result back to whoever called:

function celsiusToF(c) {
    return c * 9 / 5 + 32;
}

const today = celsiusToF(28);
console.log(today);            // 82.4
console.log(celsiusToF(100));  // 212

The difference that confuses beginners:

function showSum(a, b) {
    console.log(a + b);      // displays… but gives nothing back
}

const x = showSum(1, 2);     // prints 3, but x === undefined!
const y = add(1, 2);         // y === 3 ✓

Displaying ≠ returning. return also ends the function immediately — code below it never runs.

function checkAge(age) {
    if (age < 18) return "denied";
    return "welcome";        // unreachable if the first return fired
}

Default parameters

function greet(name = "friend") {
    console.log(`Hello, ${name}!`);
}
greet();          // Hello, friend!
greet("Ada");     // Hello, Ada!

Arrow functions — the compact modern form

// classic
const double = function (n) { return n * 2; };

// arrow
const double = (n) => n * 2;          // implicit return, no braces needed

// multiple params / statements
const clamp = (n, min, max) => {
    if (n < min) return min;
    if (n > max) return max;
    return n;
};

Same machinery, shorter syntax. You'll see arrows everywhere in modern code (and constantly in React).

Functions calling functions

Programs are function pyramids:

const area = (w, h) => w * h;

function paintWall(width, height, litersPerSqm) {
    const total = area(width, height);
    return Math.ceil(total * litersPerSqm);
}

paintWall(5, 3, 0.25);   // 4

Small single-purpose functions compose into readable programs.

Scope in one paragraph

Variables born inside a function exist only inside it:

function secret() {
    const pin = 1234;
}
console.log(pin);   // ReferenceError — pin never left the room

Parameters behave the same. This privacy is a feature: functions can't trample each other's internals.

Mini Practice

1. Write max3(a, b, c) returning the largest of three
2. Convert showSum to a proper returning function; store and log its result
3. Add a default parameter to a greeting function; call with and without arguments
4. Rewrite two classic functions as arrow functions
5. Build isEven(n) returning boolean, then use it inside a loop printing only even numbers from 1–20

Next: objects →