lesson
Updated 6 days ago · 1 view
Imagine writing a game where every time an enemy spawns, takes damage, or heals, you copy and paste the exact same 30 lines of code across twenty different files. In 1951, British computer scientist David Wheeler helped invent the subroutine for the EDSAC computer to solve this chaos, allowing programs to jump to a reusable block of instructions and return right back.
A subroutine is a named, self-contained block of code designed to perform a specific task whenever it is called. In modern software architecture, subroutines split into two primary types: procedures and functions.
📊A clean, modern visual diagram comparing Subroutines. At the top: a rounded container 'Subroutine (Reusable Block of Logic)'. Branching into two side-by-side cards: Left card: 'Procedure' (badge in violet: 'Performs an Action'), description 'Executes tasks, causes side effects (e.g., printing, saving), returns NO value to caller'. Right card: 'Function' (badge in blue: 'Calculates & Returns'), description 'Computes a result and sends a value BACK to the calling expression'. Styled with light theme (#f8fafc bg, #1e2945 text, #e2e8f0 border, subtle drop shadows, clean sans-serif font).
How do we decide when a block of code should merely perform an action versus when it must hand back data?
Procedures: Executing Actions
A procedure is a subroutine that executes a series of statements to cause an effect, such as updating a database or rendering text to the screen, without returning a data value to the caller. When a procedure finishes, program control simply transfers back to the line immediately following the call.
📊An interactive-style visual trace of a Procedure execution flow. Left panel: 'Main Program' lines 1 to 4. Line 2 calls 'updatePlayerBanner("Alex", 1200)'. An animated curved arrow flows from Line 2 into the right panel: 'Procedure updatePlayerBanner(name, score)'. Inside the procedure, step 1: clearBanner(), step 2: drawText(name), step 3: drawScore(score). An exit arrow points back to Line 3 of the Main Program. Clear visual indicator showing NO data returned back, just program control returning. Light background #ffffff, card border #e2e8f0, text #1e2945.
Because a procedure does not resolve into a value, you invoke it as an independent standalone statement like
displayGameOverBanner(); rather than placing it inside an equation or variable assignment.What if your main program needs the subroutine to calculate a number, like converting currencies or evaluating distance, and pass that answer back?
Functions: Returning Values
A function is a subroutine that performs a computation and passes a return value directly back to the calling expression. An argument is the actual value you supply into the subroutine call, while a parameter is the named variable inside the subroutine definition that receives it.
📊A step-by-step visual evaluation diagram of a Function call. Step 1: Main code line `let totalCost = calculateFinalPrice(100, 0.08);`. Step 2: Values (100, 0.08) feed into Function box `calculateFinalPrice(price, taxRate)`. Inside the box: formula `return price + (price * taxRate)`. Step 3: Result `108` emerges from the function and replaces the entire call expression in the assignment, so `totalCost` becomes `108`. Use light card styling with #3b82f6 highlights, crisp labels, and clean arrows.
Because a function call evaluates to a specific value, you can nest it anywhere an ordinary value is expected, such as
if (calculateFinalPrice(50, 0.08) > 50).