Long Method

in progressThis lesson is still being built - content, demos, and checkpoints may change before release.

Long method

Loading interactive demo…

A method from a small fixture program, printed on the stage, and McCabe's cyclomatic complexity walking it: every statement once, one more path for every if, loop, and short-circuit operator, with the nesting depth beside it. The refactor knob applies the scenario's refactorings one step at a time (a guard clause, an extracted method) and the counter runs again on the result. The refactorings are the library's own toy forms: they move statements and keep their ids, so a line keeps its place across steps.Take the tour, or press and explore. Legend:

The panel beside the stage is the real CyclomaticComplexity class from the published library executing in your browser, with the current line highlighted.

The line being counted, and its own depth guide on the rail.
Lines nested past the depth limit.
A guard clause: a check that exits early instead of wrapping what follows.
The band on lines that moved into an extracted method.
Lines the walk has not reached yet.

complexity counts the paths through the watched method and says what it was before refactoring, nesting the depth of the current line and the deepest seen, lines the printed length, verdict the two numbers against the limits, line what the tapped line is. The gutter writes the running count beside each decision. Tap a line to read its depth and the decisions inside it.

The code panel shows bare executable code by default. The bar above it names the file (hover the name for the full published path); options holds the toggles: comments, the tracer instrumentation that produces this visualization, and verbose names for the terse identifiers (display only: the default is the byte-exact published file). The view switch adds plain-English narration: both interleaves it with the code, pseudo shows only the pseudocode. hide code collapses the panel; the rail it leaves behind brings it back.

Keys: Space play/pause · ←/→ step · Home/End jump · R reset · F fullscreen · G guided tour

Two numbers. Cyclomatic complexity counts the independent paths through a method: start at one and add one for every if, every loop, and every && or || inside a test, since each short-circuit is a decision of its own. Nesting depth counts the blocks that enclose a statement. A method is long when either is over its limit: many paths need many tests, and deep nesting makes the reader hold every enclosing condition in mind at once.

Why decisions, not lines. A hundred straight-line statements are one path and read top to bottom. Ten lines with five nested ifs are six paths and read like a maze. Length is the symptom; the count is the cause.

A guard clause changes one number. Rewriting if (ok) { body } else { throw } as if (!ok) { throw } followed by body keeps the decision and drops the nesting by one for everything that was inside. The count is unchanged; the depth falls.

Extract Method moves paths, it does not remove them. A block that moves into a helper takes its decisions with it, and the call that replaces it is one more statement on one path. The watched method's count drops by exactly the helper's count minus one; the sum across both is the original plus one. The system is as complex as it was, but each piece is now small enough to test and name.

The limits are thresholds, not laws. Move the limit knob and only the verdict moves. McCabe suggested ten, and the NIST report that followed allowed more with a written reason. The flat shipping method here is over the limit with no nesting at all, and the arrow is under it while four levels deep: the two numbers catch different shapes.

What the stage does not show. The refactorings here are the library's toy forms: a guard clause only when one branch is a lone exit, an extraction only when nothing flows back out of the block. Real tools handle return values and shared locals; the counting is the same.

Choices worth reading closely in the implementation (the code panel's comments and tracer checkboxes reveal the full published file):

The walk is one recursive method. walk visits each statement once, outermost first, and recurses into the blocks it opens; enter and leave have one emit site each, so the tracer's picture of the walk is the walk.
A decision is a single call. decide increments the count, records the point, and emits branch, whether the decision is a statement or an operator inside a test; the two kinds are told apart by the kind in the payload.
An else-if ladder stays at its depth. A branch whose else holds exactly one if is walked at the same depth, since the reader does not step in; the printer draws it as } else if for the same reason.
Thresholds are constructor arguments. The limit knob rebuilds the detector; the walk and the count are identical, only the verdict's payload changes.
Nothing in the class knows about the stage. The fixture program is plain data from the same library, and the refactorings are separate classes that return a new program; the detector just counts whatever it is given.

A method grows one reasonable line at a time until nobody can hold it in mind. The number that names the problem came first: in 1976 Thomas McCabe counted the independent paths through a program's control-flow graph and proposed a limit. The smell got its name two decades later, when Kent Beck and Martin Fowler catalogued the shapes of code that want refactoring, Long Method first among them, with Extract Method as the cure. This lesson runs the count on a small program and then on the refactored one.

