Chapter 3: JavaScript Functions
Tags: javascript
Published: 2023-05-30 12:57:21

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.
    
    
    ```javascript
    function greet(name) {
      console.log("Hello, " + name);
    }
    
    greet("Alice"); // Hello, Alice
    ```
    
-   **Function Expression:** Defines a function as part of an expression.
    
    
    ```javascript
    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.


```javascript
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.


```javascript
// 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:


```javascript
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.


```javascript
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.


```javascript
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.