10. Real Interview Focus (1–3 Years Experience)

For frontend and React interviews interviewers mainly focus on:

• JavaScript fundamentals
• Problem-solving
• DOM understanding
• Async JavaScript
• ES6+
• React basics
• Real-world coding ability

These are the MOST asked JavaScript topics in interviews.

---

Most Important Topics to Prepare

• Closures
• Promise
• async/await
• Event Loop
• map() / filter() / reduce()
• this keyword
• Hoisting
• var / let / const
• Debouncing
• ES6+ Features
• DOM Events
• API Calling
• Array/Object Manipulation

---

1. Closures (VERY IMPORTANT)

Closures are one of the most frequently asked interview topics.

---

Definition

A closure happens when an inner function remembers variables from outer function even after outer function execution is complete.

---

Example

function outer() {
  let count = 0;

  return function inner() {
    count++;

    console.log(count);
  };
}

const fn = outer();

fn();
fn();

---

Output

1;
2;

---

Why Important?

Used in:

• Data hiding
• Private variables
• React hooks
• Event handlers

---

Interview Point

Inner function remembers outer variables through closure.

---

2. Promise (VERY IMPORTANT)

Promises handle asynchronous operations.

---

Promise States

State	Meaning
Pending	Initial state
Fulfilled	Success
Rejected	Failure

---

Example

const promise = new Promise((resolve, reject) => {
  resolve("Success");
});

promise.then((data) => {
  console.log(data);
});

---

Why Important?

Used in:

• API calls
• Fetch requests
• Async operations

---

3. async/await (VERY IMPORTANT)

Cleaner syntax for handling promises.

---

Example

async function getData() {
  const res = await fetch("api");

  const data = await res.json();

  console.log(data);
}

---

Benefits

• Cleaner code
• Easier to read
• Better error handling

---

Error Handling

async function getData() {
  try {
    const res = await fetch("api");

    const data = await res.json();

    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

---

4. Event Loop (SUPER IMPORTANT)

JavaScript is single-threaded.

Event loop handles asynchronous operations.

---

Main Parts

• Call Stack
• Web APIs
• Callback Queue
• Microtask Queue

---

Important Rule

Microtask queue executes before callback queue.

---

Most Asked Output Question

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

---

Output

Start;
End;
Promise;
Timeout;

---

Why?

1. Synchronous code runs first
2. Promise goes to microtask queue
3. setTimeout goes to callback queue
4. Microtask executes first

---

5. map(), filter(), reduce() (VERY IMPORTANT)

Most React interviews heavily ask these methods.

---

map()

Transforms data.

---

Example

const nums = [1, 2, 3];

const doubled = nums.map((num) => num * 2);

console.log(doubled);

---

filter()

Filters data based on condition.

---

Example

const nums = [1, 2, 3, 4];

const even = nums.filter((num) => num % 2 === 0);

console.log(even);

---

reduce()

Converts array into single value.

---

Example

const nums = [1, 2, 3];

const sum = nums.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(sum);

---

Interview Focus

Understand:

• Return values
• Real use cases
• Difference between methods

---

6. this Keyword (VERY IMPORTANT)

this refers to current execution object.

---

Example

const user = {
  name: "Dipak",

  show() {
    console.log(this.name);
  },
};

user.show();

---

Output

Dipak;

---

Arrow Function Problem

const user = {
  name: "Dipak",

  show: () => {
    console.log(this.name);
  },
};

user.show();

---

Output

undefined;

---

Why?

Arrow functions do NOT have their own this.

---

7. Hoisting

JavaScript moves declarations to top during memory creation phase.

---

Example with var

console.log(a);

var a = 10;

---

Output

undefined;

---

Why?

Internally:

var a;

console.log(a);

a = 10;

---

let and const

console.log(b);

let b = 10;

---

Output

ReferenceError;

---

Important Point

let and const are hoisted but stay inside Temporal Dead Zone (TDZ).

---

8. var, let, const

VERY common interview topic.

---

Difference Table

Feature	var	let	const
Scope	Function	Block	Block
Reassign	Yes	Yes	No
Redeclare	Yes	No	No
Hoisting	Yes	Yes	Yes

---

Best Practice

• Prefer const
• Use let when value changes
• Avoid var

---

9. Debouncing (VERY IMPORTANT)

Used to delay function execution.

---

Real Example

Search bar optimization.

---

Example

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

---

Why Debouncing is Important

• Reduces API calls
• Improves performance
• Better user experience

---

Common Uses

• Search input
• Resize events
• Auto-save

---

10. ES6+ Features

Frontend interviews heavily ask ES6 topics.

---

Most Important ES6 Features

• Arrow functions
• Destructuring
• Spread operator
• Rest operator
• Template literals
• Optional chaining
• Modules

---

Example — Destructuring

const user = {
  name: "Dipak",
};

const { name } = user;

---

Example — Optional Chaining

user?.address?.city;

---

Example — Template Literals

const name = "Dipak";

console.log(`Hello ${name}`);

---

11. DOM Events

Very important for frontend interviews.

---

Event Listener

button.addEventListener("click", () => {
  console.log("Clicked");
});

---

Most Asked Topics

• Event bubbling
• Event delegation
• DOM selection

---

Event Bubbling

Event moves child → parent.

---

Event Delegation

Using one listener on parent instead of many child listeners.

Improves performance.

---

12. API Calling

Frontend applications constantly communicate with servers.

---

Fetch API Example

fetch("https://api.com/users")
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  });

---

async/await Version

async function getUsers() {
  const res = await fetch("https://api.com/users");

  const data = await res.json();

  console.log(data);
}

---

Interview Focus

Understand:

• GET requests
• POST requests
• JSON
• Error handling

---

13. Array/Object Manipulation

Very common in coding rounds.

---

Array Example

const users = [{ name: "Dipak" }, { name: "Rahul" }];

const names = users.map((user) => user.name);

console.log(names);

---

Object Example

const user = {
  name: "Dipak",
};

const updatedUser = {
  ...user,
  age: 25,
};

---

Most Asked Coding Tasks

• Remove duplicates
• Group array items
• Sort arrays
• Flatten arrays
• Update nested objects
• Convert arrays into objects

---

Most Important Topics for 1–3 Years

Focus EXTRA heavily on:

• Closures
• Promise
• async/await
• Event loop
• map/filter/reduce
• this
• Hoisting
• Debouncing
• API calls
• DOM events

These are asked repeatedly in interviews.

---

Final Interview Preparation Tips

JavaScript

• Practice output-based questions
• Practice async questions
• Practice array methods deeply
• Understand this and closures properly

---

Frontend

• Learn DOM manipulation
• Practice API calls
• Understand browser behavior

---

React Preparation

After JavaScript, focus on:

• Components
• Props
• State
• Hooks
• Lifecycle
• Context API

---

Best Strategy

For interviews:

1. Strong JavaScript fundamentals
2. Strong async concepts
3. Strong array/object manipulation
4. Basic React understanding
5. Practice real interview questions regularly