Functions, Scope & this

JavaScript gives you three everyday ways to make a function, and they are not just style choices. A function declaration (function greet() {}) is a statement on its own line that creates a function and a binding with its name. A function expression (const greet = function () {}) creates a function as a value in the middle of another statement, usually an assignment. An arrow function (const greet = () => {}) is a shorter expression syntax that also changes how this, arguments and new behave.

The big practical difference between a declaration and an expression is hoisting. Before any line of a scope runs, the engine scans that scope and creates every binding declared in it. A function declaration is created complete — name and body — so you can call it above the line where it's written. A var is created too, but holding undefined; the function only gets assigned when execution reaches that line. let and const bindings are created but left uninitialised (the temporal dead zone, TDZ) until their line runs, and touching them before that throws.

greet(); // "Hello!"

function greet() {
  console.log("Hello!");
}

greet(); // TypeError: greet is not a function

var greet = function () {
  console.log("Hello!");
};

function outer() {
  const arrow = () => arguments[0];
  return arrow("arrow's own arg");
}
outer("outer's arg"); // "outer's arg"

const Arrow = () => {};
new Arrow();          // TypeError: Arrow is not a constructor
Arrow.prototype;      // undefined

const square = (n) => n * n;          // implicit return
const makeUser = (name) => ({ name }); // wrap object literals in ( )

JavaScript uses lexical (static) scope: what a variable refers to is decided by where the code is written, not where it's called from. Each function can see its own variables, then its parent's, and so on up to the global scope — the scope chain.

Scope is fixed when the code is parsed. When a function is created, it records a link to the scope it was written inside. When the function later runs and meets a name, the engine looks in the function's own scope first, then follows that recorded link outwards, one level at a time, and stops at the first match. If it reaches the global scope without a match, you get a ReferenceError. Lookups only go outwards — an outer function can never see an inner function's variables.

A good mental model is a set of nested boxes drawn on the source code. Code inside a box can see out through its walls to every box around it, but nobody can see in. Where a function is called from has nothing to do with which boxes surround it.

const planet = "Earth";

function country() {
  const nation = "Canada";
  function city() {
    const town = "Toronto";
    return `${town}, ${nation}, ${planet}`;
  }
  return city();
}

country();         // "Toronto, Canada, Earth"
console.log(town); // ReferenceError: town is not defined

const name = "global";

function outer() {
  const name = "outer";
  function inner() {
    console.log(name); // "outer" — looks up the chain where inner was *written*
  }
  return inner;
}

function caller() {
  const name = "caller";
  outer()(); // still "outer", not "caller"
}
caller();

A closure is a function together with the variables it could see when it was created. Normally a function's local variables disappear when the function returns. But if an inner function that uses those variables is still around — because it was returned, stored, or passed as a callback — JavaScript keeps those variables alive for as long as the inner function exists.

A good mental model: every function carries an invisible backpack holding the variables from the scope it was written in. Wherever the function goes, the backpack goes with it, and it can read and change what's inside.

