JavaScript Functions & Closures Cheat Sheet: Scope, Arrows, this & IIFE

Functions are values in JavaScript. Declarations are hoisted; expressions and arrows are not. A closure is a function plus the lexical environment it closed over — how you hide count in a factory or keep event handlers attached to the right variables. this is not lexical except in arrows.

This JavaScript cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Declaration: function sum(a, b) { return a + b; } hoisted in its scope.
• Expression: const sum = function (a, b) { ... } or arrow. Not hoisted as a usable function.
• Arrow: No own this, arguments, or prototype. Best for callbacks.
• Default / rest: function f(x = 1, ...rest).
• Closure: Inner function reads outer let. Each factory call gets its own variables.
• this: Methods: the object before the dot. Bind if you pass the method as a callback.
• IIFE: (function () { ... })() still useful to wrap a non-module script.
• Pure: Same inputs → same output, no DOM/network. Easier to test.

Copy-paste examples

Factory closure and a bound-safe method

Each makeToggle has its own on. The arrow in delayLog captures label from the call.

function makeToggle(initial = false) {
  let on = initial;
  return {
    value: () => on,
    flip: () => { on = !on; return on; },
  };
}
function delayLog(label, ms) {
  setTimeout(() => console.log(label), ms);
}
const t = makeToggle();
t.flip();
console.log(t.value()); // true

Common mistakes

• Loops with var and setTimeout sharing one i — use let or bind the value.
• Passing obj.method as a listener and losing this (use arrow wrapper or bind).
• Closures capturing a huge DOM node and leaking memory if you never remove the listener.
• Deep arrow nesting that should have been named functions.

FAQ

1. Is a closure a memory leak? Not by itself. It leaks if it holds large objects longer than you think (caches, detached DOM, intervals you never clear).

1. Arrow vs function for methods? Use function (or a method shorthand) when you want this to be the object. Use arrows for callbacks inside those methods.

1. What is a higher-order function? A function that takes or returns functions: map, debounce, middleware.

Related JavaScript cheat sheets

• Javascript Cheat Sheet 2026
• Javascript Array Methods Cheat Sheet
• Javascript String Methods Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.