Here’s a breakdown of advanced JavaScript concepts along with explanations and practical examples:
1. Closures
Concept:
A closure is when a function “remembers” the environment in which it was created, even after the outer function has finished executing.
Example:
function outer() {
let counter = 0;
return function inner() {
counter++;
console.log(counter);
};
}
const count = outer();
count(); // 1
count(); // 2
Explanation:
The inner function retains access to the counter variable even after outer has returned.
2. Promises and Async/Await
Concept:
Promises are used for asynchronous operations. async/await is a cleaner syntax for working with promises.
Example:
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve("Data received"), 1000);
});
}
async function getData() {
const data = await fetchData();
console.log(data);
}
getData(); // Logs "Data received" after 1 second
3. Currying
Concept:
Transforming a function with multiple arguments into a sequence of functions, each taking a single argument.
Example:
function multiply(a) {
return function(b) {
return a * b;
};
}
const double = multiply(2);
console.log(double(5)); // 10
4. Debounce and Throttle
Concept:
Used to control the rate of function execution, especially for events like resize or scroll.
Debounce Example:
function debounce(fn, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Resized');
}, 500));
5. Event Loop and Microtasks
Concept:
JavaScript uses an event loop to handle asynchronous code execution via the call stack, task queue, and microtask queue.
Example:
console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
Output:
Start
End
Promise
Timeout
6. Prototypes and Inheritance
Concept:
JavaScript uses prototypal inheritance. Objects can inherit properties from other objects.
Example:
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
const dog = new Animal('Dog');
dog.speak(); // Dog makes a noise.
7. Modules (ES6 Modules)
Concept:
JavaScript modules allow you to export and import code between files.
Example:
// file: math.js
export function add(a, b) {
return a + b;
}
// file: app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
8. Destructuring and Spread/Rest Operators
Concept:
Destructuring extracts values from objects or arrays. Spread copies elements/properties; Rest gathers them.
Example:
const user = { name: 'Alice', age: 30 };
const { name } = user; // Destructuring
console.log(name); // Alice
const arr = [1, 2, 3];
const newArr = [...arr, 4]; // Spread
console.log(newArr); // [1, 2, 3, 4]
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0); // Rest
}
console.log(sum(1, 2, 3)); // 6
Would you like interactive examples (via CodePen or JSFiddle), or a printable summary PDF of these?