More Efficienter JavaScript
Two Very Simple Steps to Optimize Your Front-end
Writing efficient code is typically an afterthought, coming after writing functional and maintainable code. This has lead to a large population of sites riddled with technical debt and slowness. As this is my last two weeks at the NBA, I decided to reflect on the two most important things I’ve learned in my time here — the two simplest steps in making JavaScript more efficient.
Use jQuery
Programming frameworks like jQuery can be used to abstract code functionality in less lines of code, which ultimately means a more efficient app. This is an unpopular opinion with developers who feel like new programmers should focus on the raw basics, but efficiency is something every level of programmer can and should strive for from the moment they write their first monad.
Developers complain that jQuery is too “big” — they seem to forget that JavaScript is even *bigger*.
JavaScript is shipped with browsers, and browsers are inherently bigger than their 3rd party library counterparts.
Basically all of JavaScript is approximately 8 jQueries. Do the math.
All Global Everything
I could write a book on the harm in not making your variables global, but I want to focus on the efficiency of doing and not doing so. In the following experiments I used jsPerf — which is an abbreviation of JSPerfection, a tool used to let you test how perfect your JavaScript is.
I conducted a Turing Test on variable declarations to see if using a one-letter non-global variable is more efficient than a longer named non-global variable. A Turing Test is a test that shows whether the code is acting like we (humans) would like it to. I’d like the one-letter variable to be more efficient. This turns out to not be the case:
So to pass the Turing Test, we have to get rid of var and make these variables global. As you can see in the following test, removing var makes the one-letter variable more efficient than the longer one. Turing Test passed!
The other good thing about getting rid of var is that — if you are part of the school of thought that all variables should be declared — you can still declare the global variable and *then* assign it. Doing or not doing it both shows “fastest” results. You win either way.
Besides being efficient by only using global variables, you do not have to worry about abstraction keeping your other methods from accessing the variables when needed. So, by making your variables global, you are ultimately making your web application faster (no scope analysis) *and* more accessible. This is the law, believe it or not.
I know it sounds like a stretch to think that these two simple steps will bring you more efficient code, but sometimes you have to be efficient in picking your number of steps just like in writing your code. This is what it means to be a 10x developer.
Jenn Schiffer is a government contracted code optimizer and hobbyist wood craftswoman in central New Jersey.
