Hey Future JavaScript Rockstar! 🌟#

1. What’s the difference between == and ===?#

This is probably THE most common JavaScript interview question!

Short Answer: == does type coercion, === checks both type and value.

// == performs type conversion
5 == "5"        // true (string "5" converted to number)
true == 1       // true (boolean converted to number)
null == undefined // true (special case)

// === strict comparison (no conversion)
5 === "5"       // false (different types)
true === 1      // false (different types)
null === undefined // false (different types)

Pro Tip: Always use === unless you specifically need type coercion. It makes your code more predictable and easier to debug!

2. Explain var, let, and const differences#

This one trips up so many developers, especially those coming from other languages!

// var: function-scoped
function example() {
  if (true) {
    var x = 1;
  }
  console.log(x); // 1 (accessible outside block)
}

// let/const: block-scoped
function example2() {
  if (true) {
    let y = 1;
    const z = 2;
  }
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

3. What is hoisting?#

Simple explanation: Variables and function declarations are “moved” to the top of their scope during compilation.

// What you write:
console.log(myVar); // undefined (not an error!)
var myVar = 5;

// How JavaScript interprets it:
var myVar; // hoisted declaration
console.log(myVar); // undefined
myVar = 5; // assignment stays in place

Key point: Only declarations are hoisted, not initializations!

4. What is a closure?#

Closures are JavaScript’s superpower! They’re functions that remember variables from their outer scope even after the outer function has finished executing.

function outerFunction(x) {
  // This variable is "enclosed" by the inner function
  
  function innerFunction(y) {
    console.log(x + y); // Can access 'x' from outer scope
  }
  
  return innerFunction;
}

const addFive = outerFunction(5);
addFive(3); // 8 - inner function remembers x = 5!

Real-world use case: Creating private variables and factory functions!

5. Explain the Event Loop#

The event loop is what makes JavaScript’s asynchronous magic possible!

Simple explanation: It’s the mechanism that handles async operations by managing callback queues.

console.log('1'); // Synchronous

setTimeout(() => {
  console.log('2'); // Macrotask queue
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // Microtask queue
});

console.log('4'); // Synchronous

// Output: 1, 4, 3, 2
// Microtasks always run before macrotasks!

6. What is event delegation?#

Instead of adding event listeners to multiple child elements, add one listener to their parent and use event bubbling!

// Instead of this (inefficient):
document.querySelectorAll('.button').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// Do this (efficient):
document.querySelector('.container').addEventListener('click', (e) => {
  if (e.target.classList.contains('button')) {
    handleClick(e);
  }
});

Benefits: Better performance, works with dynamically added elements!

7. async/await vs Promises#

async/await is syntactic sugar that makes Promise-based code look synchronous!

// Promise chain (functional but can get messy)
fetchUser(id)
  .then(user => fetchUserPosts(user.id))
  .then(posts => displayPosts(posts))
  .catch(error => handleError(error));

// async/await (cleaner and easier to read)
async function loadUserPosts(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchUserPosts(user.id);
    displayPosts(posts);
  } catch (error) {
    handleError(error);
  }
}

8. Debounce vs Throttle#

Both control function execution frequency, but differently:

Debounce: Delays execution until user stops performing action

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Perfect for search input
const debouncedSearch = debounce(searchAPI, 300);

Throttle: Executes at regular intervals regardless of how often it’s called

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Perfect for scroll events
const throttledScroll = throttle(handleScroll, 100);

9. Reflow vs Repaint#

Understanding these concepts shows you care about performance!

• Reflow: Browser recalculates element positions (expensive!)
• Repaint: Browser redraws elements without layout changes (cheaper)

// Causes reflow (expensive)
element.style.width = '200px';
element.style.height = '100px';

// Better: batch DOM changes
element.style.cssText = 'width: 200px; height: 100px;';

10. How to prevent XSS attacks?#

Cross-Site Scripting prevention is crucial for any web developer:

1. Escape output: Don’t trust user input
2. Sanitize input: Clean data before processing
3. Use CSP: Content Security Policy headers
4. Validate on server: Never trust client-side validation alone

// Bad: Direct insertion
element.innerHTML = userInput; // Dangerous!

// Good: Escape special characters
element.textContent = userInput; // Safe!

11. Explain CORS#

Cross-Origin Resource Sharing prevents unauthorized cross-domain requests:

// This might be blocked by CORS
fetch('https://api.different-domain.com/data')
  .then(response => response.json())
  .catch(error => console.log('CORS error:', error));

// Server needs to allow your domain:
// Access-Control-Allow-Origin: https://your-domain.com

12. sessionStorage vs localStorage vs cookies#

// localStorage: persists until manually cleared
localStorage.setItem('theme', 'dark');

// sessionStorage: cleared when tab closes
sessionStorage.setItem('tempData', 'value');

// cookies: sent with every request (use sparingly)
document.cookie = 'user=john; expires=Thu, 18 Dec 2025 12:00:00 UTC';

13. GET vs POST differences#

// GET: data in URL
fetch('/api/users?id=123&sort=name')

// POST: data in body
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
})

14. HTTP caching methods#

Understanding caching shows you think about performance at scale:

• ETag: File version identifier
• Last-Modified: When resource was last changed
• Cache-Control: How long to cache
• Service Worker: Programmatic caching control

// Cache-Control examples
res.setHeader('Cache-Control', 'public, max-age=31536000'); // 1 year
res.setHeader('Cache-Control', 'no-cache'); // Always validate
res.setHeader('Cache-Control', 'no-store'); // Never cache

15. Explain lazy loading#

Load resources only when needed to reduce initial bundle size:

// Image lazy loading
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy">

// Code splitting with dynamic imports
const heavyModule = await import('./heavy-component.js');

// React lazy loading
const LazyComponent = React.lazy(() => import('./MyComponent'));

16. Why use WebP images?#

WebP provides 25-50% better compression than JPEG/PNG with same quality!

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Fallback">
</picture>

17. inline vs inline-block vs block#

18. CSS specificity#

Understanding the cascade is crucial for maintainable CSS:

Specificity hierarchy (highest to lowest):

1. Inline styles (style="...")
2. IDs (#myId)
3. Classes (.myClass)
4. Tags (div)
5. Inherited styles

/* Specificity: 0,1,0,1 (ID + tag) */
#header h1 { color: blue; }

/* Specificity: 0,0,1,1 (class + tag) */
.title h1 { color: red; }

/* Blue wins because ID has higher specificity! */

19. CSS positioning: absolute, relative, fixed, sticky#

20. What is the Virtual DOM?#

The Virtual DOM is React’s secret sauce for performance!

How it works:

1. React creates a JavaScript representation of the DOM
2. When state changes, React creates a new virtual DOM tree
3. React compares (diffs) old vs new trees
4. React updates only the changed parts in the real DOM

// Virtual DOM concept (simplified)
const virtualElement = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Hello World' } }
    ]
  }
};

Benefits: Batch updates, minimal DOM manipulation, predictable performance!

Before the Interview:#

• Practice explaining concepts out loud - you know it when you can teach it!
• Build small projects demonstrating these concepts
• Time yourself answering these questions (aim for 2-3 minutes each)

During the Interview:#

• Think out loud - show your problem-solving process
• Ask clarifying questions - shows you think like a professional developer
• Admit when you don’t know something - then explain how you’d find out

The Secret Sauce:#

Don’t just memorize answers - understand the why behind each concept. Interviewers can tell the difference between memorization and true understanding!