function makeCounter() {
  let count = 0; // private — nothing outside can touch it

  return {
    increment: () => ++count,
    decrement: () => --count,
    get value() {
      return count;
    },
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
console.log(counter.value); // 2
console.log(counter.count); // undefined — truly private

const a = makeCounter();
const b = makeCounter();

a.increment();
a.increment();
b.increment();

console.log(a.value); // 2
console.log(b.value); // 1 — b has its own count

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

for (var i = 0; i < 3; i++) {
  ((j) => setTimeout(() => console.log(j), 0))(i);
}

An IIFE (Immediately Invoked Function Expression) runs as soon as it's defined. It creates a private scope so variables don't leak into the global namespace.

It exists because of how scripts used to work. Before ES2015 there was no let, const or modules, and every var or function declaration at the top level of a <script> became a property of window, shared with every other script on the page. Two libraries that both declared var config silently overwrote each other. The only thing that created a new scope was a function, so the trick was: write a function, call it immediately, and never give it a name — its variables live and die inside it, and nothing leaks out.

The parentheses around the function are not decoration. A statement that starts with the keyword function is parsed as a declaration, so function () {}() is a SyntaxError: a declaration needs a name, and even function foo() {}() fails because a declaration can't be called in place. Wrapping it in ( ) makes the parser read it as an expression that produces a function value, which the trailing () then calls.

(function () {
  let a = 10;
  console.log(a); // 10
})();

console.log(a); // ReferenceError: a is not defined

// Arrow and async versions
(() => { /* ... */ })();
(async () => {
  const data = await fetch("/api").then((r) => r.json());
})();

const BankModule = (function () {
  let balance = 0; // private

  function log(msg) { // private helper
    console.log(`[bank] ${msg}`);
  }

  return {
    deposit(amount) {
      balance += amount;
      log(`deposited ${amount}`);
    },
    getBalance() {
      return balance;
    },
  };
})();

BankModule.deposit(100);
BankModule.getBalance(); // 100
BankModule.balance;      // undefined

this in a regular function is decided at call time, by how the function is called. Check the rules in this order:

1. new binding — new Foo() → this is the brand-new object.
2. Explicit binding — fn.call(obj), fn.apply(obj), fn.bind(obj) → this is obj.
3. Implicit binding — obj.fn() → this is the object before the dot.
4. Default binding — plain fn() → undefined in strict mode, globalThis in sloppy mode.

Arrow functions ignore all four rules and use this from the scope they were written in.

Think of this as a hidden parameter that every regular function receives. Ordinary parameters are filled from the argument list; this is filled from the call site — the expression that does the calling. That is the opposite of normal variables, which are lexical (see Lexical scope). It works this way so one function can be shared by many objects: a single method on a prototype serves every instance, and this tells it which instance it's working for on this particular call.

So never ask "where was this function written?" to find this. Ask "how is it being called, right now?" and walk down the four rules. Note that ES modules and class bodies are always in strict mode, so in modern code default binding gives undefined.

function whoAmI() {
  return this?.label;
}

const obj = { label: "obj", whoAmI };
const other = { label: "other" };

whoAmI();                   // undefined — default binding (strict mode)
obj.whoAmI();               // "obj"     — implicit
obj.whoAmI.call(other);     // "other"   — explicit beats implicit

obj.bound = whoAmI.bind(other);
obj.bound();                // "other"   — a bound function ignores the dot

function Point() {
  this.label = "point";
}
const BoundPoint = Point.bind(other);
const p = new BoundPoint();
p.label;                    // "point"   — new beats bind
other.label;                // "other"   — bind's object untouched

const user = {
  name: "Rohit",
  regular() {
    return this.name;
  },
  arrow: () => this?.name, // `this` of the module/global scope, not user
};

user.regular();        // "Rohit"   (implicit)
user.arrow();          // undefined (lexical)

const fn = user.regular;
fn();                  // undefined / TypeError — lost its object (default binding)
fn.call({ name: "X" }); // "X" (explicit)

Before ES2015, every function had its own this, so a callback inside a method got a different this from the method around it — whatever the caller of the callback chose. The workarounds were var self = this; before the callback, or .bind(this) on it. Arrow functions fix this by not having a this binding at all: inside an arrow, this is looked up through the scope chain like any other variable, and it finds the this of the nearest enclosing regular function (or the module/script top level).

The mental model: an arrow borrows this from the function it was created in, as it was for that particular call. It doesn't lock onto "the object" — it inherits whatever this the surrounding function had when the arrow was made.

Arrow functions are perfect inside methods, where you want the callback to share the method's this:

const timer = {
  seconds: 0,
  start() {
    // Old way: const self = this; function () { self.seconds++ }
    setInterval(() => {
      this.seconds++; // `this` is timer, inherited from start()
    }, 1000);
  },
};
timer.start();

const counter = {
  count: 0,
  inc: () => this.count++, // ❌ `this` is not counter
};

button.addEventListener("click", function () {
  this.classList.toggle("on"); // ✅ `this` is the button
});
button.addEventListener("click", () => {
  this.classList.toggle("on"); // ❌ `this` is the outer scope
});

All three let you choose what this is.

They are methods on Function.prototype, so every regular function has them. They exist because this is normally chosen by the call site, and sometimes the call site is not what you want: you want to run a function against an object it isn't attached to, or hand a method to code that will call it later without its object. call and apply mean "run this function now, as if it were a method of that object". bind means "give me a new version of this function that is permanently glued to that object" (and, optionally, to some leading arguments).

function introduce(greeting, punctuation) {
  return `${greeting}, I'm ${this.name}${punctuation}`;
}
const rohit = { name: "Rohit" };

introduce.call(rohit, "Hi", "!");      // "Hi, I'm Rohit!"
introduce.apply(rohit, ["Hello", "."]); // "Hello, I'm Rohit."

const sayHi = introduce.bind(rohit, "Hey");
sayHi("?");                             // "Hey, I'm Rohit?"

Use a method from one object on another object, without copying it.

This works because in JavaScript a "method" is just a function stored in a property. The function isn't owned by the object, and this is decided per call. So any function that only touches this.something will work on any object that has those properties — "if it has a firstName and a lastName, it can be named". Borrowing means calling that function with call or apply and a different this, without copying it onto the other object, inheriting from anything, or mutating anything.

const person1 = {
  firstName: "John",
  lastName: "Doe",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};
const person2 = { firstName: "Jane", lastName: "Smith" };

person1.fullName.call(person2); // "Jane Smith"

// 1. A generic function shared by many objects
function calculateArea() {
  return this.length * this.width;
}
calculateArea.call({ length: 10, width: 5 }); // 50
calculateArea.call({ length: 7, width: 3 });  // 21

// 2. Array methods on array-like objects (arguments, NodeList)
function oldSchool() {
  return Array.prototype.slice.call(arguments); // today: Array.from(arguments) or [...arguments]
}

// 3. A reliable type check
Object.prototype.toString.call([]);   // "[object Array]"
Object.prototype.toString.call(null); // "[object Null]"

Before ES2015 there was no way to pass an array as separate arguments — apply was the trick.

Functions like Math.max and Array.prototype.push accept any number of arguments but not an array: Math.max([5, 1, 9, 3]) converts the array to the string "5,1,9,3" and returns NaN. Since apply takes its arguments as an array and unpacks them into the call, it was borrowed purely for that unpacking, with this set to whatever the function needed. ES2015's spread syntax does the unpacking directly at the call site, works with any iterable (not just arrays), and also works with new.

const nums = [5, 1, 9, 3];
Math.max.apply(null, nums); // 9
Math.max(...nums);          // 9 — spread does the same today

const arr1 = [1, 2];
const arr2 = [3, 4];
Array.prototype.push.apply(arr1, arr2); // same as arr1.push(...arr2)

bind is for the moment you hand a function to code you don't control — a timer, the DOM, a framework, a library — that will call it later in its own way. You can't change their call site, so you fix this (and optionally some leading arguments) in advance. The second use, pre-filling arguments, is called partial application.

// 1. Keeping `this` for callbacks
class Clock {
  constructor() {
    this.ticks = 0;
    this.tick = this.tick.bind(this); // bind once in the constructor
  }
  tick() {
    this.ticks++;
  }
  start() {
    setInterval(this.tick, 1000); // safe to pass around
  }
}

// 2. Partial application — pre-fill arguments
function log(level, message) {
  console.log(`[${level}] ${message}`);
}
const warn = log.bind(null, "WARN");
warn("Disk almost full"); // [WARN] Disk almost full

// 3. Event handlers that need the component instance
button.addEventListener("click", this.handleClick.bind(this));

A higher-order function takes a function as an argument, returns a function, or both. map, filter, reduce, forEach, setTimeout and addEventListener are all higher-order functions.

This is possible because functions in JavaScript are first-class values: you can store them in variables, put them in arrays and objects, pass them to other functions and return them, just like numbers or strings. A higher-order function is like a template with a hole in it. The higher-order function handles the how and when (loop over items, wait 100 ms, run on click), and the function you pass in fills the hole with the what. That split lets you write the loop or the timing logic once and reuse it for any behaviour.

function greet(name) {
  return function (message) {
    console.log(`${message}, ${name}`);
  };
}

const greetAlice = greet("Alice");
greetAlice("Hello");   // Hello, Alice
greetAlice("Goodbye"); // Goodbye, Alice

// Takes a function
function repeat(n, action) {
  for (let i = 0; i < n; i++) action(i);
}
repeat(3, console.log); // 0 1 2

function withLogging(fn) {
  return function (...args) {
    const result = fn.apply(this, args);
    console.log(`${fn.name}(${args.join(", ")}) → ${result}`);
    return result;
  };
}

const add = (a, b) => a + b;
const loggedAdd = withLogging(add);
loggedAdd(2, 3); // logs "add(2, 3) → 5", returns 5

Currying turns a function of several arguments into a chain of functions that each take one argument.

Instead of add(2, 3) you write add(2)(3): each call takes one argument and returns a new function waiting for the next, until the last argument arrives and the real work is done. The earlier arguments are remembered by closures. (It's named after the logician Haskell Curry.)

The mental model is a form filled in one field at a time: every partly filled form is itself a reusable template. add(5) is "an adder with the first field set to 5" — you can keep it and use it many times. That's the real point: currying lets you create specialised functions from general ones, and it produces one-argument functions, which is exactly the shape compose and pipe need.

function add(a) {
  return function (b) {
    return a + b;
  };
}

const addFive = add(5);
addFive(3);  // 8
add(2)(3);   // 5

const addArrow = (a) => (b) => a + b; // same thing

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return (...more) => curried.apply(this, [...args, ...more]);
  };
}

const volume = curry((l, w, h) => l * w * h);
volume(2)(3)(4);   // 24
volume(2, 3)(4);   // 24
volume(2)(3, 4);   // 24

const multiply = (a) => (b) => a * b;
const withTax = multiply(1.18);

[100, 250].map(withTax); // [118, 295]

compose(f, g, h)(x) means f(g(h(x))) — functions run right to left. pipe is the same idea left to right, which many people find easier to read.

Composition builds a bigger function out of smaller ones: the output of one becomes the input of the next. It exists so you can write small, single-purpose, easily tested functions and snap them together, instead of nesting calls like subtract10(double(add1(x))), which read inside-out, or creating a temporary variable for every step.

Picture an assembly line. pipe lists the stations in the order the item visits them. compose lists them the way maths writes f ∘ g — outermost first — which is why it runs right to left. Either way, every station must take one value and return one value for the next station, which is why curried functions slot in so well.

const add1 = (n) => n + 1;
const double = (n) => n * 2;
const subtract10 = (n) => n - 10;

const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

compose(subtract10, double, add1)(3); // (3 + 1) * 2 - 10 = -2
pipe(add1, double, subtract10)(3);    // same: -2

const map = (fn) => (arr) => arr.map(fn);
const filter = (fn) => (arr) => arr.filter(fn);
const sum = (arr) => arr.reduce((a, b) => a + b, 0);

const totalOfEvenSquares = pipe(
  filter((n) => n % 2 === 0),
  map((n) => n * n),
  sum,
);
totalOfEvenSquares([1, 2, 3, 4]); // 20

They use the same ... syntax but do opposite jobs: rest collects many values into an array, spread expands an iterable into individual values.

Which one you're looking at depends on where the dots are. Where values are being received — a parameter list, or the left side of a destructuring pattern — ... is rest: "gather whatever is left into one array (or object)". Where values are being supplied — call arguments, an array literal, an object literal — ... is spread: "tip this collection out into separate items". Rest replaced the old arguments object; spread replaced most uses of apply, concat, slice() and Object.assign. Array spread and rest arrived in ES2015, object spread and rest in ES2018.

// Rest: gather arguments
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4); // 10

