top of page

Extract Variable — Refactoring Patterns, Part 3

Shift Quality Editorial
Jul 27
2 min read

Updated: Oct 4

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)


  1. Find expression

  2. Declare local with descriptive name

  3. Assign expression

  4. Replace original expression with variable

  5. Run tests

  6. 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



Part of the Refactoring Patterns learning path.

bottom of page