Refactoring with Claude

Improve structure, naming, and readability without changing behavior — one focused ask at a time.

Refactoring is changing how code is written without changing what it does. Claude is a strong refactoring partner when you give it a clear objective.

Name the goal

  • "Extract this repeated logic into a helper function."
  • "Convert these promise chains to async/await."
  • "Split this 200-line component into smaller pieces."

Keep behavior the same

Tell Claude the refactor must not change behavior, and ask it to explain any change that could. Run your tests after each refactor to confirm nothing broke.

Small steps beat big rewrites

Refactor one concern at a time. A focused change is easy to review and easy to undo if you disagree.

Example

Example · javascript
const prompt = `Refactor this code to use async/await instead of .then() chains.
Do not change behaviour. Keep the same function name and exports.

function loadUser(id) {
  return fetch('/api/users/' + id)
    .then(r => r.json())
    .then(user => fetch('/api/orders?user=' + user.id))
    .then(r => r.json());
}`;

const response = await client.messages.create({
  model: "claude-opus-4-8",
  max_tokens: 2048,
  messages: [{ role: "user", content: prompt }],
});

When to use it

  • Ask Claude to rename variables in a 200-line module from single-letter names to descriptive identifiers.
  • Refactor a nested callback chain in a legacy file to async/await without changing its observable behaviour.
  • Extract repeated DOM-manipulation logic scattered across three files into a single shared utility function.

More examples

Rename variables for clarity

A tightly-scoped refactor request — rename only — avoids unexpected logic changes.

Example · javascript
const code = `function calc(a, b, c) {
  const x = a * b;
  const y = x + c;
  return y;
}`;

const msg = await client.messages.create({
  model: "claude-haiku-4-5",
  max_tokens: 256,
  messages: [{
    role: "user",
    content: `Rename all variables in this function to be descriptive. Do not change behaviour:\n${code}`
  }],
});

Convert callbacks to async/await

Instructs Claude to modernise the style while explicitly preserving the existing logic.

Example · javascript
const legacyCode = `
function loadUser(id, cb) {
  db.find(id, function(err, user) {
    if (err) return cb(err);
    cache.set(user.id, user, function(err) {
      cb(err, user);
    });
  });
}`;

const msg = await client.messages.create({
  model: "claude-sonnet-4-5",
  max_tokens: 512,
  messages: [{ role: "user",
    content: `Rewrite using async/await. Keep the same logic:\n${legacyCode}` }],
});

Extract repeated logic to a utility

Feeds Claude repeated patterns and asks it to produce a single parameterised helper.

Example · javascript
const snippets = `
// found in three files:
document.querySelectorAll('.card').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.modal').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.overlay').forEach(el => el.classList.add('hidden'));`;

const msg = await client.messages.create({
  model: "claude-haiku-4-5",
  max_tokens: 256,
  messages: [{ role: "user",
    content: `Extract these into a reusable hideAll(selector) utility function:\n${snippets}` }],
});

Discussion

  • Be the first to comment on this lesson.