Do You Know JS?
JavaScript has secrets most devs never discover. From bitwise magic to redefining `undefined`—let's uncover the quirks that make JS...JS.
Ever coded in JavaScript and thought, "Wait, what?!" Yeah, me too. JS is packed with clever tricks, legacy landmines, and "why does this even exist?" moments. Let's dive into some gems that separate casual coders from JS wizards.
The Tilda (~): Your Secret Weapon
First up: the humble ~ operator. It's bitwise negation, but hackers use it like this:
// Old-school: "Does this array have my item?"
const fruits = ['apple', 'pear', 'banana'];
if (~fruits.indexOf('apple')) {
console.log('🍎 Found it!');
}
// Magic: ~(-1) = 0 (falsey), any positive → truthy negative
Pro tip: fruits.includes('apple') is cleaner, but knowing the ~ trick makes you look like a wizard.
And the double tilda? Instant integer truncation:
console.log(~~12.34); // 12
console.log(~~(-12.34)); // -12
Void: The Sneaky Undefined Trick
Want an arrow function that just does something and vanishes? Meet void:
// Wordy
() => { console.log('poof!'); return undefined; }
// Ninja style
() => void console.log('poof!')
Clean, right?
Escape Nested Hell with Named Loops
Nested for loops driving you crazy? Label them:
outerLoop: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (j === 1) break outerLoop; // Bye outer loop!
}
}
No more goto debates.
The Day undefined Stopped Being Undefined
Pre-ES5 bombshell: You could actually overwrite undefined globally in non-strict mode. Libraries did this to "protect" it:
// Clever old pattern
(function(root, undefined) { // Pass undefined as param
console.log(undefined === void 0); // Always true
})(this);
// Or just use this forever:
void 0 === undefined // ✅ Safe
Don't try redefining it locally though:
function sneaky() {
var undefined = "hijacked!";
console.log(undefined); // "hijacked!"
}
Modern Superpowers: Web APIs
MutationObserver: DOM Change Radar
new MutationObserver(() => console.log('DOM changed!'))
.observe(document.body, { childList: true, subtree: true });
React devs: This powers your virtual DOM magic.
Navigator: Know Your User
navigator.language // "en-US"
navigator.onLine // true/false
navigator.userAgent // "Mozilla/5.0..."
Proxy: Object Bodyguard
Want to trap property access? Proxy to the rescue:
const user = { name: 'John' };
const secure = new Proxy(user, {
get(target, prop) {
return prop in target ? target[prop] : 'Classified!';
}
});
console.log(secure.age); // "Classified!"
Destructuring: Delete Without delete
const { id, ...cleanData } = { id: 1, name: 'Test', value: 42 };
console.log(cleanData); // { name: 'Test', value: 42 }
with: The Forbidden Fruit
This exists. Don't use it.
with(Math) {
console.log(cos(PI)); // -1
}
// Why browsers hate it: scope confusion nightmare
So... What's the Point?
These aren't just trivia—they're why JS works the way it does. The hacks shaped modern patterns. The landmines teach us strict mode. The APIs power your apps.
Bottom line: Know them. Use a few. Never stop being curious.