Functions & Closures

Functions are fundamental building blocks in JavaScript. They encapsulate reusable code, enable abstraction, and form the basis of many advanced patterns. A function is a block of code designed to perform a particular task. JavaScript functions are first-class objects, meaning they can be assigned to variables, passed as arguments, returned from other functions, and have properties. Understanding functions deeply is crucial for mastering JavaScript.

Function declarations define named functions. They are hoisted, meaning they can be called before they appear in the code. Syntax: function functionName(parameters) { /* code */ }. Example: function add(a, b) { return a + b; }. Declarations are great for named functions that need to be accessible throughout their scope. They improve code readability and are ideal for recursion since the function name is available within the function body.

Function expressions define functions as part of an expression. They can be named or anonymous. Example: const multiply = function(a, b) { return a * b; }. Unlike declarations, expressions are not hoisted. They are assigned to variables and invoked via the variable name. Named function expressions allow recursion and stack traces. Function expressions enable callbacks, closures, and many functional programming patterns.

Arrow functions provide a concise syntax. Example: const double = x => x * 2;. They have no own this, arguments, or super bindings. They inherit this from enclosing lexical scope. Arrow functions cannot be used as constructors. Single-expression functions implicitly return the value. Multi-line bodies require braces and explicit return. They are ideal for callbacks and functional programming.

A closure is a function that retains access to variables from its enclosing scope even after the outer function has returned. Example: function outer() { let count = 0; return function inner() { count++; return count; }; }. The inner function closes over count. Closures enable data privacy, function factories, and partial application. They are essential for modules, callbacks, and maintaining state.

IIFEs are functions that run immediately after definition. Syntax: (function() { /* code */ })(). They create a new scope, preventing variable pollution. Useful for initialization, encapsulation, and avoiding naming conflicts. Example: (function() { const private = 'secret'; console.log(private); })(). IIFE with arrow: (() => console.log('arrow'))(). Common in modular patterns before ES6 modules.

this refers to the object that owns the current function execution context. In global scope, it's the global object (window in browsers). In object methods, it's the object. In functions, it depends on how the function is called. Arrow functions inherit this from outer scope. Issues arise when callbacks lose context. this is determined at call time, not definition time, which is crucial for understanding JavaScript.

call() invokes a function with a given this and arguments passed individually. Example: func.call(context, arg1, arg2). apply() is similar but takes arguments as an array. bind() returns a new function with this permanently bound. Example: const bound = func.bind(context). Essential for callback functions where this needs to be controlled. Used in method borrowing, currying, and maintaining context in asynchronous code.

Higher-order functions take functions as arguments, return functions, or both. Examples: Array.map(), filter(), reduce() are higher-order functions. Custom example: function repeat(n, action) { for (let i = 0; i < n; i++) action(i); }. They enable composition, abstraction, and functional programming patterns. Used extensively in event handling, promises, and array manipulations.