Kenhuang Academy
  • English

      • JavaScript Functions

      Functions are fundamental building blocks in JavaScript, used to encapsulate reusable code. Functions can receive input parameters, perform specific tasks, and return results. Understanding the concept and usage of functions is crucial for writing modular, maintainable JavaScript code. In this chapter, we will learn in depth about functions in JavaScript.

      What is a Function

      A function is a reusable block of code that performs a specific task. Functions can receive input (parameters), process data, and return results. The main advantages of functions include:

      1. Code Reuse: Avoid writing the same code repeatedly
      2. Modularity: Break down complex problems into small, manageable parts
      3. Maintainability: Centralized modification affects all call sites
      4. Readability: Express code intent through function names

      Ways to Define Functions

      1. Function Declaration

      function greet(name) {
    return "Hello, " + name + "!";
}

// Call the function
console.log(greet("John")); // "Hello, John!"

      2. Function Expression

      const greet = function(name) {
    return "Hello, " + name + "!";
};

// Call the function
console.log(greet("Jane")); // "Hello, Jane!"

      3. Arrow Function - ES6

      const greet = (name) => {
    return "Hello, " + name + "!";
};

// Simplified syntax
const greetSimple = (name) => "Hello, " + name + "!";

// Single parameter can omit parentheses
const greetMinimal = name => "Hello, " + name + "!";

// Call the function
console.log(greet("Alice")); // "Hello, Alice!"

      4. Constructor Method

      const greet = new Function("name", "return 'Hello, ' + name + '!';");

console.log(greet("Bob")); // "Hello, Bob!"

      Components of a Function

      Function Name

      Function names are used to identify and call functions:

      function calculateSum(a, b) {
    return a + b;
}

// Function names should be descriptive
function getUserInfo() { /* ... */ }
function validateForm() { /* ... */ }
function formatDate() { /* ... */ }

      Parameters

      Parameters are the input values that functions receive:

      // Single parameter
function square(x) {
    return x * x;
}

// Multiple parameters
function add(a, b) {
    return a + b;
}

// No parameters
function getCurrentTime() {
    return new Date();
}

      Return Value

      Functions can return values to the caller:

      function multiply(a, b) {
    return a * b; // Return calculation result
}

function greet(name) {
    console.log("Hello, " + name + "!"); // No return value, returns undefined
}

const result = multiply(5, 3); // 15
const greeting = greet("John"); // undefined

      Function Invocation

      Basic Call

      function sayHello() {
    return "Hello!";
}

const message = sayHello(); // Call the function
console.log(message); // "Hello!"

      Call with Arguments

      function add(a, b) {
    return a + b;
}

const sum = add(5, 3); // Pass arguments
console.log(sum); // 8

      Method Call

      const calculator = {
    add: function(a, b) {
        return a + b;
    },
    
    multiply(a, b) { // ES6 shorthand
        return a * b;
    }
};

const result1 = calculator.add(5, 3); // 8
const result2 = calculator.multiply(4, 2); // 8

      Parameter Handling

      Default Parameters (ES6)

      function greet(name = "friend") {
    return "Hello, " + name + "!";
}

console.log(greet()); // "Hello, friend!"
console.log(greet("John")); // "Hello, John!"

      Rest Parameters - ES6

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

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

      Parameter Destructuring

      // Object destructuring parameters
function createUser({ name, age, email }) {
    return {
        name: name,
        age: age,
        email: email,
        createdAt: new Date()
    };
}

const user = createUser({
    name: "John",
    age: 25,
    email: "john@example.com"
});

// Array destructuring parameters
function processCoordinates([x, y]) {
    return {
        x: x,
        y: y,
        distance: Math.sqrt(x * x + y * y)
    };
}

const point = processCoordinates([3, 4]);
console.log(point.distance); // 5

      Function Scope

      Global Scope

      const globalVar = "Global variable";

function example() {
    console.log(globalVar); // Can access global variable
}

