JavaScript Functions - Complete Learning Material

1. Why Functions Exist

Without functions, developers repeat the same logic multiple times. Functions allow code reuse by writing the logic once and calling it whenever required.

// 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);

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

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

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();

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

3. Parameters vs Arguments

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

greetPerson("Avinash");
greetPerson("Maaike");

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

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

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));

If only one expression exists, braces and the return keyword may be omitted (implicit return).

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

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

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

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

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

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);

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);

function testScope(){
    if(true){
        var usingVar="function-scoped";
        let usingLet="block-scoped";
    }

    console.log(usingVar);
    // console.log(usingLet);
}

let globalVar="I am global";

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

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");
})();

9. Recursion

A recursive function calls itself. Every recursive function must contain a base case.

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

countdown(3);

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();

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();

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);

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

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 such as IIFE, recursion, nested functions, anonymous functions, and callbacks.