Functions are an essential part of JavaScript and allow developers to organize and reuse code efficiently. They encapsulate code blocks to perform specific tasks, making programs easier to maintain and more modular. This guide will cover various types of functions, their parameters, scopes, and more.

1. Function Parameters

Function parameters are the values passed to a function when it is invoked. These values are processed within the function to produce a result.

1.1 Default Parameters

Default parameters allow you to initialize function parameters with default values in case no argument or undefined is passed.

Example:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

greet(); // Output: Hello, Guest
greet('John'); // Output: Hello, John

1.2 Rest Parameters

Rest parameters allow you to represent an indefinite number of arguments as an array. This is useful when you don’t know how many arguments will be passed to the function.

Example:

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3)); // Output: 6

2. Arrow Functions

Arrow functions provide a concise way to define functions and have a different behavior for this than regular functions. They do not bind their own this value and are commonly used in callbacks.

Syntax:

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

Arrow functions are great for short and simple functions, but they don’t have their own this, arguments, or super.

3. IIFEs (Immediately Invoked Function Expressions)

An IIFE is a function that is executed immediately after it’s defined. It is often used to create private scopes and avoid polluting the global scope.

Syntax:

(function() {
  console.log('This is an IIFE!');
})();

IIFEs are commonly used in module patterns and can help protect variables from being accessed globally.

4. Arguments Object

The arguments object is an array-like object available within all non-arrow functions. It contains the values of the arguments passed to the function.

Example:

function showArgs() {
  console.log(arguments);
}

showArgs(1, 2, 3); // Output: [1, 2, 3]

While useful, it is often replaced by the use of rest parameters, which are more flexible and easier to use.

5. Scope and Function Stack

Scope determines the accessibility of variables in different parts of the code, while the function stack defines the order in which functions are called and executed.

5.1 Recursion

Recursion is a technique where a function calls itself until a base condition is met. It is often used for tasks that can be broken down into simpler, repeated tasks (e.g., calculating factorials or traversing trees).

Example:

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

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

5.2 Lexical Scoping

Lexical scoping means that the scope of a variable is determined by the physical location of that variable in the code at the time of writing. Inner functions can access variables from their outer (parent) functions.

Example:

function outer() {
  let outerVar = 'I am outside!';
  
  function inner() {
    console.log(outerVar); // Can access outerVar
  }
  
  inner();
}

outer(); // Output: I am outside!

5.3 Closures

A closure occurs when a function retains access to variables from its outer scope, even after that outer function has finished executing. This is powerful for creating private variables and functions.

Example:

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

let counter = makeCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

In this example, the inner function retains access to the count variable, even after the makeCounter function has returned.

6. Built-in Functions

JavaScript provides several built-in functions that are available globally. Some of the most commonly used built-in functions include:

• eval(): Evaluates a string of JavaScript code.
• parseInt(): Converts a string to an integer.
• parseFloat(): Converts a string to a floating-point number.
• isNaN(): Checks if a value is NaN (Not-a-Number).
• setTimeout(): Executes a function after a specified delay.
• setInterval(): Repeatedly calls a function at specified intervals.

Example:

let num = parseInt('100');
console.log(num); // Output: 100

setTimeout(() => {
  console.log('Executed after 2 seconds');
}, 2000);

let num = parseInt('100');
console.log(num); // Output: 100

setTimeout(() => {
  console.log('Executed after 2 seconds');
}, 2000);