javascript – Learners Store

Why JavaScript Promise Executes Before setTimeout (Event Loop Explained) ?

Many JavaScript developers expect setTimeout(fn, 0) to run before everything else.

But when Promise and setTimeout are together, the output often surprises people.

Let’s understand this using a simple quiz example and a step-by-step explanation.

📌 The Code (Quiz Question)

console.log("Start");

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

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

console.log("End");

❓ Question:

What will be the output?

A) Start End Timeout Promise
B) Start Promise End Timeout
C) Start End Promise Timeout
D) Start Timeout Promise End

✅ Correct Answer: C) Start End Promise Timeout

🧠 Step-by-Step Execution (Very Important)

To understand this output, you need to know how JavaScript event loop works.

JavaScript uses:

Call Stack
Microtask Queue
Task Queue
Event Loop

Let’s go line by line.

🔹 Step 1: Synchronous Code Runs First

console.log("Start");

➡️ Output:

Start

🔹 Step 2: setTimeout Goes to Task Queue

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

Even with 0ms, the callback:

Does NOT execute immediately
Goes to the Task Queue

🔹 Step 3: Promise Goes to Microtask Queue

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

This callback goes into the Microtask Queue.

⚠️ Important:

Microtasks always have higher priority than tasks.

🔹 Step 4: Continue Synchronous Code

console.log("End");

➡️ Output so far:

Start
End

🔹 Step 5: Event Loop Priority Rules

After synchronous code finishes:

1️⃣ Event loop executes all microtasks first
2️⃣ Then executes tasks (setTimeout)

So execution order:

Promise callback
setTimeout callback

🧾 Final Output

Start
End
Promise
Timeout

✔️ Correct option: C

⚡ Key Rule to Remember (Interview Gold)

Microtasks (Promises) always run before Macrotasks (setTimeout).

🧠 Simple Real-World Analogy

Imagine a company office 🏢

Regular tasks → Emails (setTimeout)
Urgent tasks → Phone calls (Promise)

Even if email is scheduled early, phone calls are answered first.

👉 Promise = urgent
👉 setTimeout = regular

❌ Common Misunderstanding

❌ setTimeout(fn, 0) runs immediately
❌ Promise waits for setTimeout

✅ Truth:

Promise → Microtask queue
setTimeout → Task queue
Microtasks always win

🎯 Interview Tip

If asked:

“Why does Promise execute before setTimeout?”

Answer:

Because Promise callbacks go into the microtask queue, and the event loop always processes microtasks before macrotasks.

React useEffect Explained Clearly (With Simple Examples)

If you are learning React, chances are useEffect confused you at least once.

Questions like:

Why does useEffect run twice?
When should I use it?
What is dependency array?
How is it different from lifecycle methods?

Don’t worry.
In this post, I’ll explain useEffect in the simplest way possible, using real-world analogies and clear examples.

What is `useEffect` in React?

👉 useEffect is used to perform side effects in React components.

Side effects include:

Fetching data from an API
Updating the DOM
Setting timers
Subscribing to events
Logging data

Simply put:

useEffect runs code when something changes in your component.

Basic Syntax of useEffect

useEffect(() => {
  // side effect code
}, []);

It has two parts:

Effect function – what you want to do
Dependency array – when you want to do it

Case 1: useEffect Without Dependency Array

useEffect(() => {
  console.log("Component rendered");
});

What happens?

✅ Runs after every render

⚠️ Usually not recommended, can cause performance issues.

Case 2: useEffect With Empty Dependency Array `[]`

useEffect(() => {
  console.log("Component mounted");
}, []);

What happens?

✅ Runs only once, after first render

Equivalent to:

componentDidMount()

👉 Most common use case: API calls

Example: Fetching Data

useEffect(() => {
  fetch("/api/users")
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

✔️ Fetches data only once
✔️ Avoids infinite loops

Case 3: useEffect With Dependencies

useEffect(() => {
  console.log("Count changed");
}, [count]);

What happens?

✅ Runs only when count changes

👉 Useful for reacting to state or prop changes

Example: Search Input

useEffect(() => {
  fetchResults(searchText);
}, [searchText]);

✔️ Runs only when user types
✔️ Optimized & efficient

Cleanup Function in useEffect 🧹

Some effects need cleanup.

Example:

Timers
Event listeners
Subscriptions

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

👉 Cleanup runs when:

Component unmounts
Dependencies change

Why Does useEffect Run Twice in React?

In React Strict Mode (development):

React runs effects twice
This helps detect bugs

🚨 It does NOT happen in production

Common Mistakes with useEffect ❌

❌ Missing dependency array

useEffect(() => {
  setCount(count + 1);
});

➡️ Causes infinite loop

❌ Incorrect dependencies

useEffect(() => {
  fetchData();
}, []);

But fetchData uses props/state → bug!

When Should You Use useEffect?

Use useEffect when:
✅ You interact with outside world
✅ You perform side effects
❌ Not for simple calculations

Summary Table 📌

Scenario	Dependency
Run once	`[]`
Run on every render	No array
Run on change	`[state/props]`
Cleanup needed	`return () => {}`

Final Thoughts

If you remember just one line, remember this:

useEffect syncs your React component with the outside world.

Mastering useEffect will:

Improve performance
Prevent bugs
Make you a better React developer

How to convert first letter of the word to UpperCase in JavaScript ?

We can convert the first letter of the word to uppercase by using chatAt and slice methods as follows.

let word = "hello";

console.log(word.charAt(0).toUpperCase() + word.slice(1));

Output: Hello

Here, charAt(0).toUpperCase will convert the first letter of the word to uppercase and word.slice(1) will return the remaining characters of the word except first letter.

How to find smallest number with the highest frequency in the array ? – JavaScript

We have multiple approaches to find smallest number with the highest frequency.

1. Using Object.entries :

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

const result = Object.entries(arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})).reduce((a, b) => b[1] > a[1] || (b[1] === a[1] && Number(b[0]) < Number(a[0])) ? b : a)[0]

