The Ternary and Bracket Notation Pattern in JavaScript

Article Purpose

The purpose of this article is to showcase a clean and concise pattern that replaces a common four plus lines-of-code (4+ LOC) if/else statement with a two lines-of-code (2 LOC) ternary-bracket-notation statement. A 50% or greater LOC reduction while maintaining clarity is the win.

Ternary Operator

The ternary operator is a clean and concise alternative to the commonly used if/else statement. I won’t go into detail, but feel free to dig deeper via Mozilla's Conditional (ternary) Operator documentation.

At its core, the ternary operator can often replace a multi-line if/else with a succinct one-liner.

Bracket Notation

Bracket notation is a useful and flexible object property access alternative to the more common dot notation. When dynamic property access of an object is of value in a program or snippet, then bracket notation is a great feature to leverage.

The Pattern

The pattern succeeds by drastically decreasing lines-of-code while maintaining clarity. I have leveraged this approach many times in the past without formally acknowledging it. In recently watching Kyle Simpson’s Deep JS Foundations course on Frontend Masters (highly recommended btw) one of his snippets jumped out and reminded me of my approach.

I figured my approach had a formal name, but in searching online I could not find one (let me know otherwise @derekknox). This article exists to acknowledge the pattern.

Below is Kyle Simpson’s (aka @getify's) original snippet followed by my sequence of improvements that reduce LOC while maintaining clarity:

/* 1st Approach - 6 LOC */

if(insertBefore) {
  workElements[adjacentWorkEntryId].before($workEntry);
}
else {
  workElements[adjacentWorkEntryId].after($workEntry);
}

This snippet can be shortened easily by removing the braces:

/* 2nd Approach - 4 LOC (curly brace removal) */

if(insertBefore)
  workElements[adjacentWorkEntryId].before($workEntry);
else
  workElements[adjacentWorkEntryId].after($workEntry);

We can improve this snippet further by adhering to the DRY principle:

/* 3rd Approach - 2 LOC (ternary replaces if/else and bracket notation replaces !DRY code */

var method = insertBefore ? 'before' : 'after';
workElements[adjacentWorkEntryId][method]($workEntry);

This 2 LOC snippet can become a 1 LOC snippet, but the sacrifice of readability isn't worth it.

Conclusion

The pattern works great for any API method that has a binary counterpart.

Above, the before()/after() of jQuery were used. The on()/off() works just as well in jQuery as does the browser’s built-in addEventListener()/removeEventListener() if you rock vanilla. I’m sure you can think of many other binary method pairs that could leverage this pattern.

If you have a pseudo-acronym or pattern name, I would love to hear it on Twitter @derekknox. “Terbo”, “Terbra”, and “Terbrano” seemed really lame. The last one sounds like a pepper actually 🔥.