Function Expressions and Advanced Function Concepts

In earlier chapters, you learned about:

• What functions are

• How to define and call them

• Arrow functions

• Parameters and return values

Now it’s time to go deeper.
JavaScript treats functions as first-class citizens, which means:

• You can store functions inside variables

• You can pass functions as arguments

• You can return functions from other functions

• You can use functions inside objects

Understanding these concepts will help you write more powerful and professional JavaScript code.

1. Function Expression

Instead of defining a function with function name() {}, you can store a function inside a variable.

Syntax:

const myFunc = function() {
    // code
};

Example:

const greet = function() {
    console.log("Hello from function expression");
};

greet();

Output:

Hello from function expression

This is very common in modern JavaScript.

Function Declaration vs Function Expression

Function Declaration:

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

Function Expression:

const hello = function() {
    console.log("Hello");
};

Key Difference: Hoisting

• Function declarations are hoisted ? they can be called before their definition.

• Function expressions are not hoisted ? you must define them first.

Example:

hello(); // Works

function hello() {
    console.log("Hi");
}

But this will NOT work:

hello(); // Error

const hello = function () {
    console.log("Hi");
};

2. Anonymous Functions

A function with no name is called an anonymous function.

Example:

const show = function() {
    console.log("Anonymous function");
};

Anonymous functions are often used in event listeners and callbacks.

3. Passing Functions as Arguments (Callbacks)

You can pass a function to another function.

Example:

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

function execute(func) {
    func();
}

execute(greet);

Output:

Hello!

This is called a callback function.

4. Returning Functions

A function can return another function.

function outer() {
    return function() {
        console.log("Inside returned function");
    };
}

let inner = outer();
inner();

Output:

Inside returned function

This is important for closures and advanced JavaScript patterns.

5. Functions Inside Objects (Methods)

A function inside an object is called a method.

let student = {
    name: "Riya",
    sayHello() {
        console.log("Hello " + this.name);
    }
};

student.sayHello();

Output:

Hello Riya

6. Default Parameters (Advanced Usage)

You can assign default values dynamically.

function total(price, tax = price * 0.1) {
    return price + tax;
}

console.log(total(100));

Output:

110

7. Rest Parameters (Unlimited Arguments)

If your function needs unlimited arguments, use ...rest.

function add(...numbers) {
    let sum = 0;
    for (let n of numbers) {
        sum += n;
    }
    return sum;
}

console.log(add(1, 2, 3, 4));

Output:

10

8. Nested Functions

You can define a function inside another function.

function outer() {
    let message = "Hello";

    function inner() {
        console.log(message);
    }

    inner();
}

outer();

Output:

Hello

This leads to the concept of closures, which you will learn later.

9. Immediately Invoked Function Expression (IIFE)

A function that runs immediately when defined.

(function() {
    console.log("IIFE executed");
})();

Output:

IIFE executed

Used to avoid polluting the global scope.

10. Arrow Function Expressions

You can convert any function expression into an arrow function.

Example:

const add = (a, b) => a + b;

console.log(add(5, 3));

Output:

8

Arrow functions are shorter and easy to read.

Real-Life Example: Callback for Login

function login(username, callback) {
    console.log("User:", username);
    callback();
}

login("Aman", function() {
    console.log("Login successful");
});

Output:

User: Aman
Login successful

Example Program (Complete)

const multiply = function(a, b) {
    return a * b;
};

function calculate(x, y, operation) {
    return operation(x, y);
}

let result = calculate(5, 4, multiply);

console.log(result);

Output:

20

Common Mistakes Beginners Make

1. Trying to call a function expression before defining it

2. Forgetting return in multi-line arrow functions

3. Confusing arguments vs parameters

4. Treating function expressions like declarations

5. Not understanding callback order

Practice Tasks (Do It Yourself)

1. Write a function expression that prints your name.

2. Create a callback-based function that prints a message after a function call.

3. Create a function that returns another function.