JavaScript: Functions

Functions in JavaScript are blocks of reusable code that can be defined, called by name, and executed on-demand. They can accept input parameters, perform specific tasks, and optionally return a value. Functions are first-class objects in JavaScript, meaning they can be assigned to variables, passed as arguments, and returned as values. They enable modular, maintainable, and DRY (Don't Repeat Yourself) programming.

1. Function Declaration: A function is defined using the function keyword, followed by the function name, a list of parameters in parentheses, and a code block in curly braces.

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

2. Function Expression: A function can also be defined as an expression, where the function is assigned to a variable. Function expressions can be named or anonymous.

• Named Function Expression:

javascriptCopy code
let add = function addNumbers(a, b) {
  return a + b;
};

• Anonymous Function Expression:

javascriptCopy code
let add = function(a, b) {
  return a + b;
};

3. Arrow Functions: Introduced in ES6, arrow functions are a more concise way to create function expressions. They are especially useful for short functions and when using the this keyword.

• Without parameters:

javascriptCopy code
let greet = () => {
  console.log("Hello, World!");
};

• With one parameter:

javascriptCopy code
let square = x => {
  return x * x;
};

• With multiple parameters:

javascriptCopy code
let add = (a, b) => {
  return a + b;
};

4. Calling Functions: Functions are invoked by their name, followed by parentheses containing the arguments (if any).

javascriptCopy code
let sum = add(10, 20); // 30

5. Parameters and Arguments: Functions can accept input values called parameters. When calling a function, the values passed to the function are called arguments.

• Default Parameters: You can set default values for parameters in case they are not provided when calling the function.

javascriptCopy code
function multiply(a, b = 1) {
  return a * b;
}

let result = multiply(5); // 5, since b has a default value of 1

6. Return Values: Functions can return a value using the return keyword, followed by the value or expression to be returned. If a function doesn't have a return statement, it returns undefined by default.

javascriptCopy code
function greet() {
  return "Hello, World!";
}

let greeting = greet(); // "Hello, World!"

7. Scope: Functions have their own scope, which determines the visibility and lifetime of variables. Variables declared within a function are local to that function and not accessible outside of it. Variables declared outside a function are global and can be accessed from any part of the code, including within functions.

javascriptCopy code
let globalVar = "I am global!";

function checkScope() {
  let localVar = "I am local!";
  console.log(globalVar); // "I am global!"
  console.log(localVar); // "I am local!"
}

checkScope();
console.log(globalVar); // "I am global!"
console.log(localVar); // ReferenceError: localVar is not defined

8. Closures: A closure is a function that has access to its own scope, the outer function's scope, and the global scope, even after the outer function has completed execution. Closures are useful for creating private variables and maintaining state.

javascriptCopy code
function outer() {
  let count = 0;

  return function inner() {
    count++;
    return count;
  };
}

let counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In this example, the inner function has access to the count variable from the outer function, even after the outer function has completed execution. Each time the counter function is called, it increments the count variable and returns the updated value.

9. Higher-Order Functions: Functions that accept other functions as arguments, return functions as values, or both, are called higher-order functions. They are useful for creating more abstract and reusable code.

• Functions as arguments:

javascriptCopy code
function greet(name, formatFunction) {
  let formattedName = formatFunction(name);
  console.log(`Hello, ${formattedName}!`);
}

function uppercase(name) {
  return name.toUpperCase();
}

function lowercase(name) {
  return name.toLowerCase();
}

greet("Alice", uppercase); // "Hello, ALICE!"
greet("Bob", lowercase); // "Hello, bob!"

• Functions as return values:

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

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

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

10. Recursion: A function that calls itself is said to be recursive. Recursive functions are an alternative to loops for solving certain problems, especially those that involve hierarchical or nested data structures.

javascriptCopy code
function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

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

In this example, the factorial function calls itself with progressively smaller values of n until it reaches the base case (n === 0), at which point it starts returning values that are then multiplied together to produce the final result.

Understanding functions in JavaScript is essential for writing clean, maintainable, and modular code. By mastering function declaration, expressions, arrow functions, scope, closures, higher-order functions, and recursion, you can create efficient and reusable code for a wide range of tasks and applications.