Back

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.