JavaScript
The core programming language of the Worldwide Web, JavaScript continues the tradition of delivering a radically distinct language in the deceptively familiar wrapping of a “curly brace” syntax.
js-eq
Use
===
and!==
for equality and inequality, respectively.
- Reason
-
The traditional curly brace comparators
==
and!=
do not behave in the same way in JavaScript: these comparators may perform implicit coercions or conversions that can lead to unexpected results.===
and!==
behave more consistently. - Example
-
while (comparator === tripleEquals) { result = equalityYouCanTrust; }
- Anti-Example
-
if (0 == "") { umm(); no(); }
js-tf
Favor truthiness and falsiness unless you mean something that is truly more specific.
- Reason
-
JavaScript’s convention for what evaluates to “falsy”—
null
,undefined
,0
,false
,""
,NaN
—is, for the most part, appropriate in a lot of cases. This makes conditionals shorter, and thus more readable and less error-prone. - Caveat
- The assumption here is that the code’s readers and writers are clear on what is truthy and falsy in JavaScript. If not, then…ensure that they are.
- Exception
-
There will certainly be times when the truthy/falsy convention will not apply, and in those cases,
by all means use a more specific comparison. Doing this consistently—i.e., resorting to a specific
comparison, such as
!== null
or=== undefined
, only when such specificity is needed—helps communicate this very necessity to your code’s readers. - Example
-
if (networkResponse) { processTheResponseOnlyIfThereIsOne(); }
- Anti-Example
-
while (input.length === 0) { emptyStringsAreAlreadyFalsy(); andYouMightWantToLoopIfNullOrUndefinedAnyway(); }
js-func
Favor assigning functions to variables over function statements.
- Reason
-
Functions in JavaScript are truly first-class objects in the programming language design sense of the
term: they can be passed as arguments, returned from a function, and assigned to a variable. The use
of function statements (i.e.,
function someFunction(arguments) { ... }
) obscures this semantics, presumably so that JavaScript looks “less foreign” in relation to other languages. But this particular language feature is foreign in relation to them, and should thus look correspondingly different. - Corollary
-
Function definitions are essentially function statements without a name, so formatting them with a space
between
function
and the parameter list is consistent with this distinction (i.e.,function nameOfFunction(...)
withnameOfFunction
removed is simplyfunction (...)
). - Example
-
var handleResponse = function (response, status) { doSomethingWithResponseAndStatus(); andNoteHowYouCanPassThisFunctionAsAnArgument(); orReturnItAsAFunctionResult(); };
- Anti-Example
-
function handleResponse(response, status) { firstClassStatusIsObscured(); scopingMightAlsoBeAProblem(); }
js-var
Precede all variable declarations with
var
.
- Reason
-
In JavaScript, a declared identifier that does not begin with
var
is placed at the top-level scope—i.e., it becomes a global variable. Always preceding a declaration withvar
represents an abundance of caution toward never letting that happen unintentionally. This also makes refactors such as adding, removing, or relocating variable declarations less error-prone. - Example
-
var options = { timeout: 500 }; var initialValue = 10; var cleanup = function () { element.innerHTML = ""; input.value = 0; };
- Anti-Example
-
var options = { timeout: 500 }, initialValue = 10, cleanup = function () { element.innerHTML = ""; input.value = 0; };