Advanced JavaScript Explained — RegExp, Typed Arrays, Proxy & Performance
After mastering the fundamentals, these advanced JavaScript topics will deepen your understanding: regular expressions for pattern matching, typed arrays for binary data, Proxy/Reflect for meta-programming, and performance optimization patterns.
What You’ll Learn
- Regular expressions — patterns, flags, match, replace
- Typed arrays and ArrayBuffers for binary data
- Proxy and Reflect for intercepting object operations
- Performance optimization — debounce, throttle, Web Workers
- Code style best practices
Why Advanced JavaScript Matters
Real-world applications need more than basic syntax. The Doda Browser uses regular expressions to parse URLs and filter bookmarks, typed arrays to process binary file data, and Proxy for reactive state management. The Durga Antivirus Pro engine uses typed arrays to scan file signatures at high speed and Web Workers to process threat detections without blocking the UI. These advanced features separate entry-level code from production-grade applications.
Learning Path
flowchart LR
A[JavaScript Modules] --> B[Advanced JS]
B --> C[Performance Optimization]
B --> D[Binary Data Processing]
B --> E[Meta-Programming]
B --> F[You Are Here]
Regular Expressions
A regular expression (RegExp) is a pattern used to match character combinations in strings. Think of it like a search term with superpowers — you can match patterns, not just exact text.
// Two ways to create
const regex1 = /hello/i; // Literal (i = case-insensitive)
const regex2 = new RegExp('hello', 'i');
// Test if a pattern exists — returns true/false
console.log(/^\d+$/.test('123')); // true — all digits
console.log(/hello/i.test('Hello')); // true — case-insensitive
// Find matches
console.log('Hello World'.match(/[A-Z]/g)); // ['H', 'W']
console.log('abc123def'.match(/\d+/)); // ['123']
// Replace
console.log('Hello, World!'.replace(/World/, 'JS')); // 'Hello, JS!'
Common Patterns
/^\s+|\s+$/g // Trim whitespace
/\b\w+\b/g // Match words
/^[\w.-]+@[\w.-]+\.\w{2,}$/ // Basic email validation
/https?:\/\/[^\s]+/g // Match URLs
/\d{4}-\d{2}-\d{2}/ // Date YYYY-MM-DD
Flags
g— Global (find all matches, not just the first)i— Case-insensitivem— Multiline (^and$match line boundaries)s— Dotall (.matches newlines)u— Unicode (enable Unicode property escapes)
Typed Arrays
Typed arrays give you direct access to raw binary data — crucial for performance-critical applications like file parsing, graphics, and cryptography:
// Create a typed array with 4 integers (default: 0)
const int32 = new Int32Array(4);
int32[0] = 42;
int32[1] = 100;
// From existing data — convert bytes to string
const bytes = new Uint8Array([72, 101, 108, 108, 111]);
console.log(new TextDecoder().decode(bytes)); // 'Hello'
Typed Array Types
| Type | Size | Description |
|---|---|---|
Int8Array | 8-bit | Signed integer (-128 to 127) |
Uint8Array | 8-bit | Unsigned integer (0 to 255) |
Uint8ClampedArray | 8-bit | Clamped 0-255 (used by Canvas) |
Int16Array | 16-bit | Signed integer |
Uint16Array | 16-bit | Unsigned integer |
Int32Array | 32-bit | Signed integer |
Uint32Array | 32-bit | Unsigned integer |
Float32Array | 32-bit | Float |
Float64Array | 64-bit | Double precision float |
ArrayBuffer & DataView
ArrayBuffer allocates raw memory. DataView gives you flexible access:
// Allocate 16 bytes of raw memory
const buffer = new ArrayBuffer(16);
// DataView — read/write different types at any byte offset
const view = new DataView(buffer);
view.setInt32(0, 12345); // Write int32 at byte 0
view.setUint8(4, 255); // Write uint8 at byte 4
view.getFloat64(8); // Read float64 at byte 8
Real-world use: Parsing binary file formats (images, audio, ZIP archives), WebSocket protocols, and canvas pixel data. DodaZIP uses ArrayBuffers to process compressed archives efficiently.
Proxy & Reflect
Proxy lets you intercept and customize operations on objects — like having a security guard who checks every request before allowing it:
const target = { message: 'hello' };
const handler = {
get(obj, prop) {
if (prop in obj) {
return obj[prop];
}
return `Property "${prop}" not found`;
},
set(obj, prop, value) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
obj[prop] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.message); // 'hello'
console.log(proxy.unknown); // 'Property "unknown" not found'
proxy.age = 25; // Works
// proxy.age = 'old'; // TypeError!
Common Proxy traps: get, set, has, deleteProperty, apply, construct.
Reflect
Reflect provides methods that mirror Proxy traps — useful for forwarding default behavior:
const obj = { a: 1 };
Reflect.get(obj, 'a'); // 1
Reflect.set(obj, 'b', 2); // true
Reflect.has(obj, 'a'); // true
Reflect.ownKeys(obj); // ['a', 'b']
Performance Optimization
Debounce — Limit Rapid Calls
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}Use for: search inputs where you want to wait until the user stops typing.
Throttle — Limit Call Rate
function throttle(fn, limit) {
let inThrottle = false;
return (...args) => {
if (!inThrottle) {
fn(...args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}Use for: scroll and resize events.
Web Workers
For CPU-heavy tasks that would block the UI:
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ cmd: 'process', data: largeArray });
worker.onmessage = (e) => console.log('Result:', e.data);
// worker.js
self.onmessage = (e) => {
const result = heavyProcessing(e.data);
self.postMessage(result);
};Style Guide & Best Practices
// Naming conventions
const firstName = 'Alice'; // camelCase for variables/functions
class UserController { } // PascalCase for classes
const MAX_RETRIES = 3; // UPPER_SNAKE for constants
// Always use === and !==
// Prefer const over let, never use var
// Use template literals over string concatenation
// Use arrow functions for callbacks
// Prefer array methods (map, filter, reduce) over for loops
// Use optional chaining (?.) and nullish coalescing (??)
// Comment why, not what (the code shows what)
Common Mistakes
1. Using RegExp when simpler string methods work
str.match(/hello/); // Works, but...
str.includes('hello'); // Simpler, faster
2. Not escaping special characters in RegExp
const userInput = 'hello.world';
new RegExp(userInput); // '.' matches ANY character — security risk
3. Overusing Proxy when a simple setter suffices
Proxy adds overhead. Use it for validation, logging, and reactivity — not as a replacement for regular getters/setters.
4. Causing layout thrash in the DOM
el.style.left = '10px'; // Triggers reflow
el.style.top = '20px'; // Triggers reflow again
Fix: Batch DOM changes or use transform.
5. Creating memory leaks with closures
function createLeak() {
const large = new Array(1000000).fill('x');
return function() {
console.log(large.length); // Huge array can't be GC'd
};
}Practice Questions
What’s the difference between
Int32Arrayand regular arrays? Typed arrays store elements in a contiguous binary buffer with a fixed type and size. They’re faster and use less memory but lack methods likemapandfilter.When should you use Proxy? For validation, logging, reactive programming, and domain-specific languages. Avoid it for simple property access.
How do you prevent memory leaks? Clean up event listeners and intervals, use WeakMap for cached references, avoid global variables.
What’s the difference between debounce and throttle? Debounce delays execution until after a pause. Throttle limits execution rate to once per interval.
Challenge: Build a reactive observe(obj, callback) function using Proxy that calls callback whenever any property on obj is set.
FAQ
Try It Yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced JS Playground</title>
<style>
body { font-family: Arial, sans-serif; padding: 2rem; }
pre { background: #f4f4f4; padding: 1rem; border-radius: 5px; }
</style>
</head>
<body>
<h1>Advanced JS Sandbox</h1>
<pre id="output"></pre>
<script>
const out = document.getElementById('output');
let result = '';
// Regular Expression
const text = 'Contact: alice@example.com or bob@test.org';
const emails = text.match(/[\w.-]+@[\w.-]+\.\w{2,}/g);
result += `Emails found: ${emails.join(', ')}\n\n`;
// Proxy — validation
const validator = {
set(obj, prop, value) {
if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
throw new Error('Age must be a positive number');
}
obj[prop] = value;
return true;
}
};
const user = new Proxy({}, validator);
user.name = 'Alice';
user.age = 25;
result += `User: ${user.name}, ${user.age}\n`;
try {
user.age = -5;
} catch (e) {
result += `Error caught: ${e.message}\n`;
}
out.textContent = result;
</script>
</body>
</html>What’s Next
Now that you’ve mastered advanced JavaScript, explore related technologies:
| Lesson | Description |
|---|---|
| JavaScript Home | Back to the JavaScript hub |
| https://tutorials.dodatech.com/programming-languages/javascript/js-reference/ | JavaScript Reference & Cheatsheet |
| TypeScript Guide | TypeScript — typed JavaScript superset |
| Node.js | Server-side JavaScript runtime |
| WebAssembly | High-performance code in the browser |
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.
What’s Next
Congratulations on completing this Js Advanced tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro