Mastering Fullstack: Key Interview Questions for Web Developers |

In today's digital era, with almost every business from local shops to gigantic MNCs adopting online platforms, the demand for fullstack developers is skyrocketing. A quick search for fullstack developer jobs reveals over 11,000+ job opportunities, along with an average salary of over 8 lakhs per annum. To help you land one of these jobs, this article breaks down the topics that are being asked repetitively in interviews into several key segments.

We'll start with the fundamentals of JavaScript, which will help you lay a strong foundation for the topics ahead. Next, we'll look into React.js, followed closely by Node.js and Express.js. Finally, we'll wrap up this session with MongoDB. In a nutshell, if you read this article to the end, you'll have enough understanding of the basic requirements to start applying for entry-level full-stack developer positions or even freelance.

Basics of Fullstack Web Development

In this particular module, we'll be covering more than 12+ questions that cover the basics you need to know before starting with the main part, the MERN Stack.

What do you mean by hoisting in JavaScript?

This question is so common and so important that if JavaScript is included in any particular interview, there is an 85 to 90% chance that you will be asked this question at least once.

In technical terms, hoisting in JavaScript refers to the behavior where a declared variable or a function is moved to the top of the scope in which it exists during the compile phase. JavaScript has this behavior, among many others, where a variable, when it is declared (not initialized), is hoisted to the top of its existing scope.

To understand this better, consider an analogy: Imagine your current scope is a tree, you are JavaScript, and a ball is your variable or function. When you compile your code, JavaScript throws the ball to the top of the tree, effectively hoisting the variable to the top of its function scope.

There are three types of hoisting in JavaScript:

1. Variable Hoisting

Variable hoisting is where only the declarations are hoisted, not their initializations. Declaring a variable and initializing it are two different things. - Declaration: var x; (You're stating that a variable x exists). - Initialization: x = 5; (You're assigning a value to x).

Let's look at an example.

console.log(x); // Outputs: undefined
var x = 5;
console.log(x); // Outputs: 5

In the first console.log, x is undefined because its declaration was hoisted, but its initialization (= 5) was not.

2. Function Hoisting

Function declarations are fully hoisted, meaning you can call a function even before you define it in your code.

greet(); // Outputs: "Hi, I've been called"

function greet() {
  console.log("Hi, I've been called");
}

The greet function can be accessed even though it's called before its definition.

3. `let` and `const` Hoisting

Variables declared with let and const are also hoisted, but they are not initialized. You cannot access these variables before their declaration. This period before declaration is known as the "Temporal Dead Zone."

console.log(x); // Throws ReferenceError: Cannot access 'x' before initialization
let x = 10;

This happens because while the variable is hoisted, it remains in a Temporal Dead Zone until the line of its declaration is executed. Think of it like delivery drivers waiting in a room (the Temporal Dead Zone); they exist but won't move until they are given an order (initialized with a value).

What is the difference between local storage and session storage?

Let's look at the technical definition first.

Local Storage: Data stored in local storage has no expiration time. It remains available even after the browser or tab is closed and will persist until it is explicitly deleted by the user or through code.
Session Storage: Data stored in session storage is tied to a specific session. It gets cleared when the browser tab is closed, meaning the data is only available as long as the tab or window is open.

Example:

If you open your browser's developer tools and run the following:

// Local Storage
localStorage.setItem('myName', 'Arya');
console.log(localStorage.getItem('myName')); // Outputs: Arya

// Session Storage
sessionStorage.setItem('myName', 'Arya');
console.log(sessionStorage.getItem('myName')); // Outputs: Arya

Now, if you open a new tab and try to access this data: javascript console.log(localStorage.getItem('myName')); // Outputs: Arya console.log(sessionStorage.getItem('myName')); // Outputs: null The local storage data persists across tabs, but the session storage data does not.

Use Cases: - Local Storage: A good example is an e-commerce shopping cart. If you add items to your cart on Amazon, they remain there even if you close the tab and come back later. - Session Storage: A good example is filling out a job application form on LinkedIn. If you reload the page, the data you've entered might disappear because it was stored in session storage.

Here's a summary table:

| Feature | Local Storage | Session Storage | |-------------------|---------------------------------------------|------------------------------------------| | Data Persistence| Persists until explicitly deleted | Cleared when the tab is closed | | Scope | Shared across tabs of the same origin | Unique to each tab or window | | Use Case | Long-term storage (e.g., user preferences) | Temporary data (e.g., form data) |

How can page loading time be reduced?

Optimizing page loading time is crucial for user retention. Here are several ways to achieve this:

Optimize Images: Use modern formats like WebP, which offer smaller file sizes with good quality compared to JPG or PNG.
Minimize HTTP Requests: Combine CSS and JavaScript files to reduce the number of requests the browser has to make.
Enable Browser Caching: When a user visits a website, some assets (like images and scripts) can be stored on their local machine. The next time they visit, the site loads faster because it doesn't have to fetch everything from the server again.
Use a Content Delivery Network (CDN): A CDN stores copies of your website on servers around the world. It serves content from the server closest to the user, reducing latency. For a user in India, fetching data from a server in Mumbai is much faster than from a server in England.
Lazy Loading: Delay the loading of non-critical assets like images and videos until they are about to be displayed on the screen. A great example is Pinterest, where images load as you scroll down the page.

