Coders Block: What is the defer attribute?

At some point in our lives we have all heard this acronym used… ABC. Always Be Closing. While this may apply to the business realm, I currently live in the Land Of Code. Sooooo I took it upon myself to change it to this : ABC. Always Be Creating.

As software Engineers, whether we just graduated or have some skin in the game, we should constantly be building and learning as we go along. That’s how we grow in our skillset and stay sharp. We also do a lot of reading documentation, spending time on Stack Overflow threads, and countless hours of Google searches.

And if you are doing your ABC’s, you will often run into bugs along the way. I recently ran into a bug that put my current project at a stand still. Let me give you the back story.

So, Im coding……..

My goal was to grab a few elements based on their id name using getElementById() and store them in variables inside of my js file. That part I had done successfully. And for me, I often rely on console.log to make sure the result that I’m expecting is printed to the console before I move forward.

Snippet from my office.js file.

I go to console.log() the variables that have the elements based on their id name and when I check , it returns null.

Snippet from the output of my console.log().

At first, I figured I made a simple spelling error inside of my HTML file on one of the id names. I also check that I have my javascript file linked properly using the script tag which I placed inside of the the head tags.

Snippet of code from HTML file.

So, I double back and triple check the spelling. Okay…., no problem there, so why then am I getting null as the output?????

Then, I did what everyone does; Second-guess my coding skills and PANIC!

After my mini meltdown, I began my quest for the answer and THAT’ S what I want to share with you. 🤩

Note: There is more than one way to solve this problem, I found at least two others. But I’m highlighting the one I found to be the most effective for me.

When we place our script tag- that have a source attribute linking to our JS file -inside of the head tag, it blocks the rest of the HTML and prevents the DOM from building until it’s completely loaded. This prevented the JS file from knowing about the HTML tags I was referring to because technically they didn’t exist yet(because it hasn’t been full loaded yet).

The fix I learned was to add the attribute called defer. Defer will prevent blocking (aka waiting for the script tag to completely load which holds up the DOM from loading.) When our webpage loads, It runs from top to bottom. So, if your script tag is inside of the head tag(without this attribute) the rest of the document comes to a halt until the script tag fully loads and then the document continues to run.

When I added the defer attribute to the script tag, my console.log() gave me the output I was expecting. The element that had that particular id name.

Snippet of code from HTML file with defer added to script tag.

Snippet from the output of my console.log().

To explain a little further, defer will instruct the browser to continue to build the DOM AND run the script of the js file in the background. Once the DOM is fully build, then the script tags will run.

Problem solved! Now I can move on and continue to code….until the next bug.

Hopefully this blog/rant was helpful. And Be on the lookout for more vlogs and blogs by yours truly.

Here are some links that talk a bit more in depth about defer.

👉🏿 Here

👉🏿 &here

Until the next time. Happy Coding Ya’ll!😜