DEV Community

Brandon Weygant
Brandon Weygant

Posted on

The Undocumented & Hidden Value of Semi-Colons in JavaScript

Semi-colons. That little piece of punctuation that has almost zero practical use in the real world. But in the world of programming, undoubtedly a self-reflection of sorts of those of us who occupy this world, it somehow has become a pretty divisive character. This is in large part because of the weird rules JavaScript has made concerning semi-colons:

Rule #1: Semi-colons are necessary to terminate certain statements.
Rule #2: This necessary programming action will be done automatically by the JavaScript's Automatic Semi-Colon Insertion(ASI for short) engine, so you never have to worry about it if you don't want to!

The Easy Choice

Awesome! Work that takes care of itself is never a bad thing for a programmer. When I was first starting out, knowing semi-colons were optional made not using them a clear-cut easy choice. Also, somewhere in the process I even connected semi-colons to the "old" style of programming...I seriously have no idea where I got that from. Maybe I had too many older role-models constantly reminding of the real-life equivalent of semi-colons (matching socks most likely).

So about my business I went, gaining experience along the way. At a certain level of experience, you gain the ability to critique your own patterns and workflow. You don't know when or how it happens, but all of a sudden you feel confident you know how to manage your approach to enable you to become better. One of my most recent 'moments' was about this otherwise useless character, the semi-colon.

The Moment

You see, I was finding myself spending an excessive amount of time managing my {} and () every time I had to refactor code during iterations of nested objects (Damn you for...in loops!). I was constantly either forgetting to delete the now unneeded characters after removing some code, forgetting to add now needed characters when adding new code, and most annoyingly, struggling where exactly to place them between all the sloppily placed existing code and the commented out "I'm experimenting with an alternative way to do the same thing I really just did but this way might be way cooler if I can get it to work" code. This simple act, which only takes seconds in practice and has happened many times before, happened so frequently during this one project it finally dawned on my to ask: "How can I take steps to keep better track of my closing {} and ()?"

The correct answer is likely "Don't be as sloppy at commenting blocks of code out, Brandon!" or chill on random experiments for things I've already managed to accomplish, or maybe make the effort to have best syntactical organization practices off the rip. Nope, not the answer I wanted. Semi-colons! That's gotta be it!

What's The Point?

You see, I have no real interest in semi-colons becoming a regular thing in my programming, and I would struggle using them consistently in a program. Add onto that code just looks cleaner without them in my opinion. But the simple act of adding the semi-colon in manually at the closing } of my iteration function helped tremendously in my ability to follow my brackets better. It took a big chunk of the trial and error where to place or where to remove the {} & () after each refactoring.

Maybe it's a weird little practice that only works for me or in very specific circumstances, but the fact is that useless little ; I never had any time for helped me become a better programmer by making me a more organized one.

Lastly, it is worth noting, even though you may already know this, semi-colons are **not* a neutral character to place wherever you need for organizational purposes. They do terminate a statement, and as such only place them in places where the ASI would place them anyway, or you will have a different set of problems than mere organization. For more info on when and where ASI take places check out the ECMAscript docs.

Top comments (0)