### 🚀 General JS

#### 1. Types of Variables in JS - **Answer**: JavaScript has three types of variables: `var`, `let`, and `const`. - **Code Example**: ```javascript var name = "John"; // Function-scoped let age = 30; // Block-scoped const city = "New York"; // Block-scoped, immutable ```

#### 2. Difference Between let, var, const - **Answer**: `var` is function-scoped, while `let` and `const` are block-scoped. `var` variables can be re-declared and updated, `let` can be updated but not re-declared, and `const` cannot be updated or re-declared within its scope.

#### 3. What is Hoisting and Why Does It Exist - **Answer**: Hoisting in JavaScript is the behavior where variable and function declarations are moved to the top of their containing scope during the compile phase. This allows functions to be safely used in code before they are declared.

#### 4. Object-prototype & proto - **Answer**: Every JavaScript object has a prototype. A prototype is also an object. `__proto__` is a property of an object pointing to its prototype. `Object.getPrototypeOf()` and `Object.setPrototypeOf()` are methods to get and set the prototype of an object. - **Code Example**: ```javascript let animal = { eats: true }; let rabbit = { jumps: true }; Object.setPrototypeOf(rabbit, animal); // rabbit.__proto__ = animal; ```

#### 5. Difference Between a Class and an Object - **Answer**: A class is a blueprint for creating objects, a template of properties and functions, whereas an object is an instance of a class, with actual values and functionality defined by its class.

#### 6. The `this` Keyword - **Answer**: `this` is a special keyword that refers to the object it belongs to. It represents the calling context of a method in an object. Its value is determined by how a function is called.

#### 7. Normal Function vs. Arrow Function - **Answer**: Normal functions have their own `this` context, but arrow functions inherit `this` from the parent scope at the time of definition. Arrow functions are not hoisted and cannot be used as constructors.

#### 8. What is a Promise - **Answer**: A Promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation. It allows you to write asynchronous code in a more manageable way.

#### 9. Using Promises Outside of Async/Await - **Answer**: Promises can be used with `.then()` for success handling and `.catch()` for error handling. - **Code Example**: ```javascript new Promise((resolve, reject) => { // async operation resolve(data); }) .then(data => console.log(data)) .catch(error => console.error(error)); ```

#### 10. Mutable and Immutable Types - **Answer**: Mutable objects can be changed after creation, whereas immutable objects cannot. In JavaScript, objects and arrays are mutable, while primitive values (like numbers, and strings) are immutable. In React, immutability is important for performance optimizations and predictable state management.

#### 11. What is Closure and an Example - **Answer**: A closure is a function that remembers its outer variables and can access them. In JavaScript, all functions are naturally closures. - **Code Example**: ```javascript function makeCounter() { let count = 0; return function() { return count++; // uses variable from the outer scope }; } let counter = makeCounter(); ```

#### 12. Block-scoped vs Function-scoped Variables - **Answer**: Block-scoped variables (`let` and `const`) are only accessible within the block they are defined. Function-scoped variables (`var`) are accessible anywhere within the function.

#### 13. Front-end caching and Local/Session Storage - **Answer**: Front-end caching stores data locally to improve load times and performance. Local Storage persists data even after the browser is closed, while Session Storage keeps data only for the session. Redis, a server-side technology, is used for caching and storing data structures.

#### 14. What are Cookies and Their Use - **Answer**: Cookies are small pieces of data stored on the client side, used to remember information about the user for the duration of their session or for a defined time.

#### 15. What is HTTP and What is REST - **Answer**: HTTP (Hypertext Transfer Protocol) is the protocol used for transmitting data on the web. REST (Representational State Transfer) is an architectural style for designing networked applications, using HTTP requests to access and manipulate data.

#### 16. HTTP Verbs and Their Use - **Answer**: - **GET**: Retrieve data from a server. - **POST**: Submit data to a server. - **PUT**: Update existing data on a server. - **DELETE**: Remove data from a server. - **PATCH**: Partially update data on a server.

### 🧑‍💻 React Specific Questions & Answers

#### 1. Lifecycle of a React Component - **Answer**: - **Mounting**: The component is created and inserted into the DOM. Lifecycle methods in this phase include `constructor`, `render`, and `componentDidMount`. - **Updating**: Triggered by changes to props or state. Involves `render` and may include `shouldComponentUpdate`, `getSnapshotBeforeUpdate`, and `componentDidUpdate`. - **Unmounting**: The component is removed from the DOM. The lifecycle method here is `componentWillUnmount`.

#### 2. Everything about `useEffect` - **Answer**: - `useEffect` is a hook in functional components that manages side effects. It runs after every render by default. - It can be configured to run only when certain values (`dependencies`) change by passing them in an array as the second argument. - Returning a function from `useEffect` will run it as a cleanup before the component unmounts or before the effect runs again.

#### 3. Class Components vs. Functional Components with State Management - **Answer**: - **Class Components**: State is managed using `this.state` and `this.setState`. They have access to lifecycle methods for more granular control over the update cycle. - **Functional Components**: Use hooks like `useState` and `useEffect` to manage state and side-effects. Hooks provide a more straightforward and functional approach to state management.

### 📚 MobX (State-Management Library) Questions & Answers

#### 1. Making a React Component Observable - **Answer**: - In MobX, you can make a React component observable by using the `observer` function from `mobx-react`. Wrap the component with `observer`, and it will react to changes in the observable state. - **Code Example**: ```javascript import { observer } from 'mobx-react'; const MyComponent = observer(() => { // component logic }); ```

#### 2. What are Computed Values - **Answer**: - Computed values in MobX are values that are derived from the state and update automatically when the state changes. They are similar to formulas in spreadsheets. - **Code Example**: ```javascript import { computed, makeObservable, observable } from 'mobx'; class Store { @observable value = 0; @computed get doubleValue() { return this.value * 2; } constructor() { makeObservable(this); } } ```

#### 3. Performance Considerations in MobX - **Answer**: - To improve performance in MobX, be mindful of unnecessary re-renders. Only mark the minimal set of data as observable. - Use computed values wisely to avoid expensive recalculations. - Be cautious with complex object trees as observables; consider breaking them into smaller pieces.

#### 4. General MobX Questions - **Answer**: - It's important to understand how actions and reactions work in MobX, as well as the concept of observable references versus deep observables. Knowing when to use `reaction` versus `autorun` for reacting to state changes is also crucial.

These questions cover a wide range of fundamental and advanced JavaScript, React, and MobX concepts crucial for a front-end developer role.

Happy coding! 🔥