JavaScript Functions and Scope

Functions

A function is a code block that performs a series of tasks. Understanding JavaScript functions and scope allows you to effectively manage the scope of variables and write modularized code.

function functionName(parameter1, parameter2, ...) {
  // Function body
  // ...
  return result;
}

In the code above, functionName is the name of the function, and parameter1, parameter2, etc., are the parameters passed to the function.

The function body is written inside curly braces {}, and the result that the function should return is specified using the return keyword.

 

Function Scope

Scope refers to the visibility or accessibility of variables and functions. In JavaScript, scope is determined by functions and is divided into global scope and local scope.

Global Scope

Variables defined outside of any function belong to the global scope.

Variables declared in the global scope can be accessed from anywhere.

let globalVariable = 'Global variable';

 

Local Scope

Variables defined inside a function belong to the local scope of that function.
Variables declared in the local scope can only be accessed within the function.

function myFunction() {
  let localVariable = 'Local variable';
  console.log(globalVariable); // Accessible to global variable
  console.log(localVariable); // Accessible to local variable
}

 

console.log(globalVariable); // Accessible to global variable
console.log(localVariable); // Error: Cannot access local variable

In the example above, globalVariable is declared in the global scope, so it can be accessed from anywhere. On the other hand, localVariable is a local variable declared within the myFunction function, so it cannot be accessed from outside the function.

Closures and Scope

A closure is a combination of a function and the scope in which it was declared.
By using closures, variables declared within a function can be accessed and manipulated from the outside.

function outerFunction() {
  let outerVariable = 'Outer variable';

  function innerFunction() {
    console.log(outerVariable); // Accessible to outer variable
  }

  return innerFunction;
}

let closure = outerFunction();
closure(); // Output: 'Outer variable'

In the example above, innerFunction is declared inside outerFunction and accesses outerVariable.
outerFunction returns innerFunction, and the returned function is assigned to the closure variable. When closure is called, it can access outerVariable.

 

Utilizing Closures

Below is an example that demonstrates using closures to access and manipulate external variables.

// Define the counter function
function counter() {
  let count = 0;

  // Define the increment function
  function increment() {
    count++;
    console.log(count);
  }

  // Define the decrement function
  function decrement() {
    count--;
    console.log(count);
  }

  // Return an object with the increment and decrement functions
  return {
    increment: increment,
    decrement: decrement
  };
}

// Call the counter function to create a counterInstance object
let counterInstance = counter();

counterInstance.increment(); // Output: 1
counterInstance.increment(); // Output: 2
counterInstance.decrement(); // Output: 1

The counter function defines two inner functions, increment and decrement. These functions have access to the external variable count. The counter function returns an object with these two functions as properties.

By calling the counter function and assigning the returned object to the counterInstance variable, we can then invoke the increment and decrement functions. These functions, as closures, can access the external variable count and increment or decrement its value, printing the updated value.

When the code runs, you can see that each call to increment increases the count value, and each call to decrement decreases it.