console.log(Number(result));

Output: 2

Explaination:

We got output as 2 because 2 appeared three times (2’s frequency is three). for 3 also we are having frequency three. But we need to find the smallest number with the highest frequency. So Answer is 2.

arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})

Above code gives output as { ‘1’: 2, ‘2’: 3, ‘3’: 3, ‘4’: 2, ‘5’: 1 }. Here this object is in the form of key, value pairs, Where Keys are the given numbers in the array and values are their counts. acc[val] || 0 returns undefined values as 0 and + 1 increments the count.

When we wrap the above code inside Object.entries, it returns an Array of arrays as follows. [ [ ‘1’, 2 ], [ ‘2’, 3 ], [ ‘3’, 3 ], [ ‘4’, 2 ], [ ‘5’, 1 ] ]

Finally we are finding highest frequency. If multiple numbers have the same frequency then we are choosing the smallest number by applying the reduce method.

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

const result = Object.entries(arr.reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc
}, {})).reduce((a, b) => b[1] > a[1] || (b[1] === a[1] && Number(b[0]) < Number(a[0])) ? b : a)

console.log(result);

Output : [ '2', 3 ]

Above code gives output as [ ‘2’, 3 ]. From here we need to extract the value 2. So we are using [0]. and it will give ‘2’ and then finally we are converting string to number by using console.log(Number(result)).

2. Using step by step Approach :

const arr = [1, 3, 3, 4, 2, 3, 2, 5, 1, 4, 2];

let freq = {};
for(let num of arr) {
    freq[num] = (freq[num] || 0) + 1;
}

let maxFreq = Math.max(...Object.values(freq));

let result = Math.min(...Object.keys(freq).filter(key => freq[key] === maxFreq).map(Number))


console.log(result);

Output: 2

The following code counts frequency and gives this output : { ‘1’: 2, ‘2’: 3, ‘3’: 3, ‘4’: 2, ‘5’: 1 }

let freq = {};
for(let num of arr) {
    freq[num] = (freq[num] || 0) + 1;
}

Next we will find max frequency which is 3 with the following line of code

let maxFreq = Math.max(...Object.values(freq));

Finally we will filter by max frequency and find smallest number with the following code.

let result = Math.min(...Object.keys(freq).filter(key => freq[key] === maxFreq).map(Number))

Explain JavaScript Call() method with Examples.

The Call method is a predefined javaScript method.
In JavaScript, the call method is used to invoke(call) a function with a specified this context and arguments provided individually.

Example 1 : (Using Call() method to invoke a function and specifying the this value )

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

const obj2 = {
    greet: 'Hello'
}

greeting.call(obj1);
greeting.call(obj2);

Output : 

Hi learnersstore.com
Hello learnersstore.com

Example 2 : (Using Call() method to invoke a function without first argument)

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}


greeting.call();

Output :

undefined learnersstore.com

Note: If we are omitting the first parameter, then it returns undefined.

Example 3 : (Using Call() method to invoke a function without first argument But with globalThis)

globalThis.greet = "Hello";

function greeting() {
    console.log(this.greet, "learnersstore.com");
}

const obj1 = {
    greet: 'Hi'
}

greeting.call();

Output: 

Hello learnersstore.com

Example 4 : (Using Call() method to invoke a function with multiple arguments)

function display(name, age) {
    console.log(`Name : ${name}, Age: ${age}, Location: ${this.location}`);
}

const obj1 = {
    location: 'India',
}

display.call(obj1, "Smith", 26);

Output :

Name : Smith, Age: 26, Location: India

📌 The Code (Quiz Question)

❓ Question:

🧠 Step-by-Step Execution (Very Important)

🔹 Step 1: Synchronous Code Runs First

🔹 Step 2: setTimeout Goes to Task Queue

🔹 Step 3: Promise Goes to Microtask Queue

🔹 Step 4: Continue Synchronous Code

🔹 Step 5: Event Loop Priority Rules

🧾 Final Output

⚡ Key Rule to Remember (Interview Gold)

🧠 Simple Real-World Analogy

❌ Common Misunderstanding

🎯 Interview Tip

What is useEffect in React?

Side effects include:

Basic Syntax of useEffect

Case 1: useEffect Without Dependency Array

What happens?

Case 2: useEffect With Empty Dependency Array []

What happens?

Equivalent to:

Example: Fetching Data

Case 3: useEffect With Dependencies

What happens?

Example: Search Input

Cleanup Function in useEffect 🧹

Why Does useEffect Run Twice in React?

Common Mistakes with useEffect ❌

❌ Missing dependency array

❌ Incorrect dependencies

When Should You Use useEffect?

Summary Table 📌

Final Thoughts

What is `useEffect` in React?

Case 2: useEffect With Empty Dependency Array `[]`