Chapter 3: JavaScript Functions

Functions are a fundamental building block in JavaScript. They allow you to encapsulate a piece of code and call it from other parts of your program, potentially multiple times.

Defining Functions

In JavaScript, a function can be defined in a few ways. Here are the two most common methods:

• Function Declaration: Also known as a function statement, it defines a function with the specified parameters.
  

  function greet(name) {
    console.log("Hello, " + name);
  }
  
  greet("Alice"); // Hello, Alice
  

• Function Expression: Defines a function as part of an expression.
  

  let greet = function(name) {
    console.log("Hello, " + name);
  };
  
  greet("Alice"); // Hello, Alice
  

Function Scope and Hoisting

In JavaScript, each function creates its own scope. Variables declared inside a function are not accessible from outside the function. This is called function scope.

function greet() {
  let message = "Hello, Alice";
  console.log(message); // Hello, Alice
}

greet();
console.log(message); // Uncaught ReferenceError: message is not defined

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase, before the code has been executed.

Function declarations are hoisted completely, but for variable declarations, only the names are hoisted, not their assignments.

// Function declaration
hoistedFunction(); // Outputs: "This function has been hoisted."

function hoistedFunction() {
  console.log("This function has been hoisted.");
}

// Variable declaration
console.log(hoistedVariable); // Outputs: undefined

var hoistedVariable = "This variable has been hoisted.";

Higher Order Functions

In JavaScript, functions are first-class objects, meaning they can be stored in variables, passed as arguments to other functions, and returned from other functions. A higher-order function is a function that takes another function as an argument, returns a function, or both.

Here's an example of a higher-order function:

function greet(name) {
  console.log("Hello, " + name);
}

function formalGreet(greet, name) {
  console.log("Good evening,");
  greet(name);
}

formalGreet(greet, "Alice"); // Good evening, Hello, Alice

Closures and Callbacks

A closure is a function that has access to its own scope, the outer function’s scope, and the global scope.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('outerVariable:', outerVariable);
    console.log('innerVariable:', innerVariable);
  }
}

const newFunction = outerFunction('outside');
newFunction('inside'); // Logs: outerVariable: outside, innerVariable: inside

In this case, innerFunction is a closure that is accessing its own scope (innerVariable), the outer function’s scope (outerVariable), and the global scope.

A callback is a function passed as an argument to another function. This technique allows a function to call another function.

function greet(name) {
  console.log("Hello, " + name);
}

function processUserInput(callback) {
  let name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greet);

In this case, greet is a callback function. It's passed as an argument to processUserInput and called inside that function.