Functions, Functions Everywhere!

I’d like to discuss the importance and power of utilizing functions throughout your code. In the world of programming, functions are the building blocks that enable developers to create efficient, organized, and reusable code. By encapsulating specific pieces of functionality into self-contained units, functions bring modularity and flexibility to our codebase. When I first began learning JavaScript I found myself hesitant to wrap much of my code into functions, thinking it was unnecessary and believing they should be reserved for larger tasks I wanted to accomplish. As I continued to learn and as the code I was writing was becoming more complex I started to realize how helpful and efficient functions really were, not only for myself but also for others reading my code. Let me paint you an example…

Early in my schooling I was doing a practice lab where I had to render a bunch of similar items onto cards. My data was organized into an array of objects, each object representing an individual item’s information (item’s name, item’s description, item’s image, etc.). I used the .forEach method to iterate through my array and create the necessary DOM elements for each item’s information and then appended those elements to an item card. My code looked something like this:

arrayOfItems.forEach(item => {
    const itemCard = document.createElement('div');
    itemCard.className = 'item-card'
    const itemName = document.createElement('h2');
    itemName.innerText = item.name;
    const itemDesc = document.createElement('p');
    itemDesc.innerText = item.description;
    const itemImg = document.createElement('img');
    itemImg.src = item.image;
    itemImg.alt = item.name;
    itemCard.append(itemName, itemDesc, itemImg);
});

I created and set all my DOM elements for each card right within my .forEach method. This was completely functional but later on in the lab I was asked to render a new item card for a new item that was submitted through a form. For a moment I thought I would have to re-write the same code I used early but that’s when it dawned on me. If my previous code to create the item card was in a function I could re-use it easily and quickly wherever I wanted! So I refactored my code to look like this:

function createItemCard(item) {
    const itemCard = document.createElement('div');
    itemCard.className = 'item-card'
    const itemName = document.createElement('h2');
    itemName.innerText = item.name;
    const itemDesc = document.createElement('p');
    itemDesc.innerText = item.description;
    const itemImg = document.createElement('img');
    itemImg.src = item.image;
    itemImg.alt = item.name;
    itemCard.append(itemName, itemDesc, itemImg);
};

arrayOfItems.forEach(item => {
    createItemCard(item)
});

Now I had a function that I could pass my new item into!

createItemCard(newItem);

Not only did this save me the time of not having to re-write my code, but I also realized how much this helped with my code’s readability. In the first example above, it isn’t immediately clear what I’m doing to each item in the array I’m iterating through. Now that we have a function with a descriptive name, it’s much easier to know exactly what we’re doing with our items. We’re creating item cards!

Wrapping code blocks in functions is a great way to make your code more modular, you never know when you may need to use that same process again later in your program. You don’t need big code blocks to make functions practical though. Sometimes having a function for a small task can prove to be very helpful, especially if you find yourself doing that task over and over again.

In our examples above, we used document.createElement four times in just that one createItemCard function. We may have many other instances throughout our code where we need to create elements as well. Typing document.createElement repeatedly can become very tedious. What if we wrapped that one action into a function?

function ce(element) {
    return document.createElement(element);
};

Now we have a simple function we can call whenever we need to create a new DOM element! Need a new <p> element?

const newParagraph = ce('p')

How about a new <img> element?

const newImage = ce('img')

Let’s refactor our createItemCard function from earlier to take advantage of our new function to create DOM elements!

function createItemCard(item) {
    const itemCard = ce('div');
    itemCard.className = 'item-card'
    const itemName = ce('h2');
    itemName.innerText = item.name;
    const itemDesc = ce('p');
    itemDesc.innerText = item.description;
    const itemImg = ce('img');
    itemImg.src = item.image;
    itemImg.alt = item.name;
    itemCard.append(itemName, itemDesc, itemImg);
};

Much cleaner and we saved ourselves from having to type document.createElement over and over again! Functions serve as the backbone of modular programming, enabling us to write code that is clean, readable, and reusable. By breaking down our code into functions, we achieve better organization, enhanced readability, and improved maintainability. Make regular use of functions to improve your coding experience!