Reactive Classes with Getters and Setters in Svelte

In the previous lesson, you learned how to use $effect to implement debouncing, a technique that helps manage frequent updates efficiently. Now, we’ll shift our focus to organizing state logic using reactive classes in Svelte. While $state and $effect are powerful tools for managing reactivity, classes with getters and setters can help you structure your code more cleanly, especially when dealing with complex state logic.

In Svelte, reactivity is achieved through runes like $state, which allow you to create reactive variables. However, as your application grows, managing these variables individually can become cumbersome. Classes provide a way to encapsulate related state and logic into a single unit, making your code easier to maintain and understand.

In this lesson, you’ll learn how to use classes with getters and setters to manage reactive state in Svelte. By the end, you’ll be able to build a Temperature Converter that converts between Celsius and Fahrenheit using a reactive class. This builds on your knowledge of $state and introduces a new way to structure your applications.

Let’s get started!

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.