Reactive Classes with Getters and Setters in Svelte

Before diving into reactive classes, let’s briefly review what getters and setters are in JavaScript. Getters and setters are special methods that allow you to control how a property is accessed or modified. A getter is used to retrieve the value of a property, while a setter is used to assign a value to it. This gives you the ability to add logic when getting or setting a property, such as validation or transformation.

For example, consider a simple class with a getter and setter:

class Counter {
  #count = 0; // Private field

  get value() {
    return this.#count;
  }

  set value(newValue) {
    this.#count = Number(newValue); // Ensure numeric value
  }
}

In this example, the value property is controlled by a getter and setter. The getter returns the current value of #count, while the setter ensures that the new value is always a number. This pattern is particularly useful in Svelte when combined with reactive state.

Now, let’s apply this knowledge to build a Temperature Converter in Svelte. The converter will allow users to input a temperature in Celsius or Fahrenheit, and it will automatically update the other value based on the input. We’ll use a reactive class to manage the state and logic for this conversion.

Here’s the complete code for the TemperatureConverter class:

<script>
  class TemperatureConverter {
    #celsius = $state(0); // Private reactive state for Celsius

    get celsius() {
      return this.#celsius;
    }

    set celsius(newValue) {
      this.#celsius = Number(newValue); // Ensure numeric value
    }

    get fahrenheit() {
      return (this.#celsius * 9/5) + 32; // Computed value for Fahrenheit
    }

    set fahrenheit(newValue) {
      this.#celsius = (Number(newValue) - 32) * 5/9; // Convert Fahrenheit to Celsius
    }
  }

  const converter = new TemperatureConverter();
</script>

<h3>Temperature Converter</h3>

<label>
  Celsius:
  <input type="number" bind:value={converter.celsius} />
</label>

<br />

<label>
  Fahrenheit:
  <input type="number" bind:value={converter.fahrenheit} />
</label>

<p><strong>Current Values:</strong></p>
<p>Celsius: {converter.celsius}</p>
<p>Fahrenheit: {converter.fahrenheit}</p>

Let’s break this down step by step:

1. Private Reactive State: The #celsius property is defined as a private reactive state using $state(0). This ensures that changes to #celsius trigger reactivity in Svelte.
2. Getters and Setters: The celsius and fahrenheit properties are controlled by getters and setters. The getters return the current value, while the setters handle the conversion logic.
3. Binding to UI: The bind:value directive connects the input fields to the celsius and fahrenheit properties, ensuring that the UI updates reactively.
4. Displaying Values: The current values of celsius and fahrenheit are displayed in the UI using curly braces {}.

When you run this code, you’ll see two input fields for Celsius and Fahrenheit. As you type in one field, the other field will update automatically based on the conversion logic. For example, if you enter 100 in the Celsius field, the Fahrenheit field will display 212.