Secrets of the JavaScript Ninja

Chapter 1 of 7

🔒 Closures & Scope Chains

A closure gives a function access to variables from its enclosing scope, even after that scope has finished executing. This is the foundation of private variables, callbacks, and most patterns in JavaScript.

Run the code below and watch the scope chain diagram update to show which variables each function can see.

function createCounter(name) {
  let count = 0;  // private — only accessible via closure
  return {
    increment() { count++; log(name + ': ' + count); },
    decrement() { count--; log(name + ': ' + count); },
    getCount()  { return count; }
  };
}

const ninja = createCounter('Ninja');
ninja.increment();
ninja.increment();
ninja.increment();
ninja.decrement();
log('Final count: ' + ninja.getCount());
log('count directly? ' + (typeof count)); // undefined!

▸ Scope chain diagram — click Run to visualize

Next: Prototypes & Inheritance →

Chapter 2 of 7

🧬 Prototypes & Inheritance

Every JavaScript object has a hidden [[Prototype]] link. When you access a property, the engine walks up this chain until it finds it (or hits null). This is how inheritance works — no classes needed.

Run the code and see the prototype chain visualized as connected nodes.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return 'Hello, I am ' + this.name;
};

function Ninja(name, weapon) {
  Person.call(this, name);
  this.weapon = weapon;
}
Ninja.prototype = Object.create(Person.prototype);
Ninja.prototype.constructor = Ninja;
Ninja.prototype.attack = function() {
  return this.name + ' attacks with ' + this.weapon;
};

const yoshi = new Ninja('Yoshi', 'shuriken');
log(yoshi.greet());     // from Person.prototype
log(yoshi.attack());    // from Ninja.prototype
log('Is Ninja? ' + (yoshi instanceof Ninja));
log('Is Person? ' + (yoshi instanceof Person));

▸ Prototype chain — click Run to visualize

Next: Function Context (this) →

Chapter 3 of 7

🎯 Function Context: `this`

The value of this is determined by how a function is called, not where it's defined. This is one of the trickiest parts of JavaScript. There are four rules: default, implicit, explicit (call/apply/bind), and new.

Run the code to see which object this points to in each context.

const katana = {
  name: 'Katana',
  swing() { return 'this → ' + this.name; }
};

const shuriken = { name: 'Shuriken' };

// Implicit: this = katana
log('Implicit:  ' + katana.swing());

// Explicit with call: this = shuriken  
log('call():    ' + katana.swing.call(shuriken));

// Explicit with apply
log('apply():   ' + katana.swing.apply(shuriken));

// bind creates a new function with locked this
const bound = katana.swing.bind(shuriken);
log('bind():    ' + bound());

// Lost context: bare function reference
const loose = katana.swing;
log('Lost ctx:  ' + loose()); // this = undefined/window

▸ this binding diagram — click Run to visualize

Next: Timers & The Event Loop →

Chapter 4 of 7

⏱️ Timers & The Event Loop

JavaScript is single-threaded. Timers don't execute at exact times — they queue a callback for "at least" that delay. Resig's key insight: setTimeout chains guarantee a gap between executions; setInterval fires regardless of whether the previous callback finished.

// Break expensive work into chunks to avoid UI freeze
function processInChunks(items, chunkSize, process) {
  let i = 0;
  function nextChunk() {
    const end = Math.min(i + chunkSize, items.length);
    for (; i < end; i++) process(items[i], i);
    log('Processed up to index ' + (i - 1));
    if (i < items.length) setTimeout(nextChunk, 0);
    else log('✅ All done! UI never froze.');
  }
  nextChunk();
}

const bigArray = Array.from({length: 1000}, (_, i) => i);
processInChunks(bigArray, 250, (item, i) => {
  // Simulate work — in real code this might be DOM updates
  Math.sqrt(item * item + 1);
});

// Demonstrate the difference
let timeoutCount = 0, intervalCount = 0;
const start = Date.now();

// setTimeout chain: guarantees gap AFTER execution
function chainTimeout() {
  if (timeoutCount < 5) {
    timeoutCount++;
    const elapsed = Date.now() - start;
    log('setTimeout #' + timeoutCount + ' at ' + elapsed + 'ms');
    setTimeout(chainTimeout, 50);
  }
}

// setInterval: fires every 50ms regardless
const id = setInterval(() => {
  intervalCount++;
  const elapsed = Date.now() - start;
  log('setInterval #' + intervalCount + ' at ' + elapsed + 'ms');
  if (intervalCount >= 5) clearInterval(id);
}, 50);

chainTimeout();

Next: Regular Expressions →

Chapter 5 of 7

🔍 Regular Expressions

Resig calls regex one of the most underused features in JavaScript. Key techniques: pre-compilation for performance, exec() in a loop for global search with captures, and replace with a function for powerful transformations.