1976Thomas J. McCabe - 'A Complexity Measure' in IEEE Transactions on Software Engineering defines cyclomatic complexity as the number of linearly independent paths through a program's control-flow graph, and suggests ten as a limit.source
1996Arthur Watson and Thomas McCabe - NIST Special Publication 500-235, 'Structured Testing', ties the count to testing: one test per independent path covers them all, and recommends the limit of ten with written justification above it.source
1999Martin Fowler, with Kent Beck - Refactoring: Improving the Design of Existing Code catalogues Long Method among the code smells and Extract Method, Replace Nested Conditional with Guard Clauses, and Decompose Conditional among the cures.source
2018Martin Fowler - The second edition renames the smell Long Function and keeps the advice: a function too long to read is extracted until each part says what it does.source

Used today

Lint gates - Linters and quality servers fail a build when a function's complexity passes a threshold, often the classic ten.
Test planning - The count is the number of tests needed to cover every independent path once: basis path testing.
Code review - Deep nesting and a long count are the two numbers a reviewer reaches for when a function reads badly.

Did you know

Kent Beck coined 'code smell' while helping Martin Fowler with the Refactoring book; Fowler's account is that a smell is a surface sign that usually corresponds to a deeper problem, and the word was chosen because it is quick to detect and not always a fault.source
McCabe's number is the cyclomatic number of the control-flow graph, edges minus nodes plus twice the connected components; for one method with one entry and one exit that collapses to decisions plus one, which is what this lesson counts.source
The deeply nested shape this lesson calls the arrow has a name from a 2006 Coding Horror post, 'Flattening Arrow Code', whose first fix is the guard clause: check for the failure case and get out.source
Fowler's rule of thumb in the second edition is not a line count but a comment: when you feel the need to explain what a block does, extract it into a function named for the explanation.source

method

refactororiginal

limit10 paths

complexity: 11
nesting: 5 deep
lines: 37
verdict: long method
line: not a statement

cyclomatic-complexity.ts

