No Worries: Change Your Fuel Anytime — Unleashing the Power of the Strategy Pattern

Imagine you have a car that can run on different types of fuel — just like how vehicles in Indonesia might use Pertalite one day and switch to Pertamax another day. Instead of rebuilding the car every time you change the fuel, you can simply swap the fuel type on the same car. This flexibility is achieved using what’s known as the strategy pattern.

Photo by Eugene Chystiakov on Unsplash

How It Works

Defining a Fuel Blueprint
First, we create a simple blueprint (or interface) for fuel. This blueprint outlines three basic actions.

• Decrease: How the fuel is consumed.
• Monitor Fuel: How much fuel is left.
• Get Type: What kind of fuel it is.

class Fuel {
  decrease() {}
  monitorFuel(){}
  getType(){}
}

Creating Specific Fuel Types
With this blueprint, you can create different fuel types. For instance:

• Pertalite: When the car uses Pertalite, the fuel decreases by one unit each time the engine starts.
• Pertamax: When using Pertamax, the fuel decreases by two units, reflecting its different consumption rate.

class Pertalite extends Fuel {
    
  constructor(volume) {
    super();
    this.volume = volume;
    this.name="Pertalite";
  }
  
  decrease() {
    this.volume--;
  }
  
  monitorFuel() {
    return this.volume;
  }
  getType(){
    return this.name;
  }
}

class Pertamax extends Fuel {
    
  constructor(volume) {
    super();
    this.volume = volume;
    this.name="Pertamax";
  }
  
  decrease() {
    this.volume = this.volume - 2;
  }
  
  monitorFuel() {
    return this.volume;
  }
  getType(){
    return this.name;
  }
}

Integrating with the Car
The car itself doesn’t need to know the details of each fuel type. It simply accepts any fuel that follows the blueprint. This means you can refuel the car with either Pertalite or Pertamax without having to create a new car object every time.

class Car {
  refuel(fuel){
    this.fuel = fuel;
  }
  startEngine() {
    this.fuel.decrease();
  }
  
  checkFuel() {
    // Delegate the fuel monitoring to the fuel strategy
    return this.fuel.monitorFuel();
  }
  checkFuelType(){
      return this.fuel.getType();
  }
}

Putting It All Together

Here’s a simple outline of how this works in code:

• Create a Car: You instantiate your car.
• Refuel with a Specific Fuel: You give it a certain amount of Pertalite or Pertamax.
• Start the Engine: When the engine starts, it reduces the fuel based on the type of fuel you provided.
• Check the Fuel: You can then check both the remaining amount of fuel and the type of fuel currently in the car.

const calya = new Car();
calya.refuel(new Pertalite(10));
calya.startEngine();
console.log(calya.checkFuelType()+":"+calya.checkFuel());

//change the fuel

calya.refuel(new Pertamax(20));
calya.startEngine();
console.log(calya.checkFuelType()+":"+calya.checkFuel());

This approach, using the strategy pattern, makes your code flexible and adaptable. It allows you to change the fuel type at any time, ensuring that your car (or your code) continues to run smoothly without needing a complete restart.

Bonus : Just try it in your console browser. No need any setup.

Happy coding!