This month, I’m participating in the Critical Code Studies Working Group. As part of that, this post focuses on a detail of tiny size but vast proliferation: JavaScript variable names. They are created by humans or machines for other humans or machines. Regardless of how they were generated, variable names are chosen by someone (a programmer) or something (minimizing or obfuscation software). They are texts written across the web, hidden just below the surface of the browser and easily accessible, yet they do not form the written text we see on the screen or the semantic markup of HTML.
Specifically, this post focuses on a list of all 175 JavaScript variable names from amazon.com, which can be viewed here: http://bit.ly/1Oe7ic9. At first glance the JavaScript variable names are seemingly random, but on a closer read they fall into a few different categories, which may help us better understand them.
Functional
Most obvious are variable names written by programmers to be human-readable. This is good programming practice, letting other programmers (and enterprising critical readers) understand what the code does. [1] Two examples are autorotation_delay and classAttr. These kind of variable names also suggest a bit of the functional structure of the code, even without looking at it in context: elem and elems are likely part of a for-loop (ie: for (elem in elems) { }). Similarly, the readable names tell us a bit about what’s on the page: six variable names with the word carousel suggest a carousel of images; rhfShovelerBootstrapFunction probably means Amazon uses the popular Bootstrap framework. [2]
Obscured
While internet connection speeds have greatly increased for desktop users, the widespread use of mobile devices still requires developers to compress files as much as possible. This has given rise to “minimized” code, a process that can shrink JavaScript files by as much as 60%. [3] But a less egalitarian reason for compressing code has arisen: since JavaScript runs so much of websites’ functionality, the source code becomes an important intellectual property for the company that developed it. Purposefully “obfuscating” source code using special software in order to hide the code’s functionality has become much more common. [4]
Most often, variable names in obfuscated code become single letters, removing any linguistic connection to their function. For example, here are all the one-letter variables:
a, b, c, D, d, e, f, g, h, I, i, k, K, L, M, m, n, O, o, p, q, r, s, t, U, u, V, v, W, y, z
The only exception to this is common shorthand variable names used in specific contexts. The letter i is commonly used as a temporary variable in a for-loop (ex: for (var i=0; i<10; i++) { }), often followed by j in nested loops.
It is well outside the scope of this post to talk in more detail about the input/output of obfuscation programs, or to do a close read of obfuscated code, though is certainly would be a worthwhile endeavor!
JQuery
The shift from static websites to app-like interfaces running JavaScript has also seen the rise of code libraries to extend and simplify site development, the most popular of which is JQuery. The site Libscore lists JQuery as being used in 698,359 of the top one-million websites and its use far outpaces any other library. [5]
JQuery variables are denoted with $ at the start of their names, for example: $e, $controls_el, and $tgt. Of course, Amazon using JQuery is no surprise, but looking for the telltale $ gives us a quick way of seeing where it is used.
Surprisingly funny and human
Finally, among the functional and obscured, sometimes we find variables with surprisingly funny and human touches. Amazon’s corporate culture probably makes this less likely than other sites, but there are two examples in this list: expando and spinner_death_classname_regex.
Amazon’s variable names are all very above board, but the diversity problems of Silicon Valley are well known: in 2013, Gizmodo reported on the common use of racist, homophobic, and misogynistic language that “casually riddles” code repositories on the site GitHub. [6] Unlike obfuscated code, which has been transformed into text by machines for machines, these variable names show the human mind at the keyboard (for better or worse) and are a reminder that code is, at least when first written, another form of written language.
Notes
- This is known as “self-documenting code” in programming circles, but might also be thought of as an aptronym (a person’s name that describes what they are or do) or a autological word (a word that expresses a property that it also possesses). Hat-tip to the #botALLY community for their help identifying these terms.
- Some of this is obvious from looking at the source code and HTML, but because one of JavaScript’s main functions is to manipulate the HTML Document Object Model (DOM), the connection between code and content is not always clear.
- The site CompressorRater shows the results of many different compression algorithms and settings. http://compressorrater.thruhere.net
- A little more on this here: https://en.wikipedia.org/wiki/Obfuscation_%28software%29.
- The next most popular is Facebook’s developer library, which is used in only 183,760 sites. https://libscore.com/#FB
- The original Gizmodo post: http://gizmodo.com/5980842/there-is-blatant-racist-and-sexist-language-in-github-code