Extract Variable — Refactoring Patterns, Part 3
Updated: Jul 30
Refactoring Patterns · Part 3
A dense expression like if (order.total > 100 && customer.tier === 'gold' && !order.hasDiscount) makes the reader do the interpreting every single time. Extract Variable gives that expression a name, so the condition reads like a sentence. This walks through the smallest, highest-frequency refactoring there is — pulling a sub-expression into a well-named variable — and when it's worth reversing.
Comments rot. Variable names don't. Extract Variable replaces inline expressions with named locals.
Step 1: The Smell (15 min)
if (order.subtotal - order.discount + order.shipping > 1000) {
applyExpressShipping(order)
}
What's that arithmetic? Reader stops, parses, then continues.
Step 2: After (15 min)
const orderTotal = order.subtotal - order.discount + order.shipping
const isLargeOrder = orderTotal > 1000
if (isLargeOrder) {
applyExpressShipping(order)
}
Same behavior. Reads in English.
Step 3: The Steps (15 min)
Find expression
Declare local with descriptive name
Assign expression
Replace original expression with variable
Run tests
Commit
Two minutes.
Step 4: When to Apply (15 min)
Expression complex
Reused multiple times
Reveals intent unclear from arithmetic
You'd otherwise add a comment
If you'd write // total cost, prefer const totalCost = ....
Step 5: Pitfalls (15 min)
Don't extract:
Trivial expressions (x + 1 rarely needs naming)
Throwaway temps
Anything more confused with name
Goal: clarity, not variable count.
Step 6: Method Extract Variants (15 min)
For repeated use across methods: Extract Function (Part 2) instead.
For once-in-a-method: Extract Variable.
For complex objects: pull a helper / utility.
Step 7: Tooling (15 min)
IDE: highlight expression → "Extract Variable" → name.
Renames safely. Catches scope.
Step 8: Naming (15 min)
Bad names:
temp
result
x
myVar
Good names:
applicableDiscount
orderTotal
isExpressEligible
Read aloud: should make sense in English.
Step 9: Reverse: Inline Variable (15 min)
Sometimes a name adds noise:
const x = order.id
saveOrder(x)
Inline: saveOrder(order.id).
Refactor in either direction as clarity demands.
Step 10: Combine With Other Refactors (15 min)
Extract Variable often precedes:
Extract Function (variable becomes parameter)
Move Function (now portable)
Replace Conditional (named conditions easier to refactor)
Often a stepping stone, not the final state.
What You Just Did
Extract Variable: the smell, after, the steps, when to apply, pitfalls, method extract variants, tooling, naming, reverse: inline variable, combine with other refactors.
Common Failure Modes
Extract trivial expressions. Noise.
Bad names. No improvement.
Forget tests. Behavior may change inadvertently.
Hoist scope incorrectly. Closures or timing differ.
Never inline. Variables proliferate.
Continue the Refactoring Patterns path
Previous — Part 2: Extract Function
Part of the Refactoring Patterns learning path.