example();

      Function Scope

      function outer() {
    const outerVar = "Outer variable";
    
    function inner() {
        const innerVar = "Inner variable";
        console.log(outerVar); // Can access outer variable
        console.log(innerVar); // Can access inner variable
    }
    
    inner();
    // console.log(innerVar); // Error: Cannot access inner variable
}

outer();

      Block Scope (ES6)

      function example() {
    if (true) {
        const blockVar = "Block scope variable";
        let blockLet = "Block scope let variable";
        var functionVar = "Function scope variable"; // Function scope
    }
    
    // console.log(blockVar); // Error: Cannot access
    // console.log(blockLet); // Error: Cannot access
    console.log(functionVar); // Accessible
}

      Closure

      A closure is a function that can access variables from its outer scope:

      function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// Each closure has its own independent scope
const counter2 = createCounter();
console.log(counter2()); // 1
console.log(counter());  // 4

      Practical Applications of Closures

      // Module pattern
const userManager = (function() {
    let users = [];
    
    return {
        addUser: function(user) {
            users.push(user);
        },
        
        getUsers: function() {
            return users;
        },
        
        getUserCount: function() {
            return users.length;
        }
    };
})();

userManager.addUser("John");
userManager.addUser("Jane");
console.log(userManager.getUsers()); // ["John", "Jane"]
console.log(userManager.getUserCount()); // 2

      Higher-Order Functions

      Higher-order functions are functions that receive functions as arguments or return functions:

      Receiving Functions as Arguments

      function calculate(a, b, operation) {
    return operation(a, b);
}

function add(a, b) {
    return a + b;
}

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

console.log(calculate(5, 3, add));      // 8
console.log(calculate(5, 3, multiply)); // 15

      Returning Functions

      function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

      Immediately Invoked Function Expression (IIFE)

      IIFE is a function that is executed immediately after it is defined:

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

// IIFE with parameters
(function(name) {
    console.log("Hello, " + name + "!");
})("John");

// IIFE with return value
const result = (function(a, b) {
    return a + b;
})(5, 3);

console.log(result); // 8

      Recursive Functions

      Recursive functions are functions that call themselves:

      // Calculate factorial
