JavaScript Functions

Example: Using a Function Expression

The following example uses a function expression to calculate the total price of a product after applying a tax rate. This demonstrates how function expressions can be used in practical, real-world scenarios.

const calculateTotalPrice = function(price, taxRate) {
    return price + (price * taxRate);
};

// Call the function expression
let totalAmount = calculateTotalPrice(100, 0.1);
console.log(totalAmount);
            

Explanation:

• The function is assigned to the variable calculateTotalPrice.
• It accepts two parameters: price and taxRate.
• The function calculates the tax and adds it to the original price.
• The function is invoked using the variable name.
• The final result is stored in totalAmount and logged to the console.

1. apply()

The apply() method invokes a function by explicitly setting the value of this. Unlike call(), it accepts arguments as an array.

This method is useful when arguments are already available in array form or when working with dynamic data.

function displayProfile(role, country) {
    console.log(this.name + " is a " + role + " from " + country);
}

const user = { name: "Alex Johnson" };

displayProfile.apply(user, ["Software Developer", "Canada"]);
            

2. bind()

The bind() method creates a new function with a permanently bound this value.

Unlike call() and apply(), the bound function is not executed immediately. Instead, it can be called later.

function welcomeUser() {
    console.log("Welcome, " + this.username);
}

const account = { username: "jordan_dev" };

const welcomeJordan = welcomeUser.bind(account);
welcomeJordan();
            

3. call()

The call() method invokes a function immediately while explicitly defining the value of this.

Arguments are passed individually, making call() ideal when the number of arguments is fixed.

function showStatus(status) {
    console.log(this.name + " is currently " + status);
}

const employee = { name: "Emma" };

showStatus.call(employee, "online");
            

4. toString()

The toString() method returns the complete source code of a function as a string.

This method is mainly used for debugging, logging, or inspecting function definitions.

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

console.log(calculateSum.toString());
            

Arrow Functions

Arrow functions were introduced in ES6 to provide a shorter and more readable syntax for writing functions. Unlike traditional functions, arrow functions do not create their own this context, which makes them especially useful in callbacks and functional programming.

const functionName = (parameters) => expression;
            

Example: Arrow Function vs Normal Function

const prices = [25, 40, 15, 60];

// Using a normal function
const discountedPrices1 = prices.map(function (price) {
    return price - (price * 0.1);
});
console.log("Normal function:", discountedPrices1);

// Using an arrow function
const discountedPrices2 = prices.map((price) => price - (price * 0.1));
console.log("Arrow function:", discountedPrices2);
            

In this example, the prices array contains product prices. The map() method is used to calculate a 10% discount for each price.

Both the regular function and the arrow function return the same result. However, the arrow function is more concise and easier to read, making it the preferred choice for short callback functions.

Example: Using a Callback Function

In the example below, one function performs a calculation, while another function (the callback) handles how the result is displayed.

function displayResult(result) {
    console.log("The final result is:", result);
}

function calculateTotal(price, tax, callback) {
    const total = price + (price * tax);
    callback(total);
}

// Pass displayResult as a callback function
calculateTotal(100, 0.15, displayResult);
            

The final result is: 115
            

Explanation:

• The calculateTotal function performs a price calculation.
• It accepts a third parameter called callback, which is a function.
• After calculating the total amount, it executes the callback function.
• The displayResult function is passed as the callback.
• This approach allows the logic and output behavior to remain separate.

Callback functions make JavaScript more flexible by allowing one function to decide when and how another function should be executed.

Example: Anonymous Function as a Callback

In this example, an anonymous function is passed directly to the forEach() method to process each array element.

const numbers = [10, 20, 30, 40];

numbers.forEach(function (num) {
    console.log(num * 2);
});
            

The forEach() method loops through each value in the numbers array. Instead of defining a separate named function, an anonymous function is written directly inside the method call.

This anonymous function receives each element as num, doubles it, and logs the result. Because the function is used only once, giving it a name is unnecessary.

Anonymous functions help keep code short, readable, and focused, especially when the logic is simple and used in one place.

Example: IIFE for Data Privacy

// Global variable
let userName = "Global User";

(function () {
    let userName = "Private User";
    console.log("Inside IIFE:", userName);
})();

console.log("Outside IIFE:", userName);
            

In this example, the variable userName is declared both globally and inside an IIFE. Even though they share the same name, they exist in different scopes.

The IIFE runs immediately and logs "Private User", but the variable inside it is not accessible outside. After the IIFE finishes, the global variable remains unchanged.

This demonstrates how IIFEs help protect variables, prevent naming conflicts, and keep code clean—especially in large JavaScript applications.

Example: Nested Function with Closure

function createDiscount(discountPercent) {
    function applyDiscount(price) {
        return price - (price * discountPercent / 100);
    }
    return applyDiscount;
}

const tenPercentOff = createDiscount(10);
console.log(tenPercentOff(500));
            

In this example, the outer function createDiscount takes a discount percentage as input and defines an inner function applyDiscount.

The inner function uses the discountPercent variable from the outer function to calculate the final price. Even after createDiscount finishes execution, the inner function still remembers the discount value.

When tenPercentOff(500) is called, it applies a 10% discount to the price and returns 450. This demonstrates how nested functions and closures help create reusable and flexible logic.