DRY Code: Using IIFEs to Clean Up Code | Tiffany R. White Blog

DRY Code: Using IIFEs to Clean Up Code

Reading time: 12 mins

DRY: Don’t Repeat Yourself

As you may have seen in my last post, I have some ridiculous conditional statement blocks going on to show/hide the Skycons and for switching up the background photos based on your current weather conditions.

Each of this if/else statements is essentially repeating the same couple of ideas:

if (currentIcon === "clear-day")  {
  $(“#clear-day").show();
}  else  {
  $("#clear-day").hide();
}

for the icons and:

if (currentIcon === "clear-day")  {
  $("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
}  else if (currentIcon === "partly-cloudy-night")  { 
  $("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
}

for the backgrounds only repeated over and over again for different icons/pictures.

This isn’t DRY: it’s stupid.

Functions for Modularity

I decided to wrap these up in two different closure functions in the form of IIFEs or Immediately Invoked Function Expressions.

An IIFE wraps your function in parens and then adds an extra closing set of parens that invoke the function immediately when the interpreter gets to that function.

My current solution 1:

(function changeBackground(){
  if (currentIcon === "clear-day") {
    $("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
  } else if (currentIcon === "partly-cloudy-night") {
    $("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
  } else if (currentIcon === "clear-night") {
    $("body").css("background-image", "url(https://i.imgur.com/K6Bazrl.jpg)");
  } else if (currentIcon === "partly-cloudy-day") {
    $("body").css("background-image", "url(https://i.imgur.com/dUS9u9b.jpg)");
  } else if (currentIcon === "cloudy") {
    $("body").css("background-image", "url(https://i.imgur.com/Kx3ku27.jpg)");
  } else if (currentIcon === "rain") {
    $("body").css("background-image", "url(https://i.imgur.com/g4afvja.jpg)");
  } else if (currentIcon === "sleet") {
    $("body").css("background-image", "url(https://i.imgur.com/pjq3VPO.jpg)");
  } else if (currentIcon === "snow") {
    $("body").css("background-image", "url(https://i.imgur.com/vH9cyKD.jpg)");
  } else if (currentIcon === "wind") {
    $("body").css("background-image", "url(https://i.imgur.com/ZtSl66b.jpg)");
  } else if (currentIcon === "fog") {
    $("body").css("background-image", "url(https://i.imgur.com/5z0CXkZ.jpg)");
  }
})();

The same for the icons.

The problem with making this even more DRY is the way Skycons are initiated:

let icons = new Skycons({ color: "#fff" });
  
   icons.set("clear-day", Skycons.CLEAR_DAY);
   icons.set("clear-night", Skycons.CLEAR_NIGHT);
   icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
   icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
   icons.set("cloudy", Skycons.CLOUDY);
   icons.set("rain", Skycons.RAIN);
   icons.set("sleet", Skycons.SLEET);
   icons.set("snow", Skycons.SNOW);
   icons.set("wind", Skycons.WIND);
   icons.set("fog", Skycons.FOG);

  icons.play();
   }
});

So I am looking around for solutions.

DRY: Don’t Repeat Yourself

As you may have seen in my last post, I have some ridiculous conditional statement blocks going on to show/hide the Skycons and for switching up the background photos based on your current weather conditions.

Each of this if/else statements is essentially repeating the same couple of ideas:

if (currentIcon === "clear-day")  {
  $(“#clear-day").show();
}  else  {
  $("#clear-day").hide();
}

for the icons and:

if (currentIcon === "clear-day")  {
  $("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
}  else if (currentIcon === "partly-cloudy-night")  { 
  $("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
}

for the backgrounds only repeated over and over again for different icons/pictures.

This isn’t DRY: it’s stupid.

Functions for Modularity

I decided to wrap these up in two different closure functions in the form of IIFEs or Immediately Invoked Function Expressions.

An IIFE wraps your function in parens and then adds an extra closing set of parens that invoke the function immediately when the interpreter gets to that function.

My current solution 1:

(function changeBackground(){
  if (currentIcon === "clear-day") {
    $("body").css("background-image", "url(https://i.imgur.com/voece1h.jpg)");
  } else if (currentIcon === "partly-cloudy-night") {
    $("body").css("background-image", "url(https://i.imgur.com/r8haFIj.jpg)");
  } else if (currentIcon === "clear-night") {
    $("body").css("background-image", "url(https://i.imgur.com/K6Bazrl.jpg)");
  } else if (currentIcon === "partly-cloudy-day") {
    $("body").css("background-image", "url(https://i.imgur.com/dUS9u9b.jpg)");
  } else if (currentIcon === "cloudy") {
    $("body").css("background-image", "url(https://i.imgur.com/Kx3ku27.jpg)");
  } else if (currentIcon === "rain") {
    $("body").css("background-image", "url(https://i.imgur.com/g4afvja.jpg)");
  } else if (currentIcon === "sleet") {
    $("body").css("background-image", "url(https://i.imgur.com/pjq3VPO.jpg)");
  } else if (currentIcon === "snow") {
    $("body").css("background-image", "url(https://i.imgur.com/vH9cyKD.jpg)");
  } else if (currentIcon === "wind") {
    $("body").css("background-image", "url(https://i.imgur.com/ZtSl66b.jpg)");
  } else if (currentIcon === "fog") {
    $("body").css("background-image", "url(https://i.imgur.com/5z0CXkZ.jpg)");
  }
})();

The same for the icons.

The problem with making this even more DRY is the way Skycons are initiated:

let icons = new Skycons({ color: "#fff" });
  
   icons.set("clear-day", Skycons.CLEAR_DAY);
   icons.set("clear-night", Skycons.CLEAR_NIGHT);
   icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
   icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
   icons.set("cloudy", Skycons.CLOUDY);
   icons.set("rain", Skycons.RAIN);
   icons.set("sleet", Skycons.SLEET);
   icons.set("snow", Skycons.SNOW);
   icons.set("wind", Skycons.WIND);
   icons.set("fog", Skycons.FOG);

  icons.play();
   }
});

So I am looking around for solutions.

  1. This isn’t ideal either and I am currently asking around about it.  2



No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.