Dive into concise explanations, relatable examples, and handy code snippets for every essential concept a senior developer must know! π₯
π 1. Event Loop
Explanation: The event loop checks if the call stack is empty. If so, it checks the message queue for waiting events and executes them.
Example: π³ Think of a chef (event loop) checking if there's a dish (task) ready. If yes, it's served. If not, they check for new orders (events).
Code:
console.log('First');
setTimeout(() => {
console.log('Second');
}, 0);
console.log('Third'); // Outputs: First, Third, Second
π¨ 2. Critical Rendering Path
Explanation: The steps a browser follows to convert HTML, CSS, and JavaScript into visible pixels.
Example: π’ Think of constructing a building: foundation (DOM), design (CSSOM), and paint (rendering).
Official Resource: π Google Developers - Critical Rendering Path
ποΈ 3. Let, Const, Var and Block Scoping
Explanation:
-
var
: function-scoped, re-declarable, and updatable. -
let
: block-scoped, not re-declarable, but updatable. -
const
: block-scoped, neither re-declarable nor updatable.
Example: π« In a classroom: sections (var
), roll numbers in a section (let
), and birth names (const
).
Code:
var x = 10;
if(true) {
var x = 20;
let y = 30;
const z = 40;
}
console.log(x); // Outputs: 20
π§ 4. Closure
Explanation: A function having access to its own variables, outer function's variables, and global variables.
Example: π A person remembering their name, family name, and celebrities' names.
Code:
function outer() {
let outerVar = 'Outside!';
function inner() {
console.log(outerVar);
}
return inner;
}
const myClosure = outer();
myClosure(); // Outputs: Outside!
π 5. Functional Programming
Explanation: A paradigm where functions are primary, emphasizing immutability and pure functions.
Example: π₯ͺ Making sandwiches using fresh ingredients and the same recipe.
Code:
const array = [1, 2, 3];
const double = array.map(item => item * 2); // [2, 4, 6]
π 6. This Keyword Behavior
Explanation: this
refers to the object executing the current function. Its context varies.
Example: π In class, this
student means the one answering.
Code:
const obj = {
name: 'John',
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // Outputs: John
π οΈ 7. Frameworks Usage
Explanation: Frameworks offer a structure for faster development. Understand their core concepts and the problems they solve.
Example: π Use a car for long distances, not a short walk.
Official Resource: Varies, e.g., π React Docs
π©βπ©βπ§ 8. Prototypical Inheritance
Explanation: In JavaScript, objects inherit properties and methods from others. This is prototypical inheritance.
Example: πͺ Children inheriting traits from parents.
Code:
function Parent() {}
Parent.prototype.sayHello = function() {
console.log('Hello from parent');
};
function Child() {}
Child.prototype = Object.create(Parent.prototype);
const child = new Child();
child.sayHello(); // Outputs: Hello from parent
β 9. Async, Await vs. Promises
Explanation:
-
Promises
: Handle asynchronous operations with states (pending, fulfilled, rejected). -
async/await
: Makes asynchronous code look synchronous.
Example: π Promise is like a task promise. Async/await marks it on a to-do list and waits.
Code:
// Promise
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched');
}, 2000);
});
}
// async/await
async function fetchAndDisplay() {
const data = await fetchData();
console.log(data);
}
β²οΈ 10. Debounce vs Throttle
Explanation:
-
Debounce
: Groups events if they're in quick succession. -
Throttle
: Executes a function at most once in a specified period.
Example: π£οΈ Debounce waits for someone to finish speaking. Throttle limits speech to once every minute.
Code: Using Lodash:
// Debounce
const debouncedSave = _.debounce(() => console.log('Saved'), 300);
// Throttle
const throttledSave = _.throttle(() => console.log('Saved'), 300);
Best of luck with your interviews! ππ
Top comments (3)
A closure is not a function. Even the MDN reference you link says this. ALL functions have access to the set of variables you mention.
One tip I'd suggest:
setTimeout
->window. setTimeout
or evenglobalThis.setTimeout
.ctomczyk.pl/js-tip-always-use-full...
Great article!