JavaScript Functions

In JavaScript, Functions are the primary building blocks of the application logic. They are not merely subroutines; they are First-Class Objects, meaning they can be assigned to variables, passed as arguments to other functions, and returned as values. This flexibility allows JavaScript to support multiple programming paradigms, including imperative, object-oriented, and functional programming.

1. Defining Functions: Four Key Patterns

How you define a function in JavaScript changes its behavior, specifically regarding hoisting and the binding of the this keyword.

A. Function Declarations

The traditional way to define a function. These are hoisted, meaning they can be called before they are defined in the code.

function greet(name) {
  return `Hello, ${name}!`;
}

B. Function Expressions

Here, a function is assigned to a variable. These are not hoisted, offering better control over the execution flow.

const add = function(a, b) {
  return a + b;
};

C. Arrow Functions (ES6+)

A concise syntax that does not have its own this, arguments, or super. They are “lexically scoped,” inheriting this from the surrounding context.

const multiply = (a, b) => a * b;

D. Generator Functions

Special functions that can be paused and resumed using the yield keyword, returning an iterator object.

function* count() {
  yield 1;
  yield 2;
}

2. Scope and the Closure Mechanism

Scope determines the visibility of variables. JavaScript uses Lexical Scoping, meaning the scope is determined by the position of variables within the nested function blocks.

The Power of Closures

A Closure is the combination of a function and the lexical environment within which that function was declared. This allows a function to “remember” and access variables from its outer scope even after the outer function has finished executing.

function createCounter() {
  let count = 0; // Private state
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Closures are essential for data privacy, factory functions, and maintaining state in asynchronous callbacks.

6. Functional Composition and Currying

Because functions are first-class citizens, you can treat them like data to build complex pipelines.

Currying

This is the process of converting a function that takes multiple arguments into a sequence of functions that each take a single argument.

const curriedAdd = (a) => (b) => a + b;
const addFive = curriedAdd(5);
console.log(addFive(10)); // 15

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    return cache[key] || (cache[key] = fn(...args));
  };
};