JavaScript Functions

🔵 1

Why Functions Exist

Without a function

let width1 = 5, height1 = 10;
let area1 = width1 * height1;
console.log(area1);

let width2 = 7, height2 = 3;
let area2 = width2 * height2;
console.log(area2);

›50 21

Using a function

function calculateArea(width, height) {
    return width * height;
}

let areaOne = calculateArea(5, 10);
let areaTwo = calculateArea(7, 3);
console.log(areaOne);
console.log(areaTwo);

›50 21

Same result, but the multiplication logic is written once and reused — if you needed to change how area is calculated, you'd only edit one place.

🟣 2

Declaring and Calling a Function

A function declaration defines the function. Nothing happens until it is invoked (called).

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

greet();

›Hello, JavaScript!

Declaration: function greet(){ }
Invocation: greet();
Use meaningful camelCase names such as calculateSum().

🟢 3

Parameters vs Arguments

Parameter	Argument
Placeholder variable in the function definition.	Actual value supplied during the function call.

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

greetPerson("CSMC");
greetPerson("Monkeys");

›Hello, CSMC! Hello, Monkeys!

Default parameters

function multiply(a, b = 1) {
    console.log(a * b);
}

multiply(5);
multiply(5, 3);

›5 15

multiply(5) uses the default b = 1 since no second argument was passed.

🟠 4

Arrow Functions

Arrow functions provide a shorter syntax for writing functions.

const square = (x) => {
    return x * x;
};
console.log(square(4));

const cube = x => x * x * x;
console.log(cube(3));

›16 27

💡 If only one expression exists, braces and return can be omitted — cube above uses this implicit return.

🩷 5

Spread (...) vs Rest (...)

Spread Operator	Rest Operator
Expands an array into individual arguments.	Collects multiple arguments into a single array.

Spread — expanding an array into arguments

function sumThree(a, b, c) {
    console.log(a + b + c);
}

const numbers = [1, 2, 3];
sumThree(...numbers);

›6

Rest — collecting arguments into an array

function sumAll(...values) {
    let total = 0;
    for (let value of values)
        total += value;
    console.log(total);
}

sumAll(1, 2);
sumAll(5, 10, 15);

›3 30

🔷 6

Returning Values

The return statement sends a value back to the caller and immediately stops execution.

function addNumbers(x, y) {
    return x + y;
}

let result = addNumbers(10, 5);
console.log(result);

›15

⚪ 7

Scope — Where Variables Live

Variables declared inside a function are local and cannot be accessed outside the function.

function showLocal() {
    let localVar = "I am local";
    console.log(localVar);
}

showLocal();
// console.log(localVar);   // ❌ ReferenceError — localVar doesn't exist here

›I am local

var (function-scoped) vs let (block-scoped)

function testScope() {
    if (true) {
        var usingVar = "function-scoped";
        let usingLet = "block-scoped";
    }
    console.log(usingVar);
    // console.log(usingLet);   // ❌ ReferenceError — usingLet is block-scoped to the if
}
testScope();

›function-scoped

Global scope

let globalVar = "I am global";

function showGlobal() {
    console.log(globalVar);
}
showGlobal();

›I am global

Functions can always read variables declared outside them (global scope) — the restriction only goes one direction: outer code can't reach into a function's local variables.

🔴 8

IIFE (Immediately Invoked Function Expression)

An IIFE executes immediately after it is defined and helps avoid polluting the global scope.

(function () {
    console.log("This runs immediately");
})();

›This runs immediately

ℹ️ The wrapping parentheses turn the function into an expression, and the trailing () calls it right away — nothing else in the file can reference this function by name.

🟡 9

Recursion

A recursive function calls itself. Every recursive function must contain a base case so it eventually stops.

function countdown(n) {
    if (n <= 0) {
        console.log("Done!");
    } else {
        console.log(n);
        countdown(n - 1);
    }
}

countdown(3);

›3 2 1 Done!

Here n <= 0 is the base case. Without it, countdown would call itself forever and crash with a stack overflow.

🟢 10

Nested Functions

A function declared inside another function can access variables from its outer function.

function outer() {
    let outerVar = "from outer";

    function inner() {
        console.log("Inner sees: " + outerVar);
    }

    inner();
}

outer();

›Inner sees: from outer

🔵 11

Anonymous Functions

An anonymous function has no name and is usually stored in a variable.

const greetAnon = function () {
    console.log("Hello from anonymous function");
};

greetAnon();

›Hello from anonymous function

🩷 12

Callback Functions

A callback is a function passed to another function to be executed later.

function doTwice(action) {
    action();
    action();
}

function sayHello() {
    console.log("Hello");
}

doTwice(sayHello);

›Hello Hello

Async callback with setTimeout

setTimeout(function () {
    console.log("This runs after 1000 ms");
}, 1000);

›This runs after 1000 ms

⏱️ This output appears roughly 1 second later than everything before it — setTimeout doesn't pause the program; it schedules the callback and lets the rest of the code keep running in the meantime.

📋 Summary

Chapter Summary

Functions improve code reuse and readability.
Understand declarations, invocations, parameters, and arguments.
Use arrow functions for concise syntax.
Know the difference between spread and rest operators.
Understand return values and variable scope.
Learn advanced concepts: IIFE, recursion, nested functions, anonymous functions, and callbacks.