Front-End Developer Interview Questions & Answers:
🚀 General JS
1. Types of Variables in JS
-
Answer: JavaScript has three types of variables:
var
,let
, andconst
. - 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, whilelet
andconst
are block-scoped.var
variables can be re-declared and updated,let
can be updated but not re-declared, andconst
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()
andObject.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 inheritthis
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
andconst
) 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
, andcomponentDidMount
. -
Updating: Triggered by changes to props or state. Involves
render
and may includeshouldComponentUpdate
,getSnapshotBeforeUpdate
, andcomponentDidUpdate
. -
Unmounting: The component is removed from the DOM. The lifecycle method here is
componentWillUnmount
.
-
Mounting: The component is created and inserted into the DOM. Lifecycle methods in this phase include
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
andthis.setState
. They have access to lifecycle methods for more granular control over the update cycle. -
Functional Components: Use hooks like
useState
anduseEffect
to manage state and side-effects. Hooks provide a more straightforward and functional approach to state management.
-
Class Components: State is managed using
📚 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 frommobx-react
. Wrap the component withobserver
, and it will react to changes in the observable state. - Code Example:
import { observer } from 'mobx-react'; const MyComponent = observer(() => { // component logic });
- In MobX, you can make a React component observable by using the
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
versusautorun
for reacting to state changes is also crucial.
- 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
These questions cover a wide range of fundamental and advanced JavaScript, React, and MobX concepts crucial for a front-end developer role.
Happy coding! 🔥
Top comments (0)