I guess we can all agree that the most fun part of anything related to JavaScript is reading foreign JavaScript code 🙂
But while most of any hardness in understanding foreign (especially older) code lies in the every-year-fluctuations in common style – I also can’t really tell why I have this urge to change each “function” to a “const” declaration nowadays – once in a while you stumble across some feature, that is just too arcane.
Which means that it’s at least worth knowing about – after that, you can decide for yourself whether these enter your active vocabulary.
So these are some of my recent findings. Feel free to add.
Labelled Loops
JavaScript allows you to label any statement with a unique identifier. This is probably not a surprise for any Svelte developer (the $:… syntax is exactly that), but it is most useful in loops, because you can break or continue an outer loop using this:
// "outer" is the label here
outer: for (...) {
for (...) {
...
if (weAreDone()) break outer;
}
}
It might have some old-school “GOTO” vibes indeed, and one can argue that in most cases there might be a more concise solution right around the corner, but especially if you have a tricky lookup algorithm, this might come handy one day.
Comma Operator
While I wondered for some years who on earth actually uses the Comma operator in C/C++, just a few weeks ago I found out that JavaScript actually has the same thing.
It allows you to execute some expression, ignoring it’s return value and directly execute the next statement in that same expression.
// (expr1, expr2) does evaluate expr1 and expr2 and return expr2.
const a = (b = 5, 3);
// a is now 3, but b = 5;
let a, b;
for (a = 0, b = 0; a + b < 3; a++, b++) { console.log(a, b) }
// output:
// 0 0
// 1 1
However, I would not advise using this thing ever. I mean, if you have some complicated expression where you decide just to do some step before evaluating some crucial other step – maybe it’s time to refactor the whole method.
void Operator
The void operator is like a special case of the comma operator in that it evaluates something and then returns undefined.
const a = calculateStuff(); // a might be whatever
const b = void calcaluteStuff(); // b is undefined
const c = (calculateStuff(), undefined); // c is identical to b, see above
This is e.g. an expression that I found while having to read some minified React code. So it might be of a certain use if you want to minify the number of letters in your code, but a more readable way would be just defining a function evaluating calculateStuff(), then returning without a return value.
However, the MDN web docs (referenced again here) give some real use cases of that operator, so if you are into that cryptic knowledge, go right ahead.
Bitwise NOT as a “found in List” check
Recently, I was weirded out by having to look at a list inclusion check in the likes of:
const list = ["a", "b"];
if (~list.indexOf("a")) {
alert("found");
}
And this piece of code will actualy reach the alert, while it might leave you in wonders what the “~” is doing here. Unless you are used to very low-level bit arithmetic, in which case you’d directly recognize the bitwise NOT. It’s the operator that inverts every bit of a binary representation of a number to it’s opposite.
And the whole magic here lies in that for normal numbers (or BigInt), this is mathematically the same as
~a = -a - 1;
especially:
~-1 = 0
~0 = -1
and that for JavaScript, 0 is a falsy value while any other number is a truthy one. So this code above is used just to explicitly distinguish whether indexOf() returned “-1”, which it does if the object in question was not found.
So there you have it, but I’d rather use the way more readable
if (list.includes("a")) {...}
Bonus: console.log() styling
Now this does not really fit to the other operations above, but nevertheless I hear of people who did not know that before, so I’ll just drop it.
If there is any argument of console.log() starting with “%c”, it will take the next argument as a styling instruction instead of normally printing it. That is, the next argument needs to be a valid string that could also appear in a HTML stlye=”…” attribute, as
console.log("%cSo Big!", "font-size: 100pt; color: magenta");
Now, considering that console.log() is really only the most rudimentary way to output some statements for debugging (and one usually neglects the other ones like console.time(), console.timeEnd(), console.table()), this is not the next biggest thing that your imaginary Crypto Blockchain AI SaaS startup just needed, but it’s neverless good to know if you need some distinction in your logs.
Conclusion: Do whatever you like with that knowledge
While there are many things that one might love or hate about JavaScript – e.g. you might like the boolean-coercion via !! or you might hate the ??= or you might, with a mission, peddle generation expressions with function*/yield to your team – or or or… – there are always some more things that even after some years just look weird to my trained eye.
I guess it’s not completely wrong to thing that such expressions are occult for a specific reason in that there are only a handful of legit use cases for these, and forcing occult expression in a code that exceeds script size might cause some serious pain in the future.
But nevertheless, knowledge is power, so have a nice powerful evening.
Schneide Blog 