DEV Community

Cover image for JavaScript Ninja Code
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript Ninja Code


We will only look at two types of code ninja:

  • Red Hat Ninja Coders - Dangerous Ninja
  • White Hat Ninja Coders - Peaceful Ninja

Red Hat Ninja Coders

Short and Dangerous

There is some code that if a developer comes across, you can have a hard time understanding.
The intention of writing such codes is to hide or make secret.

See the example below:

let x;
x = x ? x < 211332 ? Math.max(0, $ + x) : x : 3;

// 3
Enter fullscreen mode Exit fullscreen mode

The code above may mislead you into thinking the syntax is wrong. It is just a short code hidden in the dark forest to confuse viewers!

The code above is the same as the code below:

let x;
x = Math.max(0,3);

// 3
Enter fullscreen mode Exit fullscreen mode

In the first example, the number 211332 and data $ + x are for fancy to confuse other developers reading the code.

All attempts to debug or find what $ means will always fail.

A more dangerous ninja code is shown below:

let x; 
x = x ? x < i ? Math.max(j, k) : x : 3;
Enter fullscreen mode Exit fullscreen mode

Now it is worst because you have to debug the script to find what i, j, k really are. Lifetime debug! 😔


One letter variable screws everything

A single-letter name disappears in the code like a real ninja in a dark forest. No one will be able to find it using the search of the editor. And even if someone does, they won’t be able to interpret it.

In the example below, finding i with Ctrl + F means finding thousands of other unrelated keywords, variables, functions, etc containing the letter i.

let x; 
x = x ? x < i ? Math.max(j, k) : x : 3;
Enter fullscreen mode Exit fullscreen mode

Also, a real ninja will never use i as the counter (i is a common name in programming to mean counter or iteration in loops). They prefer to use letters like k x y, etc to provide clueless meaning to the code.



Intuitive abbreviations

Intuitive abbreviation names are left out for other intuitive programmers to understand.

For example:

string --> str
list --> lst
userAgent --> ua

Abstract words like data obj arr item elem are popular names but clueless names. For example, a script filled with a data variable gives no meaning since variables hold data. Also, variables named value gives no meaning since variables eventually get a value.

Attention Names

Maybe you can use data1 data2 ...dataN for data variables. A script with many of such variables becomes impossible to read and one typo means getting stuck forever.

Underscore for fun

One will expect names with underscore like _name, _string to be exciting variable or function names to discover, but such names are intended to allure other developers to read code but waste their time. Maybe the result is an error! 😲


White Hat Ninja Coders

Smart prefix names

Prefix on variable, function names makes you aware of what to expect as the result.

For example:

showMessage --> show a message;
hideNavigation --> Hide a navigation;
toggleSideBar --> Toggle a sidebar;
printPage --> Print a page;
printMessage --> Print a page;

showMessage when an event is fired like clicking a button is a good name.

Partial love

Names like superElement megaFrame niceItem will definitely enlighten a reader but on the other hand, appended name, Element Frame Item brings no detail. Maybe we should call these types of ninja programmers or coders Gray Hat Ninja because they always want to make fun to trick other developers.

I will stop here for now.

Which one are you, a red hat ninja, gray hat ninja, or white hat ninja programmer? Maybe there are more red hat ninja than white hat ninja. 🤔

Observation

  • Most libraries and frameworks script source url contain red hat ninja code.

Conclusion

  • A novice can sometimes be an unaware red hat ninja programmer.
  • An expert or professional developer is most often a red hat ninja coder.
  • White hat ninja are rare these days.
  • Gray hat ninja developers are the clown! 🤡

Happy Coding!!!


Buy me a Coffee


TechStack Media | Bluehost

  • Get a website with a free domain name for 1st year and a free SSL certificate.
  • 1-click WordPress install and 24/7 support.
  • Starting at $3.95/month.
  • 30-Day Money-Back Guarantee.

Top comments (0)