Hoisting
Hoisting is JavaScript's default behavior of moving variable and function declarations to the top of their scope
before code execution. Variables declared with var are hoisted and initialized with undefined, while let and const
are hoisted but not initialized (Temporal Dead Zone). Function declarations are hoisted with their definitions.
Quick Code Example:
[Link](a); // undefined
var a = 5;
test(); // "Hello"
function test() {
[Link]("Hello");
}
Output:
undefined
Hello
Key Points to Emphasize:
• Variable & function declarations are hoisted
• let/const have Temporal Dead Zone
• Function expressions are not hoisted
Promises
A Promise in JavaScript represents the eventual completion or failure of an asynchronous operation. It can be in
one of three states: pending, fulfilled, or rejected.
Quick Code Example:
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Done!"), 1000);
});
[Link](res => [Link](res));
Output:
Done!
Key Points to Emphasize:
• States: pending, fulfilled, rejected
• Used for async handling
• .then() for success, .catch() for errors
Closures
A closure is the combination of a function and its lexical environment (the scope in which it was created). Closures
allow functions to access variables from an outer scope even after that scope has closed.
Quick Code Example:
function outer() {
let count = 0;
return function inner() {
count++;
[Link](count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
Output:
1
2
Key Points to Emphasize:
• Function + lexical scope
• Can access variables after outer function execution
• Used for data privacy
CSS Grid Basics
CSS Grid is a two-dimensional layout system for creating responsive designs with rows and columns.
Quick Code Example:
container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
Key Points to Emphasize:
• Two-dimensional layout
• Uses rows and columns
• gap property for spacing
CSS Flexbox Basics
Flexbox is a one-dimensional layout system used for arranging items in rows or columns, with powerful alignment
and spacing capabilities.
Quick Code Example:
container {
display: flex;
justify-content: center;
align-items: center;
}
Key Points to Emphasize:
• One-dimensional layout
• justify-content for main axis alignment
• align-items for cross-axis alignment
Debouncing
Debouncing ensures that a function is not called again until a certain amount of time has passed without it being
called. Commonly used in search inputs to reduce API calls.
Quick Code Example:
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
Key Points to Emphasize:
• Used to limit rapid calls
• Common in search inputs
• Waits for inactivity before running
Throttling
Throttling ensures that a function is called at most once every specified period, even if triggered repeatedly.
Quick Code Example:
function throttle(fn, limit) {
let lastCall = 0;
return function(...args) {
const now = [Link]();
if (now - lastCall >= limit) {
lastCall = now;
fn(...args);
}
};
}
Key Points to Emphasize:
• Limits function calls to set interval
• Useful in scroll events
• Improves performance
setTimeout
setTimeout schedules a function to be executed after a specified delay (in milliseconds).
Quick Code Example:
setTimeout(() => [Link]("Hello after 2s"), 2000);
Output:
Hello after 2s
Key Points to Emphasize:
• Executes once after delay
• Asynchronous
• Returns a timer ID
Async/Await
async/await is syntactic sugar over Promises that allows writing asynchronous code in a synchronous style.
Quick Code Example:
async function fetchData() {
const res = await fetch('[Link]
const data = await [Link]();
[Link](data);
}
Key Points to Emphasize:
• async makes a function return a Promise
• await waits for Promise resolution
• Cleaner async code
Callbacks
A callback is a function passed as an argument to another function, to be executed later.
Quick Code Example:
function greet(name, callback) {
[Link]("Hello " + name);
callback();
}
greet("Abha", () => [Link]("Welcome!"));
Output:
Hello Abha
Welcome!
Key Points to Emphasize:
• Function passed as parameter
• Used for async handling
• Can lead to callback hell
SEO Basics
SEO (Search Engine Optimization) is the practice of optimizing web pages to rank higher in search engines.
Key Points to Emphasize:
• Use semantic HTML tags
• Optimize page load speed
• Add meta tags and alt attributes
Deep Copy vs Shallow Copy
Shallow copy copies only the first level of an object; nested objects are still shared. Deep copy duplicates all
levels, creating independent copies.
Quick Code Example:
let obj = { a: 1, b: { c: 2 } };
let shallow = { ...obj };
let deep = [Link]([Link](obj));
Key Points to Emphasize:
• Shallow: first level only
• Deep: all levels copied
• Deep avoids reference sharing
Map, Filter, Reduce
map transforms array elements, filter selects elements based on a condition, reduce accumulates values into a
single result.
Quick Code Example:
let nums = [1, 2, 3];
[Link]([Link](n => n*2)); // [2, 4, 6]
[Link]([Link](n => n>1)); // [2, 3]
[Link]([Link]((a,b) => a+b, 0)); // 6
Output:
[2, 4, 6]
[2, 3]
6
Key Points to Emphasize:
• map: transforms each element
• filter: selects based on condition
• reduce: accumulates to one value
Spread Operator
Spread syntax (...) allows an iterable to be expanded into individual elements.
Quick Code Example:
let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5];
Output:
[1, 2, 3, 4, 5]
Key Points to Emphasize:
• Used for copying arrays/objects
• Merges easily
• Works with iterables
Event Loop
JavaScript is single-threaded, and the Event Loop manages the execution of synchronous and asynchronous
tasks. Microtasks (Promises) run before Macrotasks (setTimeout).
Quick Code Example:
[Link]("Start");
setTimeout(() => [Link]("Timeout"), 0);
[Link]().then(() => [Link]("Promise"));
[Link]("End");
Output:
Start
End
Promise
Timeout
Key Points to Emphasize:
• Single-threaded
• Microtasks before Macrotasks
• Manages async execution
