Arrow Functions

const outer = function() {
  const x = 5;
  const inner = () => console.log(x);
  return inner;
};

const fn = outer();
fn();

undefined
5
The output is `5`. This code demonstrates the creation of a closure using an arrow function. A closure is formed when a function retains access to variables from its lexical scope even after the outer function has finished executing. In this example, `outer` defines a variable `x` with value 5 and returns the arrow function `inner`, which references `x`. When `outer()` is called, it executes and returns `inner`, which is assigned to `fn`. Even though `outer` has completed execution, the returned arrow function (`fn`) still maintains access to the `x` variable through closure. When `fn()` is subsequently called, it can access the `x` variable from its original lexical environment, outputting `5`. This behavior is the same for both arrow functions and regular functions, but arrow functions are often preferred for closures because of their concise syntax and lexical `this` binding. Closures are powerful in JavaScript, enabling patterns like data encapsulation, partial application, and maintaining state between function calls.
ReferenceError: x is not defined
TypeError: inner is not a function