function factorial(n) {
    if (n <= 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

// Fibonacci sequence
function fibonacci(n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

      The this Keyword in Functions

      The value of the this keyword depends on how the function is called:

      Global Context

      console.log(this); // window in browser, global in Node.js

      Object Method

      const person = {
    name: "John",
    greet: function() {
        return "Hello, I'm " + this.name;
    }
};

console.log(person.greet()); // "Hello, I'm John"

      this in Arrow Functions

      const person = {
    name: "Jane",
    greet: function() {
        // Regular function
        console.log("Regular function: " + this.name);
        
        // Arrow function
        const arrowFunction = () => {
            console.log("Arrow function: " + this.name);
        };
        
        arrowFunction();
    }
};

person.greet();
// Output:
// Regular function: Jane
// Arrow function: Jane

      Function Methods

      call() Method

      function greet(greeting, punctuation) {
    return greeting + ", I'm " + this.name + punctuation;
}

const person = { name: "John" };

const result = greet.call(person, "Hello", "!");
console.log(result); // "Hello, I'm John!"

      apply() Method

      function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum.apply(null, numbers);
console.log(result); // 6

      bind() Method

      function greet(greeting) {
    return greeting + ", I'm " + this.name;
}

const person = { name: "Jane" };
const boundGreet = greet.bind(person);

console.log(boundGreet("Hello")); // "Hello, I'm Jane"

      Best Practices for Functions

      1. Function Naming

      // Good naming: verb first, descriptive
function calculateTotal() { /* ... */ }
function validateForm() { /* ... */ }
function getUserInfo() { /* ... */ }
function formatDate() { /* ... */ }

// Poor naming
function doIt() { /* ... */ }
function process() { /* ... */ }
function handle() { /* ... */ }

      2. Function Length Control

      // Keep functions short, single responsibility
function calculateTax(income) {
    if (income <= 5000) return 0;
    if (income <= 10000) return (income - 5000) * 0.1;
    return 500 + (income - 10000) * 0.2;
}

// Decompose complex logic into multiple functions
function processOrder(order) {
    validateOrder(order);
    calculateTotal(order);
    applyDiscount(order);
    saveOrder(order);
}

      3. Parameter Handling

      // Use object parameters for multiple arguments
function createUser({ name, age, email, phone }) {
    // Parameter validation
    if (!name || !email) {
        throw new Error("Name and email are required");
    }
    
    return {
        name,
        age: age || 0,
        email,
        phone: phone || "",
        createdAt: new Date()
    };
}

      4. Error Handling

      function divide(a, b) {
    if (b === 0) {
        throw new Error("Cannot divide by zero");
    }
    return a / b;
}

try {
    const result = divide(10, 0);
} catch (error) {
    console.log("Error: " + error.message);
}

      Practical Examples

      Event Handler Functions

      // Generic event handler function
function createEventHandler(handler, context = null) {
    return function(event) {
        try {
            handler.call(context, event);
        } catch (error) {
            console.error("Event handling error:", error);
        }
    };
}

// Usage example
const button = document.getElementById("myButton");
const handleClick = createEventHandler(function(event) {
    console.log("Button clicked");
}, this);

button.addEventListener("click", handleClick);

      Data Processing Functions

      // Generic data processing pipeline
function createPipeline(...functions) {
    return function(data) {
        return functions.reduce((result, func) => func(result), data);
    };
}

// Data processing functions
function validate(data) {
    if (!data || typeof data !== "object") {
        throw new Error("Invalid data");
    }
    return data;
}

function transform(data) {
    return {
        ...data,
        processedAt: new Date(),
        processed: true
    };
}

function log(data) {
    console.log("Processing data:", data);
    return data;
}

// Create processing pipeline
const processData = createPipeline(validate, transform, log);

// Usage example
try {
    const result = processData({ name: "John", age: 25 });
    console.log("Processing result:", result);
} catch (error) {
    console.error("Processing failed:", error.message);
}

      Functional Programming Utilities

      // Functional programming utility functions
const utils = {
    // Map function
    map: function(array, transform) {
        const result = [];
        for (let i = 0; i < array.length; i++) {
            result.push(transform(array[i], i));
        }
        return result;
    },
    
    // Filter function
    filter: function(array, predicate) {
        const result = [];
        for (let item of array) {
            if (predicate(item)) {
                result.push(item);
            }
        }
        return result;
    },
    
    // Reduce function
    reduce: function(array, reducer, initialValue) {
        let accumulator = initialValue;
        for (let item of array) {
            accumulator = reducer(accumulator, item);
        }
        return accumulator;
    }
};

// Usage examples
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = utils.filter(numbers, n => n % 2 === 0);
console.log("Even numbers:", evenNumbers); // [2, 4, 6, 8, 10]

const squares = utils.map(numbers, n => n * n);
console.log("Squares:", squares); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

const sum = utils.reduce(numbers, (acc, n) => acc + n, 0);
console.log("Sum:", sum); // 55

      Summary

      Key points about JavaScript functions:

      1. Definition Methods: Function declaration, function expression, arrow function, constructor
      2. Components: Function name, parameters, return value, function body
      3. Invocation Methods: Basic call, method call, constructor call
      4. Parameter Handling: Default parameters, rest parameters, parameter destructuring
      5. Scope: Global scope, function scope, block scope
      6. Advanced Features: Closures, higher-order functions, recursion, IIFE
      7. this Keyword: Value of this under different invocation methods
      8. Function Methods: call(), apply(), bind()
      9. Best Practices: Naming conventions, length control, error handling

      Functions are the core of JavaScript programming, and mastering their use is crucial for writing high-quality JavaScript code. In the next chapter, we will learn about JavaScript scope.