function tag(first, ...others) {} // rest must be the last parameter

// Spread: expand
const defaults = { theme: "light", lang: "en" };
const options = { theme: "dark" };
const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];          // [1, 2, 3, 4]
const copy = [...a];                    // shallow copy
const chars = [..."hey"];               // ["h", "e", "y"]
const merged = { ...defaults, ...options }; // later keys win
Math.max(...combined);                  // 4

Unpack values from arrays and properties from objects into variables.

You write a pattern on the left that mirrors the shape of the data on the right, and JavaScript copies the matching pieces into variables. Arrays are matched by position (using the iterator, so any iterable works); objects are matched by property name, so order doesn't matter. It replaces repetitive lines like const name = user.name; and makes function signatures self-documenting — a parameter like { title, items } tells you exactly what the function reads.

// Arrays — by position
const [first, second, ...rest] = [10, 20, 30, 40];
const [, , third] = [1, 2, 3];        // skip items
let x = 1, y = 2;
[x, y] = [y, x];                      // swap without a temp variable

// Objects — by name
const user = { id: 7, name: "Rohit", address: { city: "Toronto" } };
const { name, age = 30 } = user;           // default when undefined
const { name: userName } = user;           // rename
const { address: { city } } = user;        // nested
const { id, ...withoutId } = user;         // rest of the properties

// In parameters — very common in React
function render({ title, items = [] }) {
  return `${title}: ${items.length}`;
}
render({ title: "Todos" });