71. What are try/catch/finally?
These are used for error handling in JavaScript.
Block
try
โข Purpose: Code that may cause error
catch
โข Purpose: Handles the error
finally
โข Purpose: Always executes
Example:
try {
console.log(a);
} catch(error) {
console.log("Error occurred");
} finally {
console.log("Execution completed");
}
Output:
Error occurred
Execution completed
Important:
finally runs whether an error occurs or not.
72. What is the Error object?
The Error object contains information about runtime errors.
Example:
try {
throw new Error("Something went wrong");
} catch(error) {
console.log(error.message);
}
Common Error Properties:
name
โข Description: Error type
message
โข Description: Error message
stack
โข Description: Stack trace
Built-in Error Types:
โข ReferenceError
โข TypeError
โข SyntaxError
โข RangeError
73. How do you create custom errors?
Using classes or extending Error.
Example:
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}
throw new ValidationError("Invalid input");
Benefits:
โข Better debugging
โข More meaningful error handling
74. What are console.log, console.table, console.group?
These are debugging methods available in browser DevTools.
console.log()
Prints normal output.
console.log("Hello");
console.table()
Displays data in table format.
console.table([
{name: "Deepak", age: 25},
{name: "John", age: 30}
]);
console.group()
Groups related logs.
console.group("User Info");
console.log("Name: Deepak");
console.log("Age: 25");
console.groupEnd();
Benefit:
Cleaner debugging in large applications.
75. How do you use breakpoints and the debugger?
Breakpoints pause code execution for debugging.
Using debugger:
function test() {
let x = 10;
debugger;
console.log(x);
}
test();
How It Works:
โข Browser pauses at debugger
โข Inspect variables and execution flow
Browser DevTools Features:
โข Step through code
โข Watch variables
โข Inspect call stack
โข Monitor network requests
Interview Tip:
Very important skill for frontend developers.
76. What is performance profiling in DevTools?
Performance profiling helps identify slow operations and bottlenecks.
Browser DevTools Can Measure:
โข Rendering performance
โข JavaScript execution time
โข Memory usage
โข FPS drops
Common Tabs:
โข Performance
โข Memory
โข Network
Why It Matters:
Helps optimize web applications and improve user experience.
77. How do you avoid blocking the main thread?
Heavy tasks can freeze the UI because JavaScript is single-threaded.
Solutions:
1. Use asynchronous operations
2. Break heavy tasks into chunks
3. Use Web Workers
4. Use setTimeout()
5. Optimize loops
Example:
setTimeout(() => {
heavyTask();
}, 0);
Why?
Allows browser to handle UI updates before running heavy code.
78. What is debouncing vs throttling?
Both optimize frequent function calls.
Debouncing
Runs function only after user stops triggering event.
Example Use Cases:
โข Search input
โข Resize events
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn();
}, delay);
};
}
Throttling
Limits function execution to fixed intervals.
Example Use Cases:
โข Scroll events
โข Mouse movement
function throttle(fn, delay) {
let lastCall = 0;
return function() {
let now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
fn();
}
};
}
Difference:
Debounce
โข Waits after last event
โข Reduces extra calls
Throttle
โข Executes at intervals
โข Limits execution frequency