The Importance of Helper Functions

The Principle Behind It

A basic principle of coding, that developers should try to adhere to, is the concept of D.R.Y(don’t repeat yourself). A tenet of the programming community is that if you can utilize less code, then do so but in an effective manner. Repetitive code should be refactored rather than repeating it unnecessarily.

In Javascript there will be instances where a particular function will need to be invoked multiple times, within other methods. Rather than repeating numerous lines of the same code, we can abstract it into one helper method.

Why It’s So Effective

So why exactly can’t we just repeat the same lines and function, over and over?

1. Readability- Chances are that as software engineers, we will be apart of a team working on task or project. Other team members should be able to go through our code and understand it in a reasonable fashion. The more unnecessary code we have the harder it will be to understand to other developers.
2. Debugging- The more code that you have in an application usually means more chances to have typos and bugs. It’s much easier to comb over 50 lines of code and avoid mistakes than with 100 lines.
3. Updatability- Suppose that we want to make a change to a specific function. If our functions is invoked X amount of times in our application, then we’ll have to manually find every part of the program where it’s utilized. Instead it is much easier to just update the function once where it’s defined.

In Practice

In this model application, we need to take the object given to use by the last .then on a promise object and do something with it. We need to iterate over the array returned by the .then and perform a function on every element to update its attributes.It wouldn’t be efficient to add a bunch of lines to our code below and make it harder to read as we did below.

fetch(url)
  .then(res => res.json())
  .then((filmArr) => {
    filmArr.forEach(movieObj => {
      movieTitle.innerText = movieobj.title
      movieDescrip.innerText = movieobj.description
      moviePoster.src = movieobj.poster
      movieRuntime.innerText = movieobj.runtime
      movieShowTime.innerText = movieobj.showtime
      movieTickRem.innerText = movieobj.capacity-  movieobj.tickets_sold
   })
})

Instead let’s create a separate helper function that assigns new attributes to our object.

let updateMovie = (movie) => {
  movieTitle.innerText = movie.title
  movieDescrip.innerText = movie.description
  moviePoster.src = movie.poster
  movieRuntime.innerText = movie.runtime
  movieShowTime.innerText = movie.showtime
  movieTickRem.innerText = movie.capacity — movie.tickets_sold
}

Now that we have our helper function defined let’s refactor our fetch and invoke it there so it looks as such:

fetch(url)
.then(res => res.json())
.then((filmArr) => {
  filmArr.forEach(movieObj => {
  updateMovie(movieObj)
  })
})

See how much neater and more readable that is?

We might even have a second function in which our updateMovie function is invoked. If we didn’t refactor those functions then every time we needed to make an edit, we would have to do so edit the code within every single function. Now we only have to do so once.

Helper Function Parameters

When we ran .forEach on our filmArr, our parameter, movieObj , represented every element in that array. When we pass that movieObj into our updateMovie helper function, each element of the array essentially becomes our movie parameter that’s defined in our function. Even if we utilize different names for the parameters the functionality still holds true.

Conclusion

When creating an application, helper functions are great tool to make our apps more efficient. I think it’s safe to say that pretty much everyone would like to save time and prevent future stress if they can. Helper functions make our code more readable, easily debuggable and faster to update.