foundation · 12 MIN READ

Coupling and Cohesion

Cohesion describes how strongly a component’s responsibilities belong together. Coupling describes what one component must know about another. Aim for focused responsibilities and deliberate, narrow dependencies.

Reading completion is independent of quizzes and challenges.

What you’ll understand

Cohesion describes how strongly a component’s responsibilities belong together. Coupling describes what one component must know about another. Aim for focused responsibilities and deliberate, narrow dependencies.
Keep numerical calculation cohesive and connect it to rendering through one numeric result.
Evaluate the tradeoff: No useful system has zero coupling. A small well-defined dependency is easier to understand than hidden globals or many convenience methods.

Useful first: Classes and Objects

The idea and when to recognize it

Requirement: A report needs calculation and formatting, but those decisions change for different reasons.
Change to anticipate: Add JSON output without changing or copying the subtotal rule.
Design goal: Keep numerical calculation cohesive and connect it to rendering through one numeric result.

Start with the concrete problem

A report needs calculation and formatting, but those decisions change for different reasons.

Add JSON output without changing or copying the subtotal rule.

Direct implementation	Revised design
Mixing output syntax into a numeric calculator couples callers to a particular presentation.	Keep numerical calculation cohesive and connect it to rendering through one numeric result.
The baseline case can hide the problem. Compare the extension and boundary fixtures before accepting this design.	No useful system has zero coupling. A small well-defined dependency is easier to understand than hidden globals or many convenience methods.

Responsibilities and contracts

Keep numerical calculation cohesive and connect it to rendering through one numeric result.

Calculator: Produces numeric results. Public operations: sum(values)
Renderer: Chooses output representation. Public operations: render(total)

Read the design

Select a participant to inspect its responsibility and public operations. Follow the labeled relationships; an arrow indicates direction, while the legend distinguishes ownership, substitution, and temporary use.

class diagramSelect a participant below

Calculator

Produces numeric results

sum(values)

Relationships and notation

Calculator → Renderer: uses. Dependency → uses temporarily

Preparing the design walkthrough…

Follow the interaction

Choose a supplied workload and compare the direct and revised implementations. Step through the same operation in both languages. Object values are recorded after each highlighted statement; previous steps remain unchanged.

GUIDED SIMULATIONExample language

Scenario Implementation

A text renderer formats the calculated total.

A finite, authored walkthrough of this fixture. Source code is verified in tests; it is not executed by this page.

class diagramSelect a participant below

Calculator

Produces numeric results

sum(values)

Relationships and notation

Calculator → Renderer: uses. Dependency → uses temporarily

Object state after the highlighted operation

{}

function example(input) {
  const calculate = values => values.reduce((a,b)=>a+b,0);
  const total = calculate(input.values), result = input.format === "json" ? {total} : "Total: " + total;
  return result;
}

Ready to explore

Press Next to construct the collaborators, then follow the operation and inspect its result.

Step 0 / 3

Textual interaction history

Preparing the design walkthrough…

Implementation and expected output

Read the complete example alongside its input and expected output. The implementation selector changes the displayed program; the language selector preserves your current scenario and playback position.

Example language

Revised design · Call example(input) with the selected fixture.

Complete JavaScript implementation

function example(input) {
  const calculate = values => values.reduce((a,b)=>a+b,0);
  const total = calculate(input.values), result = input.format === "json" ? {total} : "Total: " + total;
  return result;
}

Input

{
  "values": [
    2,
    3
  ],
  "format": "text"
}

Expected contract result

"Total: 5"

Preparing the design walkthrough…

Try the idea in another setting

A pricing component can own pricing rules while publishing a value that a receipt renderer formats.

Name the new client contract before adapting the example.
Identify which state belongs to each object and who controls its lifetime.
Write one normal case and one boundary case before extending the design.

Tradeoffs and interview takeaways

No useful system has zero coupling. A small well-defined dependency is easier to understand than hidden globals or many convenience methods.

Common mistake: Mixing output syntax into a numeric calculator couples callers to a particular presentation.

Explain the choice: Keep numerical calculation cohesive and connect it to rendering through one numeric result.
Challenge your choice: No useful system has zero coupling. A small well-defined dependency is easier to understand than hidden globals or many convenience methods.
Describe a requirement that would make the simpler implementation sufficient.

Design challenge and knowledge check

Preparing the design walkthrough…

Navigation

Course navigation

Coupling and Cohesion

What you’ll understand

The idea and when to recognize it

Start with the concrete problem

Responsibilities and contracts

Read the design

Follow the interaction

Implementation and expected output

Try the idea in another setting

Tradeoffs and interview takeaways

Design challenge and knowledge check

Meet the contract across every scenario

Five decisions to remember

Make it your own

Meet the contract across every scenario

Five decisions to remember