// 1. Replace with a function: camelCase converter
const dashed = 'background-color';
const camel = dashed.replace(/-(\w)/g, (match, letter) => {
  log('Matched: "' + match + '" → "' + letter.toUpperCase() + '"');
  return letter.toUpperCase();
});
log('Result: ' + camel);

log('---');

// 2. exec() loop: extract all tags with captures
const html = '<div class="ninja"><b>Hello</b><i>world</i></div>';
const tagRe = /<(\/?)(\w+)([^>]*)>/g;
let m;
while ((m = tagRe.exec(html)) !== null) {
  const type = m[1] ? 'closing' : 'opening';
  log(type + ' <' + m[2] + '>' + (m[3] ? ' attrs: ' + m[3] : ''));
}

log('---');

// 3. Query string compressor (from the book!)
function compress(data) {
  const q = {};
  data.replace(/([^=&]+)=([^&]*)/g, (_, key, val) => {
    q[key] = (q[key] ? q[key] + ',' : '') + val;
  });
  return Object.entries(q).map(([k,v]) => k+'='+v).join('&');
}
log(compress('foo=1&foo=2&blah=a&blah=b&foo=3'));

Next: Runtime Code Evaluation →

Chapter 6 of 7

⚡ Runtime Code Evaluation

JavaScript can generate and execute code at runtime — via eval(), new Function(), and dynamic <script> tags. Resig shows this isn't just a footgun — it powers JSON parsing, templating engines, and even entire programming languages (Processing.js).

new Function() creates a function without closures — cleaner and safer than eval.

// 1. new Function — dynamic function creation
const add = new Function('a', 'b', 'return a + b');
log('new Function: 3 + 4 = ' + add(3, 4));

// 2. Micro-templating (inspired by Resig's 20-line engine)
function tmpl(str, data) {
  const fn = new Function('d',
    'var p=[];with(d){p.push(\'' +
    str.replace(/[\r\t\n]/g, ' ')
       .replace(/'(?=[^%]*%>)/g, "\t")
       .split("'").join("\\'")
       .split("\t").join("'")
       .replace(/<%=(.+?)%>/g, "',$1,'")
       .split('<%').join("');")
       .split('%>').join("p.push('") +
    "');}return p.join('');");
  return fn(data);
}

const result = tmpl(
  'Hello <%= name %>! You have <%= items.length %> items: <%for(var i=0;i<items.length;i++){%> [<%= items[i] %>]<%}%>',
  { name: 'Ninja', items: ['shuriken', 'katana', 'smoke bomb'] }
);
log(result);

// 3. Function decompilation
function secret(x) { return x * 42; }
log('Decompiled: ' + secret.toString().slice(0, 50) + '...');
log('Arg count: ' + secret.length);

Next: Cross-Browser & DOM →

Chapter 7 of 7

🌐 Cross-Browser & DOM Mastery

Resig's #1 rule: test the feature, not the browser. Use object detection and feature simulation instead of user-agent sniffing. Bugs get fixed — your workarounds should survive.

Try DOM manipulation with the live playground below. The preview updates in real time.

// Feature detection (Resig's approach)
const features = {
  querySelector: typeof document.querySelector === 'function',
  classList: 'classList' in document.createElement('div'),
  addEventListener: 'addEventListener' in window,
  promises: typeof Promise !== 'undefined',
  fetch: typeof fetch !== 'undefined',
  proxy: typeof Proxy !== 'undefined',
};
log('Feature Detection Results:');
Object.entries(features).forEach(([name, supported]) => {
  log('  ' + (supported ? '✅' : '❌') + ' ' + name);
});

log('---');

// DOM manipulation — build a table dynamically
const data = [
  ['Technique', 'Chapter'],
  ['Closures', '3'],
  ['Prototypes', '5'],
  ['Timers', '4'],
  ['Regex', '6'],
];
let html = '<table style="border-collapse:collapse;width:100%">';
data.forEach((row, i) => {
  const tag = i === 0 ? 'th' : 'td';
  const bg = i === 0 ? '#1a2340' : (i % 2 ? '#131a2b' : '#0a0e17');
  html += '<tr style="background:' + bg + '">';
  row.forEach(cell => {
    html += '<' + tag + ' style="padding:8px 12px;border:1px solid #2a3555;color:#c8d6e5">' + cell + '</' + tag + '>';
  });
  html += '</tr>';
});
html += '</table>';
log('Table HTML generated (' + html.length + ' chars)');

// Inject into preview
const preview = document.getElementById('dom-preview');
if (preview) preview.innerHTML = html;

▸ DOM preview — click Run to render

↓ The Way of the Ninja

The Way of the Ninja

"There is nothing simple about creating effective, cross-browser, JavaScript code. But understanding how the very best libraries are constructed can provide great insight into how your own code can be constructed."

— John Resig

Every editor above is live. Modify the code, run it again, break things, fix them. That's how ninjas learn.