Code & Craft

From Potion to Elixir

A guide to the evolution of a JavaScript function. Discover how the same simple logic can be crafted in different styles, each with its own strengths, weaknesses, and soul.

In the world of coding, getting something to "work" is just the beginning. The true craft lies in writing code that is not only functional but also readable, maintainable, and scalable. It’s the difference between mixing a quick, cloudy potion and distilling a pure, powerful elixir.

Using the core calculation from our Attendance Alchemist, let's explore three distinct styles of a JavaScript function and see how it evolves.

Style 1: The Simple Potion (A Basic Script)

This is the most straightforward approach. It's a raw script that gets the job done by directly referencing elements from the page. It's fast to write and easy to understand for a single, specific task.

// Relies on HTML elements already existing
function calculateAbsences() {
  const attended = parseInt(document.getElementById('total-attended').value);
  const conducted = parseInt(document.getElementById('total-conducted').value);
  const target = parseInt(document.getElementById('target-percent').value) / 100;

  if (isNaN(attended) || isNaN(conducted) || isNaN(target)) {
    // Handle errors...
    return;
  }

  const maxDrop = Math.floor((attended - (target * conducted)) / target);
  
  document.getElementById('max-drop').textContent = Math.max(0, maxDrop);
}

Critique: This potion works, but it's bound to our specific cauldron. It can't be reused elsewhere because it's completely dependent on our HTML's specific IDs (`total-attended`, `max-drop`, etc.). If we change the HTML, the script breaks. It's brittle.

Style 2: The Refined Tincture (A Pure Function)

Now, let's refine our potion. A "pure" function is a fundamental concept in programming: it doesn't rely on the outside world. Instead, it takes in all the ingredients it needs as arguments and returns a single, predictable result. It has no side effects.

// A pure, reusable function
function calculateMaxAbsences(attended, conducted, targetPercent) {
  const targetDecimal = targetPercent / 100;
  
  if (conducted <= 0 || targetDecimal <= 0) {
    return 0;
  }

  const numerator = attended - (targetDecimal * conducted);
  const maxDrop = Math.floor(numerator / targetDecimal);

  return Math.max(0, maxDrop);
}

// How you would use it:
const absencesAllowed = calculateMaxAbsences(75, 100, 75); // Result: 0
const anotherScenario = calculateMaxAbsences(80, 100, 75); // Result: 6

Critique: This is a massive improvement. This function is now a self-contained, portable tool. We can use it anywhere in our kingdom—or in any other project—without modification. It's testable, predictable, and robust. It separates the *logic* from the *presentation* (the part that updates the HTML).

Style 3: The Grand Elixir (An Object-Oriented Class)

For the final evolution, we distill our logic into an Elixir—a JavaScript `class`. A class is like a blueprint for creating "objects" that can hold their own data (state) and have their own dedicated functions (methods). This approach is perfect when you have multiple related calculations and want to keep everything organized and clean.

class AttendanceAlchemist {
  constructor(attended, conducted) {
    this.attended = attended;
    this.conducted = conducted;
  }

  getCurrentPercentage() {
    if (this.conducted === 0) return 0;
    return (this.attended / this.conducted) * 100;
  }

  calculateMaxAbsences(targetPercent) {
    const targetDecimal = targetPercent / 100;
    if (this.conducted <= 0 || targetDecimal <= 0) return 0;

    const numerator = this.attended - (targetDecimal * this.conducted);
    const maxDrop = Math.floor(numerator / targetDecimal);

    return Math.max(0, maxDrop);
  }
}

// How you would use it:
const myAttendance = new AttendanceAlchemist(80, 100);
console.log(myAttendance.getCurrentPercentage()); // Output: 80
console.log(myAttendance.calculateMaxAbsences(75)); // Output: 6

Critique: This is the most structured and scalable approach. The `AttendanceAlchemist` object holds its own state (`attended` and `conducted`), and we can ask it for different calculations. If we wanted to add a "holiday planner" or "grade projection" logic, we could simply add more methods to this class. It keeps all related functionality neatly bundled together, which is the cornerstone of professional, large-scale application development.

Conclusion: Choose Your Style

There's no single "best" way to write code. The simple potion is fine for a quick script, while the pure function is a versatile tool for any developer's bag. The grand elixir is the go-to for building complex, maintainable applications. The true skill of an alchemist—and a developer—is knowing which formula to use for the task at hand. By understanding this evolution, you've taken a step beyond just writing code that works, and into the realm of crafting code that endures.