OCP: Open-Closed Principle, optimizing JavaScript code

Hi all!
In my previous post, I described how to put in place a multi language feature in a static website.

But, in the toggle lang function, I was not convinced at all, so I decided to optimize the code. The code part that I was not convinced is to use of the switch statement in the toggle language action. So, let me explain what I did to avoid the switch statement.

The code below (original code), uses the switch statement to toggle between English/Spanish:

 link_toggle_lang.addEventListener('click', function () {
 let lang = {}
 let myLabels = document.querySelectorAll("[id^='l_']")
 //Define the language flag
 let current_lang = "en" 

 //Check the current_lang flag
 current_lang = link_toggle_lang.innerHTML.includes("English") === true ? "en" : "es" 

 switch (current_lang) {
       case "es":
          link_toggle_lang.innerHTML = 'English'
          lang = label_es
          break

       case "en":
          link_toggle_lang.innerHTML = 'Español'
          lang = label_en
          break
    }

 ...
})

Now, to avoid the switch statement, the root change was to create a function to return an object with all the texts translated.

function retLanguage(lang) {
   const language {
      'English': {
          l_title: "Title",
          l_subtitle: "Subtitle",
          l_text1: "this is an example text",
          l_text2: "additional text"
      },
      'Español': {
          l_title: "Titulo",
          l_subtitle: "Subtitulo",
          l_text1: "este es un texto de ejemplo",
          l_text2: "texto adicional"
      }
   }
   return language[lang]
}

The second improve was in the link_toggle_lang function with something like this:

 link_toggle_lang.addEventListener('click', function () {
 let lang = {}
 let myLabels = document.querySelectorAll("[id^='l_']")

 //Calls the function to return the object with all the texts translated
// ** Root change ** 
lang = retLanguage(link_toggle_lang.innerHTML)

    for (let i = 0; i < myLabels.length; i++) {
       myLabels[i].innerHTML = lang[myLabels[i].id]
    } 
})

In the code above, you can see that the optimizing code occurred with the call to the retLanguge function. So, with the retLanguage function it was possible to avoid the switch use.

But, what happened with the Open-Closed Principle?

Well, according to the definition coined in the Clean Architecture book by Robert C. Martin, OCP is:

A software artifact should be open for extension but closed for modification

So, with this change, this feature is open for extension to new languages (translations). Likewise, the main code should not modified when it's necessary to add a new language.

Conclusion

This was a lesson learned that I recently apply to improve some part of my code. Here you can find a great article about SOLID principles by Francesco Ciulla.

Photo by Joan Gamell on Unsplash

Thanks for reading! TM

OCP: Open-Closed Principle, optimizing JavaScript code

Lesson learned

Conclusion