Interview Questions for a Front-end Developer - 2024 [JS, React, MobX]

Front-End Developer Interview Questions & Answers:

🚀 General JS

1. Types of Variables in JS

• Answer: JavaScript has three types of variables: var, let, and const.
• Code Example:

  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:

  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:

  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:

  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:

  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:

  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! 🔥