What is the difference between SOAP and REST?

SOAP (Simple Object Access Protocol) and REST (Representational State Transfer) are two different approaches to API design.

| Feature | SOAP | REST | |-----------------|-------------------------------------------|---------------------------------------------| | Definition | A strict protocol with a set of rules. | An architectural style using web standards. | | Format | Uses XML, which can be complex. | Uses JSON, which is simpler and lighter. | | Connection | Stateful (can remember past requests). | Stateless (does not remember past requests).| | How it works| Has its own rules for sending/receiving. | Uses standard HTTP methods (GET, POST, etc.).|

Example: A SOAP request to convert a number to words requires a verbose XML structure. In contrast, a REST request to fetch a post is a simple GET request to a URL, and creating a post involves sending a straightforward JSON object. The complexity of SOAP makes it suitable for secure, enterprise-level applications, while REST's simplicity and flexibility make it ideal for web services that require speed and scalability.

How is GraphQL different from REST?

GraphQL is often seen as an evolution of REST, offering more efficiency and flexibility. If you compare them on ease of use, the order would be SOAP (most difficult), REST (better), and GraphQL (even better).

The key difference lies in data fetching.

REST: You fetch data from multiple, fixed endpoints. For example, to get a user and their posts, you might hit /users/1 and then /users/1/posts. This can lead to over-fetching (getting more data than you need, like a user's full profile when you only need their name) or under-fetching (having to make multiple requests to get all the data you need).
GraphQL: You have a single endpoint. The client specifies exactly what data it needs in a single query, and the server returns only that data.

Example: With a REST API, requesting a post with ID 1 might return the userId, id, title, and body. With GraphQL, you can write a query to ask for only the title, and that's all you'll get.

| Feature | GraphQL | REST | |---------------------|-----------------------------------------------|-------------------------------------------------| | Data Fetching | Single endpoint for all queries. | Multiple endpoints for different resources. | | Response Structure| Client defines the structure of the response. | Server defines the structure of the response. | | Over/Under-fetching| Reduces it by delivering only needed data. | Often leads to over-fetching or under-fetching. | | Flexibility | Highly flexible, as the client requests fields.| Fixed structure defined by the server. |

In a nutshell, with REST, you fetch data from a specific endpoint and filter it on the client side. With GraphQL, you tailor your queries to retrieve only the necessary data from the server itself.

What are the components of a CSS Box Model?

The CSS Box Model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. You can see this model in your browser's developer tools under the "Layout" or "Computed" tab.

Here are the components from outermost to innermost:

Margin: The space outside the border. It clears an area around the element and separates it from other elements.
Border: A border that goes around the padding and content. You can control its width, style, and color.
Padding: The space between the content and the border. It's the space inside the element.
Content: The actual content of the box, where text and images appear. Its size can be controlled by width and height properties.

What is the difference between a class selector and an ID selector in CSS?

Both are used to select and style HTML elements, but they have key differences.

| Feature | Class Selector (.class-name) | ID Selector (#id-name) | |-----------------|---------------------------------------------|-----------------------------------------------| | Uniqueness | Can be applied to multiple elements. | Must be unique; can only be applied to one element per page. | | Specificity | Has lower specificity. | Has higher specificity. An ID style will override a class style. |

Example:

<!-- ID can be used only once -->
<div id="main-box">Main Box</div>

<!-- Class can be used multiple times -->
<div class="internal-box">Internal Box 1</div>
<div class="internal-box">Internal Box 2</div>

#main-box {
  background-color: lightblue;
}

.internal-box {
  background-color: lightgreen;
}

You can reuse the .internal-box style for many elements, but #main-box should only be used for one.

What are the various data types in JavaScript?

JavaScript has two main categories of data types:

1. Primitive Types (Immutable)

Their values cannot be changed once created. There are over 6+ primitive types:

Number: Represents both integer and floating-point numbers (e.g., 5, 3.14).
BigInt: For integers larger than the Number type can handle, created by adding n to the end of an integer (e.g., 9007199254740991n).
String: A sequence of characters, enclosed in single quotes, double quotes, or backticks (e.g., 'hello', "world").
Boolean: Represents logical values: true or false.
undefined: A variable that has been declared but not assigned a value.
null: Represents the intentional absence of any object value. It's an assigned value, meaning a variable is explicitly empty.
Symbol: A unique and immutable value, often used as keys in objects to avoid name clashes.

2. Non-Primitive Type (Mutable)

Object: A collection of key-value pairs. It can be used to store complex data structures. Arrays, functions, and dates are also types of objects in JavaScript.

let person = {
  name: 'Arya',
  gender: 'female',
  favoriteHobby: 'reading'
};

What is the DOM?

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML or XML page as a tree-like model. Each element in the document is a "node" in the tree.

JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page.

For a simple HTML page, the DOM tree might look like this: - Document (the root) - HTML - HEAD - TITLE (with text content) - BODY - H1 (with text content) - P (with text content) - UL - LI - LI - LI

What is the `this` keyword in JavaScript?

The this keyword refers to the object that is currently executing the code. Its value depends on how a function is called.

Global Context: Outside of any function, this refers to the global object (window in browsers).
Function Context: Inside a regular function, this usually refers to the global object, unless called as a method of an object.
Method Context: When a function is called as a method of an object, this refers to the object itself.
Event Handlers: In an event handler, this refers to the element that received the event.
Arrow Functions: Arrow functions do not have their own this context; they inherit it from the surrounding (lexical) scope.
Constructor Functions: When a function is used as a constructor (with the new keyword), this refers to the new instance being created.

What are the advantages of using a CDN?

A CDN (Content Delivery Network) offers numerous advantages for websites:

Improved Load Times: By caching content in servers geographically closer to users, CDNs reduce latency and speed up page loads.
Increased Reliability: CDNs distribute traffic across multiple servers, providing redundancy. If one server fails, others can take over, ensuring high availability.
Reduced Bandwidth Costs: By serving content from cache, CDNs reduce the amount of data that needs to be fetched from the origin server, lowering hosting costs.
Scalability: CDNs can handle large traffic spikes and act as a load balancer, distributing requests efficiently.
Enhanced Security: Many CDNs offer protection against DDoS attacks and provide web application firewalls (WAFs).
SEO Benefits: Faster page load times can improve a website's search engine ranking.

What is the difference between event bubbling and capturing in JavaScript?

Event bubbling and capturing are two phases of event propagation in the DOM.

Capturing Phase (Trickling Down): The event starts from the outermost element (like the window or document) and travels down to the target element.
Bubbling Phase (Bubbling Up): After reaching the target, the event travels back up from the target element to the outermost element.

By default, all modern browsers use the bubbling phase.

Analogy: - Capturing: A CEO (outer element) gives an order to a manager, who then gives it to an employee (target element). The command flows from top to bottom. - Bubbling: An employee (target element) has a concern, which they report to their manager, who then reports it to the CEO (outer element). The feedback flows from bottom to top.

You can control which phase to use with the addEventListener method: javascript element.addEventListener('click', function() { // ... }, useCapture); // `useCapture` is a boolean - useCapture = false (default): Uses the bubbling phase. - useCapture = true: Uses the capturing phase.

What is `use strict` in JavaScript?

use strict is a directive that enforces stricter parsing and error handling in your JavaScript code. It helps you catch common coding mistakes and prevents certain "unsafe" actions.

When you place "use strict"; at the beginning of a script or a function, you opt into a restricted variant of JavaScript.

Benefits: - Prevents Accidental Globals: It throws an error if you assign a value to a variable without declaring it first, preventing accidental creation of global variables. - Throws More Errors: It turns silent errors into thrown errors, making bugs easier to find. - Disallows Duplicate Parameter Names: It throws an error if a function has duplicate parameter names.

Example: ```javascript "use strict";

function greet() { x = 10; // Throws a ReferenceError because x is not declared console.log(x); }

greet(); ``Withoutuse strict, this code would have created a global variablex`, which could lead to unexpected behavior.

What is the difference between cookies and local storage?

While both store data on the client-side, they serve different purposes.

| Feature | Cookies | Local Storage | |-----------------|---------------------------------------------|---------------------------------------------| | Purpose | Session management, personalization, tracking. | Storing larger amounts of client-side data. | | Data Sent | Sent with every HTTP request to the server. | Not sent with HTTP requests. | | Capacity | Small (around 4KB). | Larger (around 5-10MB). | | Expiration | Can have a manually set expiration date. | No expiration date. | | Access | Can be accessed on both server and client. | Can only be accessed on the client. |

Use Cases: - Cookies: Remembering a user's login session, tracking user behavior for analytics (like Google Analytics), and personalizing content based on past searches (like on Amazon). - Local Storage: Saving user progress in an offline web game, storing application settings, or caching data to improve performance.

How can you prevent a bot from scraping your publicly accessible API?

Protecting a public API from scraping is a continuous effort, but several methods can be effective:

API Rate Limiting: Limit the number of requests a single IP address or user can make in a given time frame. This prevents bots from overwhelming your server with rapid-fire requests.
CAPTCHA Integration: Use services like reCAPTCHA to verify that the user is a human and not a bot, especially for sensitive endpoints. Modern CAPTCHAs can even analyze mouse movements to differentiate humans from bots.
Creating Honey Pots: Create hidden, invisible elements or API endpoints that are not visible to human users but can be detected by bots. If a bot interacts with a honey pot, you can identify and block it.
Obfuscating API Endpoints: Make your API endpoints less predictable. Instead of /api/get-data, use something more complex that is harder for bots to guess.
Anomaly Detection: Monitor API traffic for unusual patterns, such as a sudden spike in requests from a single IP or a strange user-agent string, and block suspicious activity.