import type { Tracer } from "../trace";import { CodePrinter } from "./code-printer";import type { SmellDetector } from "./detector";import type { ClassDecl, Expr, Method, Stmt } from "./program";import { ProgramQuery } from "./program-query";/** What added a path: a branching statement, or an `&&` / `||` inside a test. */export type DecisionKind = "if" | "for-each" | "while" | "and" | "or";export interface DecisionPoint {  /** The statement the decision belongs to. */  readonly nodeId: string;  readonly kind: DecisionKind;  readonly depth: number;}export interface ComplexityThresholds {  /** Above this many paths the method is called long (McCabe suggested 10). */  readonly complexity: number;  /** Deeper than this many nested blocks the method is called long. */  readonly depth: number;}export interface ComplexityReport {  readonly method: string;  /** Decision points plus one: the number of independent paths through the method. */  readonly complexity: number;  /** The deepest nesting any statement sits at; 0 for a straight line. */  readonly maxDepth: number;  /** Statements at every depth. */  readonly statements: number;  readonly decisions: readonly DecisionPoint[];  /** Over either threshold. */  readonly smelly: boolean;}interface Counters {  complexity: number;  maxDepth: number;  statements: number;  readonly decisions: DecisionPoint[];}export const DEFAULT_THRESHOLDS: ComplexityThresholds = { complexity: 10, depth: 3 };/** * McCabe's cyclomatic complexity, with nesting depth beside it. The walk * visits every statement once, outermost first: a plain statement is a * step along the current path; an `if`, a loop, or an `&&` / `||` inside a * test opens one more independent path, so the count starts at one and * grows by one per decision. Depth is how many blocks enclose a * statement; an else-if ladder stays at its `if`'s depth, since the * reader does not step in. A method is long when either number is over * its threshold: many paths need many tests, and deep nesting needs the * reader to hold every enclosing condition in mind at once. * * Time: O(n) over n statements and expression nodes. Space: O(depth). */export class CyclomaticComplexity implements SmellDetector<Method, ComplexityReport> {  constructor(    readonly thresholds: ComplexityThresholds = DEFAULT_THRESHOLDS,    private readonly tracer?: Tracer,  ) {}  analyze(method: Method): ComplexityReport {    const state: Counters = { complexity: 1, maxDepth: 0, statements: 0, decisions: [] };    // ▸ a method begins: one path so far, depth zero    this.tracer?.emit("method", { name: method.name, params: method.params.map((p) => p.name), statements: ProgramQuery.count(method.body) });    this.walk(method.body, 0, state);    const smelly = state.complexity > this.thresholds.complexity || state.maxDepth > this.thresholds.depth;    // ▸ the method's numbers against the limits    this.tracer?.emit("verdict", { name: method.name, complexity: state.complexity, maxDepth: state.maxDepth, statements: state.statements, smelly, thresholdComplexity: this.thresholds.complexity, thresholdDepth: this.thresholds.depth });    return { method: method.name, complexity: state.complexity, maxDepth: state.maxDepth, statements: state.statements, decisions: state.decisions, smelly };  }  /** Every method of the class in declaration order, each through `analyze`, so one trace walks the whole class. */  analyzeClass(cls: ClassDecl): readonly ComplexityReport[] {    return cls.methods.map((method) => this.analyze(method));  }  /**   * The decision points in a body and everything nested in it, by the   * same untraced walk `analyze` counts with: one per if and loop, one   * per `&&` / `||` in a test. For one statement, pass it as a body of one.   */  static decisionsIn(body: readonly Stmt[]): readonly DecisionPoint[] {    const state: Counters = { complexity: 1, maxDepth: 0, statements: 0, decisions: [] };    new CyclomaticComplexity().walk(body, 0, state);    return state.decisions;  }  private walk(body: readonly Stmt[], depth: number, state: Counters): void {    for (const stmt of body) {      state.statements++;      state.maxDepth = Math.max(state.maxDepth, depth);      // ▸ the walk reaches a statement at its depth      this.tracer?.emit("enter", { nodeId: stmt.id, kind: stmt.kind, depth, complexity: state.complexity });      if (stmt.kind === "if" || stmt.kind === "while" || stmt.kind === "for-each") {        this.decide(stmt.id, stmt.kind, depth, state);        if (stmt.kind !== "for-each") for (const op of this.operators(stmt.test)) this.decide(stmt.id, op, depth, state);        for (const block of this.blocks(stmt, depth)) this.walk(block.body, block.depth, state);        // ▸ a block closes: back up one level        this.tracer?.emit("leave", { nodeId: stmt.id, kind: stmt.kind, depth, maxDepth: state.maxDepth });      }    }  }  private decide(nodeId: string, kind: DecisionKind, depth: number, state: Counters): void {    state.complexity++;    state.decisions.push({ nodeId, kind, depth });    // ▸ a decision: one more independent path through the method    this.tracer?.emit("branch", { nodeId, kind, complexity: state.complexity, depth });  }  /** The blocks a statement opens with the depth each is walked at: an else-if chain continues at the same depth. */  private blocks(stmt: Stmt, depth: number): readonly { body: readonly Stmt[]; depth: number }[] {    if (stmt.kind === "if") {      const chained = CodePrinter.chainedIf(stmt);      const blocks = [{ body: stmt.then, depth: depth + 1 }];      if (stmt.else) blocks.push({ body: stmt.else, depth: chained ? depth : depth + 1 });      return blocks;    }    return ProgramQuery.children(stmt).map((body) => ({ body, depth: depth + 1 }));  }  /** The `&&` and `||` operators inside a test, left to right; each is a short-circuit decision. */  private operators(expr: Expr): readonly ("and" | "or")[] {    const ops: ("and" | "or")[] = [];    ProgramQuery.visitExpr(expr, (e) => {      if (e.kind === "binary" && e.op === "&&") ops.push("and");      if (e.kind === "binary" && e.op === "||") ops.push("or");    });    return ops;  }}

complexity =: 11
maxDepth =: 5

process: 11 paths; nested 5 deep. Still a long method.

import type { Tracer } from "../trace";import { CodePrinter } from "./code-printer";import type { SmellDetector } from "./detector";import type { ClassDecl, Expr, Method, Stmt } from "./program";import { ProgramQuery } from "./program-query";/** What added a path: a branching statement, or an `&&` / `||` inside a test. */export type DecisionKind = "if" | "for-each" | "while" | "and" | "or";export interface DecisionPoint { /** The statement the decision belongs to. */ readonly nodeId: string; readonly kind: DecisionKind; readonly depth: number;}export interface ComplexityThresholds { /** Above this many paths the method is called long (McCabe suggested 10). */ readonly complexity: number; /** Deeper than this many nested blocks the method is called long. */ readonly depth: number;}export interface ComplexityReport { readonly method: string; /** Decision points plus one: the number of independent paths through the method. */ readonly complexity: number; /** The deepest nesting any statement sits at; 0 for a straight line. */ readonly maxDepth: number; /** Statements at every depth. */ readonly statements: number; readonly decisions: readonly DecisionPoint[]; /** Over either threshold. */ readonly smelly: boolean;}interface Counters { complexity: number; maxDepth: number; statements: number; readonly decisions: DecisionPoint[];}export const DEFAULT_THRESHOLDS: ComplexityThresholds = { complexity: 10, depth: 3 };/** * McCabe's cyclomatic complexity, with nesting depth beside it. The walk * visits every statement once, outermost first: a plain statement is a * step along the current path; an `if`, a loop, or an `&&` / `||` inside a * test opens one more independent path, so the count starts at one and * grows by one per decision. Depth is how many blocks enclose a * statement; an else-if ladder stays at its `if`'s depth, since the * reader does not step in. A method is long when either number is over * its threshold: many paths need many tests, and deep nesting needs the * reader to hold every enclosing condition in mind at once. * * Time: O(n) over n statements and expression nodes. Space: O(depth). */export class CyclomaticComplexity implements SmellDetector<Method, ComplexityReport> { constructor( readonly thresholds: ComplexityThresholds = DEFAULT_THRESHOLDS, private readonly tracer?: Tracer, ) {} analyze(method: Method): ComplexityReport { const state: Counters = { complexity: 1, maxDepth: 0, statements: 0, decisions: [] }; // ▸ a method begins: one path so far, depth zero this.tracer?.emit("method", { name: method.name, params: method.params.map((p) => p.name), statements: ProgramQuery.count(method.body) }); this.walk(method.body, 0, state); const smelly = state.complexity > this.thresholds.complexity || state.maxDepth > this.thresholds.depth; // ▸ the method's numbers against the limits this.tracer?.emit("verdict", { name: method.name, complexity: state.complexity, maxDepth: state.maxDepth, statements: state.statements, smelly, thresholdComplexity: this.thresholds.complexity, thresholdDepth: this.thresholds.depth }); return { method: method.name, complexity: state.complexity, maxDepth: state.maxDepth, statements: state.statements, decisions: state.decisions, smelly }; } /** Every method of the class in declaration order, each through `analyze`, so one trace walks the whole class. */ analyzeClass(cls: ClassDecl): readonly ComplexityReport[] { return cls.methods.map((method) => this.analyze(method)); } /** * The decision points in a body and everything nested in it, by the * same untraced walk `analyze` counts with: one per if and loop, one * per `&&` / `||` in a test. For one statement, pass it as a body of one. */ static decisionsIn(body: readonly Stmt[]): readonly DecisionPoint[] { const state: Counters = { complexity: 1, maxDepth: 0, statements: 0, decisions: [] }; new CyclomaticComplexity().walk(body, 0, state); return state.decisions; } private walk(body: readonly Stmt[], depth: number, state: Counters): void { for (const stmt of body) { state.statements++; state.maxDepth = Math.max(state.maxDepth, depth); // ▸ the walk reaches a statement at its depth this.tracer?.emit("enter", { nodeId: stmt.id, kind: stmt.kind, depth, complexity: state.complexity }); if (stmt.kind === "if" || stmt.kind === "while" || stmt.kind === "for-each") { this.decide(stmt.id, stmt.kind, depth, state); if (stmt.kind !== "for-each") for (const op of this.operators(stmt.test)) this.decide(stmt.id, op, depth, state); for (const block of this.blocks(stmt, depth)) this.walk(block.body, block.depth, state); // ▸ a block closes: back up one level this.tracer?.emit("leave", { nodeId: stmt.id, kind: stmt.kind, depth, maxDepth: state.maxDepth }); } } } private decide(nodeId: string, kind: DecisionKind, depth: number, state: Counters): void { state.complexity++; state.decisions.push({ nodeId, kind, depth }); // ▸ a decision: one more independent path through the method this.tracer?.emit("branch", { nodeId, kind, complexity: state.complexity, depth }); } /** The blocks a statement opens with the depth each is walked at: an else-if chain continues at the same depth. */ private blocks(stmt: Stmt, depth: number): readonly { body: readonly Stmt[]; depth: number }[] { if (stmt.kind === "if") { const chained = CodePrinter.chainedIf(stmt); const blocks = [{ body: stmt.then, depth: depth + 1 }]; if (stmt.else) blocks.push({ body: stmt.else, depth: chained ? depth : depth + 1 }); return blocks; } return ProgramQuery.children(stmt).map((body) => ({ body, depth: depth + 1 })); } /** The `&&` and `||` operators inside a test, left to right; each is a short-circuit decision. */ private operators(expr: Expr): readonly ("and" | "or")[] { const ops: ("and" | "or")[] = []; ProgramQuery.visitExpr(expr, (e) => { if (e.kind === "binary" && e.op === "&&") ops.push("and"); if (e.kind === "binary" && e.op === "||") ops.push("or"); }); return ops; }}