JavaScript Advanced Features
—
### 1. **Closures**
Closures allow a function to retain access to its lexical scope even when executed outside its original scope.
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(`Outer: ${outerVariable}, Inner: ${innerVariable}`);
};
}
const newFunction = outerFunction("Hello");
newFunction("World"); // Output: Outer: Hello, Inner: World—
### 2. **Currying**
Currying is a technique where a function takes multiple arguments and transforms them into a sequence of functions.
function curry(a) {
return function(b) {
return function(c) {
return a + b + c;
};
};
}
console.log(curry(1)(2)(3)); // Output: 6—
### 3. **Promises & Async/Await**
Promises handle asynchronous operations efficiently, and `async/await` simplifies their syntax.
function fetchData() {
return new Promise(resolve => {
setTimeout(() => resolve("Data received"), 2000);
});
}
// Using async/await
async function getData() {
console.log("Fetching data...");
let result = await fetchData();
console.log(result);
}
getData();—
### 4. **Generators**
Generators allow functions to be paused and resumed.
function* generatorFunction() {
yield "Step 1";
yield "Step 2";
yield "Step 3";
}
const gen = generatorFunction();
console.log(gen.next().value); // Output: Step 1
console.log(gen.next().value); // Output: Step 2
console.log(gen.next().value); // Output: Step 3—
### 5. **Proxies**
Proxies allow us to intercept and modify fundamental operations on objects.
const handler = {
get: (obj, prop) => {
return prop in obj ? obj[prop] : "Property not found";
}
};
const person = { name: "Alice", age: 25 };
const proxyPerson = new Proxy(person, handler);
console.log(proxyPerson.name); // Output: Alice
console.log(proxyPerson.gender); // Output: Property not found—
### 6. **Reflect API**
The `Reflect` API allows easy manipulation of objects.
const user = { name: "John" };
Reflect.set(user, "age", 30);
console.log(Reflect.get(user, "age")); // Output: 30—
### 7. **WeakMap & WeakSet**
These structures allow garbage collection of unused objects.
let wm = new WeakMap();
let obj = {};
wm.set(obj, "value");
console.log(wm.get(obj)); // Output: value
obj = null; // Now, the reference is removed, and it will be garbage collected.—
### 8. **Event Loop & Microtasks**
JavaScript runs tasks asynchronously using an event loop.
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");
// Output:
// Start
// End
// Promise
// Timeout—
### 9. **Debouncing & Throttling**
These optimize performance by limiting function execution frequency.
#### **Debouncing**
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
const processChange = debounce(() => console.log("Debounced!"), 1000);
window.addEventListener("resize", processChange);#### **Throttling**
function throttle(func, limit) {
let lastCall = 0;
return function(...args) {
let now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
func.apply(this, args);
}
};
}
const log = throttle(() => console.log("Throttled!"), 2000);
window.addEventListener("scroll", log);—
### 10. **Function Composition**
Combining multiple functions into a single function.
const add = x => x + 1;
const double = x => x * 2;
const compose = (f, g) => x => f(g(x));
const addThenDouble = compose(double, add);
console.log(addThenDouble(3)); // Output: 8—
These advanced features make JavaScript highly powerful and enable developers to write efficient, modular, and scalable applications. Let me know if you need further explanation on any of these!