A huge part of being a good programmer is keeping your code as easy-to-debug as possible, as well as writing code that is easy to scale without making mistakes. If you’re working on, say, a blog website, the amount of content on the site will grow over time, so every time you come back to the project, you want to be able to do so quickly & without making mistakes, which could harm your client’s reputation by making the site look bad.

Luckily for us, God (or rather, Brendan Eich) created JavaScript, which can help make our code more efficient & easier to debug. In this article, I will give a brief example of how I used JS to do exactly this while building a blog website.

On a typical blog website, you should make it easy for visitors to find you on social media, as this is the best way to grow a following online. One way to do this is to display links to your social media channels on every page, maybe in a footer, or in a panel that sits on the side of the screen at all times, as seen in the photo below:

If you want this panel to display on all pages of the site, one way to accomplish this would be to copy & paste several lines (14 in this case) of the same code onto every HTML page in the project. These lines are pictured below:

Fourteen lines of code may not seem like much to you, and, in a way, you’re right. It really wouldn’t be that difficult to just copy & paste these onto every new HTML page you create, especially if the project is small. However, it makes the code clunkier, meaning the page won’t load as soon as it would with fewer lines, as well as more difficult to modify or debug. In the photo above, I put hashtags in the href part of the anchor tags, as this is only a demo.

However, in a realistic situation, these would link to a real social media profile’s URL. So, imagine your client changes their Instagram username. This could lead to the URL, that is put into href, being different than it was before. As the developer, you would have to get that new link & paste it into every single HTML page & in the appropriate spot. Not only is this cumbersome, but it could lead to errors if you are not careful, especially if you get bored doing this repetitive task.

A better way to accomplish this would be to use JS. In the picture below, I created functionality in JS to add these links to a div that is already present on all HTML pages, which is stored in the variable socialsPanel.

When we use a function like this, we only need to enter each link’s information in one place: inside this function. So, if the information for a particular link changes, we would only need to change it here, instead of on every single HTML page if we hadn’t used JS & had instead used the copy/paste method. If we wanted to add or subtract links, we would only have to do so in this function.

Not only is this a huge timesaver, but, as mentioned before, it saves lines of HTML code, since to populate a page with these links, we wouldn’t need to copy & paste the 13* lines of code into every HTML document, only call the function upon loading the page. Calling this function, popSocialsPanel(), on a page, as you can see underlined in red in the next photo, adds no new line of code (just ignore the other functions there for now):

Lines that contain the series of links in this case, since we kept the div , to which we wanted to add the links, on each HTML document

Let’s take a minute to do the math on all of this. Not including the comments, we added 9 new lines of code in our JS file, which we only have to write once, while subtracting 13 lines of HTML code. So, if our project had only one HTML document, we would still be saving 4 lines of code, which is good, but we would be saving 13 lines of code while implementing this functionality for every HTML document we add to the project, which is great.

On this particular project, I have saved 56 lines of code, so far, by using this method. For every page for a blog post I add, I will be saving another 13.

I hope you found this relatively simple example helpful, but I guess the takeaway from this article would be that you should develop a certain instinct as a programmer; if you feel that you are repeating yourself while writing code, there is probably a more-efficient way to write it.

If you have any comments or questions, I’d be happy to respond. If you found this article helpful, I’d appreciate a nice comment or a clap or two, so I can know what content my readers like. If you think others would find this useful, please share it with them.

Thanks for reading!

Originally published on Medium for JavaScript in Plain English on September 28, 2022