full stack developer interview questions
full stack developer interview questions Freshers
1: What is HTML?
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It defines the structure of web content using elements.
2: What are HTML elements and attributes?
Elements are the building blocks of HTML (e.g., <p>, <div>), and attributes provide additional information about elements (e.g., class=”header”).
3: What is the difference between block-level and inline elements?
Block-level elements (e.g., <div>, <p>) take up the full width of their container, while inline elements (e.g., <span>, <a>) only take up as much width as needed.
4: What are the different types of lists in HTML?
Ordered lists: <ol> for numbered lists.
Unordered lists: <ul> for bullet lists.
Definition lists: <dl> for term-definition pairs.
5: What is the purpose of the <meta> tag?
The <meta> tag provides metadata about an HTML document, such as character set, viewport settings, and SEO keywords.
6: What is CSS and why is it used?
CSS (Cascading Style Sheets) is used to style and layout web pages by controlling the appearance of HTML elements, including colors, fonts, and positioning.
7: What is the difference between padding and margin?
Padding is the area between the content of an element and its border. Margin is the area between the border of an element and the elements around it.
8: What is the CSS Box Model?
The CSS Box Model consists of content, padding, border, and margin, which together define the space an element takes up on the page.
9: How do you center an element horizontally using CSS?
You can use the following method:
div {
margin: 0 auto;
width: 50%;
}
For Flexbox:
div {
display: flex;
justify-content: center;
}
10: What is the difference between relative and absolute positioning?
Relative positioning places an element based on where it would normally be in the document.
Absolute positioning takes the element out of the normal flow and sets it in relation to the closest ancestor that has a position set.
11: What are variables in JavaScript, and how do you declare them?
Variables store data values and can be declared using var, let, or const.
12: What is the difference between == and === in JavaScript?
== compares values after performing type coercion (loose equality).
=== compares both values and types without coercion (strict equality).
13: What is the purpose of the this keyword in JavaScript?
A This relates to the situation where a function runs. In an object method, this means the object itself.
14: What are closures in JavaScript?
A closure is a function that retains access to its outer scope, even after the outer function has returned. This allows inner functions to access variables defined in their parent functions.
15: Explain the concept of hoisting in JavaScript.
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their containing scope before code execution.Only the declarations are moved to the top, not the initializations.
16: What is an IIFE (Immediately Invoked Function Expression)?
An IIFE is a function that is executed immediately after its declaration:
(function() {
console.log(‘IIFE executed’);
})();
17: How does JavaScript handle asynchronous code?
JavaScript uses callbacks, promises, and async/await to handle asynchronous operations.
18: What is the difference between synchronous and asynchronous code?
Synchronous code is executed line by line, blocking the next operation until the current one finishes.
Asynchronous code allows multiple operations to be initiated simultaneously without waiting for others to finish.
19: What are JavaScript Promises?
A promise represents a value that may be available now, in the future, or never.It can be in one of three conditions: waiting, completed, or denied.
20: What is the fetch API in JavaScript?
The fetch API is used to make network requests (e.g., HTTP requests) and returns a promise that resolves to the response object.
21: What is React, and why is it popular?
React is a JavaScript library for building user interfaces. It is popular because of its component-based architecture, virtual DOM, and efficient rendering of UI updates.
22: What is JSX in React?
JSX (JavaScript XML) is a syntax extension that looks similar to HTML and is used to define UI components in React. It is transpiled into regular JavaScript by tools like Babel.
23: What is a React component?
A React component is a self-contained, reusable piece of UI that can accept inputs (props) and manage its own state.
24: What are props in React?
Props (short for properties) are inputs passed to a component to configure it or pass data from one component to another.
25:What distinguishes state from props in React?
Props are immutable and passed to components to provide external data.
State is mutable and managed within the component, used for dynamic data that can change over time.
26: What is the purpose of the useState hook in React?
The useState hook allows functional components to manage state by defining a state variable and a function to update it.
27: What is the useEffect hook in React?
The useEffect hook allows you to perform side effects (like data fetching, setting up subscriptions, or manually changing the DOM) in functional components.
28: What is the Virtual DOM in React?
The Virtual DOM is a lightweight copy of the actual DOM. React updates the virtual DOM whenever the state of a component changes, and it efficiently calculates the minimal set of changes required to update the real DOM.
29: What is the Context API in React?
The Context API allows you to share data across the component tree without needing to send props down at each level. It is commonly used for managing global state.
30: What is React Router, and why is it used?
A30: React Router is a library used for routing in React applications. It allows developers to navigate between different views or pages in a single-page application (SPA) without reloading the page.
31: What is Angular?
Angular is a TypeScript-based open-source framework developed by Google for building client-side web applications with a component-based architecture.
32: What is the difference between AngularJS and Angular?
AngularJS (version 1.x) is based on JavaScript and is MVC-based.
Angular (version 2+) is based on TypeScript, has better performance, and follows a component-based architecture.
33: What are Angular Directives?
Directives in Angular are special tokens in the DOM that tell the Angular compiler to do something to a DOM element (e.g., *ngFor, *ngIf).
34: What is data binding in Angular?
Data binding is a mechanism in Angular that connects the UI and the business logic. It can be one-way (data flows from the component to the view) or two-way (data flows in both directions).
35: What is the Angular CLI, and what is it used for?
The Angular CLI (Command Line Interface) is a tool that helps developers scaffold, build, and manage Angular projects. It automates repetitive tasks and ensures best practices.
36: What is Node.js?
Node.js is a JavaScript runtime environment built on Chrome’s V8 engine, allowing developers to run JavaScript on the server side.
37: What is Express.js?
Express.js is a web application framework for Node.js, used to build web applications and APIs. It simplifies server-side programming by providing features like routing and middleware support.
38: What are middleware functions in Express.js?
Middleware functions in Express.js are functions that have access to the request, response, and next function. They can modify the request and response objects or terminate the request-response cycle.
39: What is the purpose of npm in Node.js?
npm is the standard package manager used for Node.js.It helps to install, share, and control dependencies in Node.js projects.
40: How do you handle errors in Express.js?
Error handling in Express.js can be done using custom middleware that takes four arguments: (err, req, res, next). This middleware catches and processes any errors.
41: What is Git?
Git is a distributed version control system used to track changes in source code during software development. It enables several developers to collaborate on a project at the same time.
42: What is the difference between git fetch and git pull?
git fetch downloads commits from a remote repository but does not modify the working directory.
git pull fetches and merges the changes into the current branch.
43: How do you create a new branch in Git?
You can create a new branch using the following command:
git checkout -b new-branch-name
44: What is a merge conflict, and how do you resolve it?
A merge conflict occurs when two branches modify the same part of a file differently. To resolve, you must manually edit the conflicting file, mark it as resolved, and commit the changes.
45: What is GitHub?
GitHub is a web-based platform for version control and collaboration that uses Git. It provides hosting for Git repositories and features like pull requests, issue tracking, and project management.
46: What is continuous integration (CI)?
Continuous Integration (CI) is a method where developers regularly combine their code changes into a common repository. Automated builds and tests are then performed to find problems early.
47: How do you deploy a frontend application to Vercel?
Push your frontend code to a Git repository, log in to Vercel, and create a new project by linking it to your repository. Vercel automatically builds and deploys the application.
48: How do you deploy a Node.js application to Heroku?
Initialize a Git repository.
Push the code to Heroku using git push heroku main.
Configure environment variables on the Heroku dashboard.
49: What are environment variables, and how are they used in deployment?Environment variables are key-value pairs that store sensitive information (like API keys, database URLs) separately from your codebase. They are used in deployment to keep sensitive data secure and can be accessed in Node.js via process.env.
50: How do you handle scalability in a full-stack web application?
Scalability can be achieved by:
Horizontal scaling: Adding more instances of servers or containers.
Caching: Using Redis or Memcached to cache frequently accessed data.
Database optimization: Using indexes, optimizing queries, and partitioning data.
React Interview Questions For Experienced
51: What is lazy loading, and why is it used in web development?
Lazy loading is a design pattern that delays the loading of resources (such as images or components) until they are needed, improving the initial load time and performance of a web page.
52: What is tree-shaking in JavaScript bundlers like Webpack?
Tree-shaking is a process of removing unused code from the final JavaScript bundle, reducing the overall file size and improving performance.
53: What are CSS preprocessors, and why are they useful?
CSS preprocessors (like SASS and LESS) extend CSS with features such as variables, nested rules, and functions, allowing for more organized and maintainable stylesheets.
54: What is the purpose of the alt attribute in an <img> tag?
The alt attribute provides alternative text for images if they cannot be displayed. It is also used for accessibility purposes to describe the image to screen readers.
55: What are Web Components?
Web Components are a set of web platform APIs that allow you to create reusable custom elements with encapsulated functionality and styles, using HTML, CSS, and JavaScript.
56: Explain the concept of responsive design.
Responsive design is an approach to web design that ensures web pages look good on all devices (desktops, tablets, and phones) by using fluid grids, flexible images, and media queries.
57: What is a Progressive Web App (PWA)?
A PWA is a web application that uses modern web capabilities to deliver an app-like experience to users. It can work offline, be installed on a device, and send push notifications.
58: What is RESTful API design?
RESTful API design is an architectural style for building APIs that adhere to REST principles, using standard HTTP methods (GET, POST, PUT, DELETE) and stateless communication.
59: What are the main HTTP methods and their purposes?
GET: Retrieve data from the server.
POST: Transmit information to the server to generate a resource.
PUT: Update an existing resource.
DELETE: Remove a resource from the server.
60: What is middleware in Express.js?
Middleware is a function that has access to the request, response, and next function in the Express request-response cycle. It can modify the request and response objects or end the request-response cycle.
61: How do you implement authentication in a Node.js application?
Authentication can be implemented using libraries like Passport.js or JSON Web Tokens (JWT). After verifying user credentials, the server issues a token that the client uses for subsequent requests.
62: What is CORS, and why is it important?
CORS (Cross-Origin Resource Sharing) is a security feature that allows or restricts web applications from making requests to a domain different from the one that served the web page. It is important for securing APIs.
Q63: What is the difference between SQL and NoSQL databases?
SQL: Relational databases that use structured query language (e.g., MySQL, PostgreSQL). They have fixed schemas and support complex queries.
NoSQL: Non-relational databases that can store unstructured data (e.g., MongoDB, Cassandra). They are schema-less and can handle large volumes of data.
64: What is an ORM, and why is it used?
ORM (Object-Relational Mapping) is a programming technique that allows developers to interact with a database using an object-oriented paradigm, abstracting away the SQL queries (e.g., Sequelize, Mongoose).
65: What is normalization in databases?
Normalization is the process of organizing data in a database to reduce redundancy and improve data integrity by dividing data into related tables.
66: What is a primary key in a database?
A primary key is a unique identifier for a record in a table. It ensures that each entry is distinct and can be used to establish relationships between tables.
67: What are indexes in databases, and why are they used?
Indexes are data structures that improve the speed of data retrieval operations on a database table. They work similarly to an index in a book, allowing quick access to data.
68: What is the importance of testing in software development?
Testing ensures that the application functions correctly and meets user requirements. It helps identify bugs early, improves code quality, and enhances user satisfaction.
69: What are unit tests?
Unit tests are automated tests that validate individual components or functions in isolation, ensuring they work as intended.
70: What is end-to-end (E2E) testing?
End-to-end testing is a testing methodology that validates the entire application flow from start to finish, simulating real user scenarios to ensure the system behaves as expected.
71: What testing frameworks are commonly used in JavaScript?
Common testing frameworks include Jest, Mocha, Chai, and Cypress, which are used for unit testing, integration testing, and end-to-end testing.
72: What is a pull request?
A pull request is a request to merge code changes from one branch into another in a Git repository. It allows for code review and discussion before the changes are integrated.
73: What is the purpose of a .gitignore file?
The .gitignore file specifies which files or directories should be ignored by Git when committing changes, helping to keep the repository clean.
74: What are Git tags?
Git tags are references that point to specific commits, often used to mark release versions. They can be lightweight (just a pointer) or annotated (with additional metadata).
Q75: What are common web security threats?
Common web security threats include SQL injection, cross-site scripting (XSS), cross-site request forgery (CSRF), and denial-of-service (DoS) attacks.
76: How can you protect against SQL injection?
To protect against SQL injection, use prepared statements and parameterized queries, which separate SQL code from user input.
77: What is HTTPS, and why is it important?
HTTPS (Hypertext Transfer Protocol Secure) is an extension of HTTP that uses SSL/TLS to encrypt data transmitted between the client and server, ensuring secure communication.
78: What is content security policy (CSP)?
CSP is a security feature that helps prevent XSS and other code injection attacks by specifying which content sources are considered safe.
79: How do you approach debugging an issue in your code?
I approach debugging systematically by reproducing the issue, checking logs, using breakpoints, and isolating the problem to understand its cause before applying a fix.
80: How do you prioritize tasks when working on multiple projects?
I prioritize tasks based on deadlines, project impact, and urgency. I also communicate with team members to ensure alignment and adjust priorities as needed.
81: Describe a challenging project you worked on and how you overcame the challenges.
In a recent project, we faced performance issues due to unoptimized API calls. I implemented caching and optimized database queries, resulting in a significant speed improvement.
82: What are higher-order functions in JavaScript?
Higher-order functions are functions that can take other functions as arguments or return functions as their results, enabling functional programming patterns.
83: What is the event loop in JavaScript?
The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by using a callback queue and a call stack, enabling asynchronous programming.
84: What are modules in JavaScript?
A84: Modules are reusable pieces of code that encapsulate functionality. They can export variables, functions, or classes, which can be imported by other modules to promote code organization.
85: What are controlled and uncontrolled components in React?
Controlled components are form elements whose value is controlled by React state, while uncontrolled components maintain their own internal state without being tied to React.
86: How do you manage state in a large React application?
State can be managed using a combination of component state, Context API for shared state, and libraries like Redux or MobX for more complex state management.
87: How does dependency injection work in Angular?
Dependency injection in Angular is a design pattern that allows a class to receive its dependencies from an external source rather than creating them itself, promoting loose coupling and easier testing.
88: What are Angular Services, and how are they used?
Angular Services are singleton objects used to encapsulate reusable business logic and data access, allowing for code reusability and separation of concerns within the application.
Deployment and CI/CD Questions
Q89: What is Continuous Deployment (CD)?
A89: Continuous Deployment (CD) is the practice of automatically deploying every change that passes automated tests to production, ensuring that the application is always up to date.
Q90: How can you optimize a web application’s performance during deployment?
A90: Performance optimization can include minifying CSS and JavaScript files, optimizing images, using lazy loading, and implementing server-side rendering for better load times.
91: How do you stay updated with the latest trends in web development?
I stay updated by following industry blogs, participating in online communities, attending webinars and conferences, and experimenting with new technologies in personal projects.
92: What is your approach to learning a new technology?
I typically start by understanding the core concepts through documentation and tutorials, then apply my knowledge in small projects to reinforce my learning.
93: How do you handle feedback on your code?
I appreciate feedback as an opportunity for growth. I carefully review the feedback, ask clarifying questions if needed, and implement changes to improve my code quality.
94: Describe your experience with version control systems.
I have extensive experience with Git for version control, including branching, merging, handling conflicts, and collaborating with teams through platforms like GitHub and GitLab.
95: What tools do you use for monitoring and logging in your applications?
I use tools like Loggly, Sentry, and New Relic for logging errors and monitoring application performance, allowing for quick diagnosis and resolution of issues.
96: How do you ensure code quality in your projects?
I ensure code quality through code reviews, writing unit and integration tests, following coding standards, and using static analysis tools to catch potential issues early.
97: What are some common performance bottlenecks in web applications?
Common performance bottlenecks include excessive DOM manipulation, large JavaScript bundles, inefficient API calls, and unoptimized images and assets.
98: How do you handle cross-browser compatibility issues?
I handle cross-browser compatibility by using modern CSS features with fallbacks, testing across different browsers, and utilizing tools like Babel and polyfills to ensure functionality.
99: What is your experience with cloud services for deployment?
I have experience deploying applications to cloud services like AWS, Azure, and Heroku, utilizing their features for scalability, load balancing, and managing resources.
100: Can you explain the Model-View-Controller (MVC) architecture?
MVC is a software architectural pattern that separates an application into three main components:
Model: Represents the data and business logic.
View: Displays the data and user interface.
Controller: Manages user input and adjusts the model and view as needed.