Welcome to Vanilla-JavaScript-Workshop Discussions!

[arafat-fullstackdev]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[arafat-fullstackdev]

Anyone can start a conversion about this repository!

[arafat-fullstackdev]

What are Closures in JavaScript?

[arafat-fullstackdev]

What is the difference between map(), forEach(), filter(), and reduce()?

[patwaryh]

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

// map
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

// forEach
numbers.forEach(num => console.log(num * 2)); // Logs: 2, 4, 6, 8

// filter
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

[patwaryh]

A closure is a function that remembers the variables from its outer scope even after the outer function has finished executing. This allows functions to maintain private variables.

javascript
Copy
Edit
function outerFunction(outerVariable) {
return function innerFunction(innerVariable) {
console.log(Outer: ${outerVariable}, Inner: ${innerVariable});
};
}

const closureExample = outerFunction("Hello");
closureExample("World"); // Output: Outer: Hello, Inner: World

Closures are commonly used in data hiding, function factories, and event handlers.

[patwaryh]

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

// map
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

// forEach
numbers.forEach(num => console.log(num * 2)); // Logs: 2, 4, 6, 8

// filter
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

[arafat-fullstackdev]

What are Promises and how do they work?

[patwaryh]

A Promise is an object that represents an asynchronous operation with three possible states:
✅ Pending → The operation is in progress.
✅ Resolved (Fulfilled) → The operation completed successfully.
✅ Rejected → The operation failed.

[patwaryh]

A Promise is an object that represents an asynchronous operation with three possible states:
✅ Pending → The operation is in progress.
✅ Resolved (Fulfilled) → The operation completed successfully.
✅ Rejected → The operation failed.

[arafat-fullstackdev]

What is an event loop in JavaScript?

[FrankFarabi]

The Event Loop is a mechanism in JavaScript that ensures non-blocking execution of asynchronous code. It continuously monitors the Call Stack and the Task Queues, moving tasks from the queue to the stack when the stack is empty. This is crucial because JavaScript is single-threaded, meaning it can only execute one task at a time.

How It Works:
Synchronous code runs first and is pushed onto the Call Stack.
Asynchronous tasks (e.g., setTimeout, Promises, fetch) are sent to the Web APIs.
When an asynchronous task completes, its callback is placed into the Task Queue (or Microtask Queue for Promises).
The Event Loop checks if the Call Stack is empty and then pushes the next queued task for execution.

[FrankFarabi]

The Event Loop is a mechanism in JavaScript that ensures non-blocking execution of asynchronous code. It continuously monitors the Call Stack and the Task Queues, moving tasks from the queue to the stack when the stack is empty. This is crucial because JavaScript is single-threaded, meaning it can only execute one task at a time.

How It Works:
Synchronous code runs first and is pushed onto the Call Stack.
Asynchronous tasks (e.g., setTimeout, Promises, fetch) are sent to the Web APIs.
When an asynchronous task completes, its callback is placed into the Task Queue (or Microtask Queue for Promises).
The Event Loop checks if the Call Stack is empty and then pushes the next queued task for execution.

[arafat-fullstackdev]

Yes! That's correct.
The Event Loop is a mechanism that enables JavaScript to handle asynchronous tasks efficiently. It ensures that synchronous code runs first, while asynchronous tasks (like setTimeout, Promises, and fetch) are handled in the background and executed later when the Call Stack is empty.

[arafat-fullstackdev]

What is await in JavaScript?

[FrankFarabi]

The await keyword is used inside an async function to pause execution until a Promise is resolved. It makes asynchronous code look and behave more like synchronous code, improving readability.

[FrankFarabi]

The await keyword is used inside an async function to pause execution until a Promise is resolved. It makes asynchronous code look and behave more like synchronous code, improving readability.

How await Works:
await pauses the function until the Promise resolves.
The function execution resumes once the Promise is fulfilled.
If the Promise is rejected, it throws an error (which can be handled with try...catch).
Example:
javascript
Copy
Edit
async function fetchData() {
console.log("Fetching data...");

let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
let data = await response.json();

console.log("Data:", data);

}

fetchData();
console.log("Other work...");
Expected Output:
yaml
Copy
Edit
Fetching data...
Other work...
Data: { userId: 1, id: 1, title: "...", body: "..." }
Why?

fetchData() starts executing, but await pauses at fetch(), allowing "Other work..." to execute.
Once data is received, execution resumes, logging "Data:" last.
This makes await useful for writing cleaner, more readable asynchronous code. 🚀

[FrankFarabi]

The await keyword is used inside an async function to pause execution until a Promise is resolved. It makes asynchronous code look and behave more like synchronous code, improving readability.

How await Works:
await pauses the function until the Promise resolves.
The function execution resumes once the Promise is fulfilled.
If the Promise is rejected, it throws an error (which can be handled with try...catch).
Example:
javascript
Copy
Edit
async function fetchData() {
console.log("Fetching data...");

let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
let data = await response.json();

console.log("Data:", data);

}

fetchData();
console.log("Other work...");
Expected Output:
yaml
Copy
Edit
Fetching data...
Other work...
Data: { userId: 1, id: 1, title: "...", body: "..." }
Why?

fetchData() starts executing, but await pauses at fetch(), allowing "Other work..." to execute.
Once data is received, execution resumes, logging "Data:" last.
This makes await useful for writing cleaner, more readable asynchronous code. 🚀

[arafat-fullstackdev]

Right!