Function

Explanation

Functions in JavaScript can be written four ways: function declarations (function name() {}), function expressions (const fn = function() {}), arrow functions (const fn = () => {}), and methods (properties of objects). Function declarations are hoisted — they can be called before they appear in code. Function expressions and arrow functions are not hoisted. Arrow functions have two key differences from regular functions: they don't have their own this (they inherit this from the enclosing lexical scope — critical for event handlers and class methods), and they can't be used as constructors. For most purposes, arrow functions are the modern default; use regular functions when you need a dynamic this (as an object method that refers to the object, or as a constructor). Pure functions are a concept from functional programming: a function is pure if (1) it always returns the same output for the same inputs, and (2) it has no side effects (doesn't modify external state, doesn't make API calls, doesn't mutate arguments). Pure functions are predictable, testable, and safe to cache. React components are designed to be pure. Impure functions that mutate state or have side effects are fine — but you should be deliberate about when and where impurity occurs. First-class functions: in JavaScript, functions are values — you can assign them to variables, pass them as arguments, and return them from other functions. This is what enables callbacks, higher-order functions (map, filter, reduce), and function composition. Understanding this is the prerequisite to understanding closures and functional patterns.

Code Example

// Function syntax options in JavaScript
function add(a, b) { return a + b; }   // declaration (hoisted)
const multiply = (a, b) => a * b;      // arrow (not hoisted)

// Default parameters
function greet(name = 'World') {
  return `Hello, ${name}!`;
}

// Rest parameters & spread
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// Pure function: same inputs → same output, no side effects
const double = x => x * 2;

// Impure: reads external state, has side effects
let total = 0;
function addToTotal(n) { total += n; } // mutates external state

// First-class: functions as values
const operations = { add, multiply };
const applyOp = (op, a, b) => op(a, b); // takes function as arg
console.log(applyOp(operations.multiply, 3, 4)); // 12

// this in arrow vs regular function
const obj = {
  value: 42,
  getArrow: () => this.value,    // undefined — inherits outer this
  getRegular() { return this.value; }  // 42 — dynamic this
};

Why It Matters for Engineers

Functions are the primary abstraction in programming. Whether you're writing a 10-line utility or designing a 100,000-line system, you're composing functions. Understanding pure vs impure functions, first-class functions, and how this binding works in arrow vs regular functions lets you write correct, predictable code and debug the function-related bugs that AI frequently introduces. The "this" problem is one of JavaScript's most notorious sources of bugs: event handlers that lose their this context, class methods passed as callbacks that don't bind correctly, arrow functions in class bodies that behave differently from prototype methods. Knowing the rules eliminates an entire class of bugs.