Question 1

What is a Closure and give a practical example?

Accepted Answer

A **closure** is created when a function is defined inside another function, allowing the inner function to access variables from the outer function's scope, even after the outer function has finished executing.

### Practical Example: Data Privacy
```javascript
function createCounter() {
  let count = 0; // Private variable
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
// 'count' is not accessible directly from here
```
This creates a private state that cannot be modified externally except through the returned function.

Question 2

Explain the Event Loop, Microtasks, and Macrotasks.

Accepted Answer

The **Event Loop** monitors the Call Stack and the Callback Queue. If the Call Stack is empty, it takes an event from the queue and pushes it to the stack.

### Task Categories:
1.  **Macrotasks** (Task Queue): `setTimeout`, `setInterval`, I/O.
2.  **Microtasks** (Microtask Queue): `Promise.then`, `MutationObserver`, `queueMicrotask`.

### Priority:
**Microtasks have higher priority.** After every macrotask (and before rendering), the engine executes **all** microtasks in the queue until it is empty.

```javascript
console.log('Start');
setTimeout(() => console.log('Timeout'), 0); // Macrotask
Promise.resolve().then(() => console.log('Promise')); // Microtask
console.log('End');

// Output: Start -> End -> Promise -> Timeout
```

Question 3

Explain 'this' keyword behavior in different contexts.

Accepted Answer

The value of `this` depends on **how** a function is called (runtime binding), not where it is defined.

1.  **Global Context**: `this` refers to the global object (`window` in browsers, `global` in Node).
2.  **Object Method**: `this` refers to the object calling the method.
    ```javascript
    const obj = { method: function() { console.log(this); } };
    obj.method(); // this = obj
    ```
3.  **Standalone Function** (Strict Mode): `this` is `undefined`.
4.  **Event Handler**: `this` refers to the element that received the event.
5.  **Arrow Functions**: `this` is **lexically inherited** from the surrounding scope. It does *not* have its own `this`.

Question 4

What is Prototypal Inheritance?

Accepted Answer

In JavaScript, objects have a special hidden property `[[Prototype]]` (often accessed via `__proto__`), which is either null or references another object.

When reading a property from an object, if it's missing, JavaScript automatically takes it from the prototype. This chain continues until `null` is reached.

```javascript
const animal = { eats: true };
const rabbit = { jumps: true };

rabbit.__proto__ = animal; // rabbit takes properties from animal

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.jumps); // true (own property)
```

Question 5

Promise vs Async/Await - Which is better?

Accepted Answer

**Async/Await** is syntactic sugar built on top of Promises. They do the same thing, but Async/Await is generally considered "better" for readability involving complex chains.

### Promise Chain (The "Old" Way)
```javascript
fetchData()
  .then(data => processKey(data))
  .then(key => save(key))
  .catch(err => console.error(err));
```

### Async/Await (The "Modern" Way)
Looks like synchronous code, easier to debug with try/catch.
```javascript
try {
  const data = await fetchData();
  const key = await processKey(data);
  await save(key);
} catch (err) {
  console.error(err);
}
```

Question 6

What is Hoisting?

Accepted Answer

**Hoisting** is JavaScript's default behavior of moving declarations to the top of the current scope (script or function) before code execution.

*   **Function Declarations**: Are fully hoisted. You can call them before the definition.
    ```javascript
    sayHi(); // Works
    function sayHi() { ... }
    ```
*   **var**: Declaration is hoisted, initialized with `undefined`.
    ```javascript
    console.log(a); // undefined
    var a = 5;
    ```
*   **let/const**: Declarations are hoisted but stay in the **"Temporal Dead Zone"** (TDZ) until the line of code is reached. Accessing them before results in a `ReferenceError`.

Question 7

What is Currying?

Accepted Answer

**Currying** is the transformation of a function that takes multiple arguments `f(a, b, c)` into a sequence of functions that each take a single argument `f(a)(b)(c)`.

It is useful for function composition and creating reusable utility functions.

```javascript
// Normal
function add(a, b) { return a + b; }

// Curried
function curriedAdd(a) {
  return function(b) {
    return a + b;
  };
}

const addFive = curriedAdd(5); // Partially applied function
console.log(addFive(10)); // 15
```

Question 8

Deep Copy vs Shallow Copy in JavaScript?

Accepted Answer

### Shallow Copy
Copies the object's top-level properties. Nested objects are still referenced (shared) between the copy and original.
*   Methods: `Object.assign({}, obj)`, Spread syntax `{...obj}`.

### Deep Copy
Creates a fully independent copy, including all nested objects.
*   **JSON Method**: `JSON.parse(JSON.stringify(obj))` (Fast but fails on functions, dates, symbols).
*   **Structured Clone**: `structuredClone(obj)` (Modern browser standard).
*   **Libraries**: Lodash `_.cloneDeep()`.

```javascript
const original = { a: 1, b: { c: 2 } };
const shallow = { ...original };
shallow.b.c = 99;
console.log(original.b.c); // 99 (Original affected!)
```

Question 9

What is the difference between Debouncing and Throttling?

Accepted Answer

Both are techniques to control how many times we allow a function to be executed over time.

### Debouncing
Ensures a function is not called again until a certain amount of time has passed since the *last* call.
*   **Analogy**: "Wait until the user stops typing to search."
*   **Use Case**: Search bar auto-complete.

### Throttling
Ensures a function is called at most once in a specified time period.
*   **Analogy**: "Fire the event every 100ms max, no matter how fast you scroll."
*   **Use Case**: Scrolling events, window resizing.

Question 10

ES6 Modules vs CommonJS Modules?

Accepted Answer

### CommonJS (CJS)
*   Used in **Node.js** historically.
*   Syntax: `require()` and `module.exports`.
*   **Synchronous** loading (bad for browsers).
*   Dynamic: You can conditionaly require modules.

### ES6 Modules (ESM)
*   Native JavaScript standard (Browsers & modern Node).
*   Syntax: `import` and `export`.
*   **Asynchronous** loading.
*   **Static**: Imports must be at the top level (allows for "Tree Shaking" optimization).

```javascript
// ESM
import React from 'react';
export const add = (a, b) => a + b;
```

JavaScript Core Concepts

1What is a Closure and give a practical example?

2Explain the Event Loop, Microtasks, and Macrotasks.

3Explain 'this' keyword behavior in different contexts.

4What is Prototypal Inheritance?

5Promise vs Async/Await - Which is better?

6What is Hoisting?

7What is Currying?

8Deep Copy vs Shallow Copy in JavaScript?

9What is the difference between Debouncing and Throttling?

10ES6 Modules vs CommonJS Modules?