Round 1 ! Javascript Interview Preparation

1. Arrow function and what is the difference apart from syntax?
2. Call, apply bind (write down the code for one of them)
3. Generator Function and write a range Generator functions
4. Real time example of Generator Functions?
5. ES6 features
6. Write down the code for spread operator, rest operator and Object destructuring?
7. Difference between forEach and map?
8. Difference between Object.assign(), Object.create()? Which one mutates the data ?
9. What is a Promise ?
10. Write a function component in react which returns a lazy loaded Button Component and add the Suspense with fallback UI?
11. What is Error Boundary, How can we write a separate Error Boundary Component?
12. What is Redux, Why Redux, Core principles of redux?
13. Write down a basic sum function using Typescript and how do you accept params in either string or number?
14. What are Generics functions (inside Typescript), can you write down types?
15. Abstract function means?
16. Software Principles (DRY, KISS) how do you implemented in your codebase
17. Git hook (pre commit, husky)
18. SOLID Principles
19. Write down test cases? What does beforeEach and beforeAll do?
20. Difference between mock vs spy in testing?
21. Explain Testing Pyramid?
22. Differences between Integration Testing vs End to End testing?
23. Which tool you have used for above of them?
24. What do we mean by code coverage? How do you measure code coverage?
25. What is meant by OWASP top 10?
26. What is meant by CSP, XSS (where do we set these CSP headers? In Client or Server)
27. What is meant by CORS? (Where do we set them)
28. DDD?
29. Explain me the various ways of Performance Optimization that you can do at any level (ex: CSS, JS, HTML)
30. What is CRP?
31. What are memory leaks in react? Why do they happen?
32. Promise.all vs Promise.any vs Promise.race?
33. How do you configure typescript in your project?
34. How many ways you can create an object?
35. What does we have in.tsconfig.json? can you explain them?

HTML:

• What is the purpose of the doctype declaration?
• Explain the difference between <div> and <span>.

CSS:

• What is the box model in CSS?
• Describe the difference between margin and padding.

JavaScript Basics:

• Explain the concept of hoisting in JavaScript.
• What is the difference between let, const, and var?

JavaScript Functions:

• What is a closure in JavaScript?
• Explain the differences between arrow functions and regular functions.

DOM Manipulation:

• How does event delegation work in the DOM?
• Explain the purpose of the data- attributes.

Responsive Design:

• What is the importance of media queries in responsive design?
• Describe the difference between em and rem units in CSS.

CSS Flexbox:

• What is the flexbox model, and how does it work?
• Explain the purpose of justify-content and align-items in flexbox.

CSS Grid:

• How does CSS Grid differ from Flexbox?
• Explain the use of the grid-template-columns property.

AJAX:

• What is AJAX, and how does it work?
• Explain the role of the XMLHttpRequest object.

RESTful API Concepts:

• What is REST, and how does it differ from SOAP?
• Describe the common HTTP methods used in RESTful APIs.

React Basics:

• What is JSX in React?
• Explain the purpose of state in React components.

React Components:

• Differentiate between functional and class components in React.
• Describe the lifecycle methods in a React class component.

React Hooks:

• Explain the use of the useState hook in React.
• What is the useEffect hook, and why is it used?

Redux:

• What problem does Redux solve in a React application?
• Explain the roles of actions, reducers, and the store in Redux.

Web Performance Optimization:

• How can you optimize website performance?
• Explain lazy loading and its benefits.

Cross-Origin Resource Sharing (CORS):

• What is CORS, and how does it work?
• Describe how to handle CORS issues in a web application.

Web Security:

• What is Cross-Site Scripting (XSS), and how can it be prevented?
• Explain Cross-Site Request Forgery (CSRF) and its prevention methods.

Version Control (Git):

• Describe the purpose of Git and how it differs from other version control systems.
• Explain the Git branching strategy and the use of merge vs. rebase.

Build Tools (e.g., Webpack):

• What is Webpack, and how does it improve the frontend development workflow?
• Explain the concept of code splitting in Webpack.

Testing in Frontend Development:

• What are the benefits of unit testing in a frontend application?
• Describe the differences between unit testing and integration testing.

Here are top 15 React Machine Coding Interview questions to ace your next frontend interview 💯-

1. Implement a Todo List: Create a simple todo list application where users can add, edit, and delete tasks.

2. Build a Weather App: Develop a weather application that fetches weather data from an API and displays it to the user.

3. Create a Pagination Component: Design a pagination component that handles navigation between pages of data.

4. Implement a Login Form: Build a login form with validation for email and password fields.

5. Build a Countdown Timer: Develop a countdown timer component that starts from a specified time and decrements until it reaches zero.

6. Create a Modal Component: Design a modal component that can be toggled open and closed.

7. Implement Drag and Drop: Develop a feature that allows users to drag and drop items within a list.

8. Build a Chat Application: Develop a real-time chat application using WebSockets or a library like Socket.io.

9. Create a Dropdown Component: Design a dropdown component with options that can be selected by the user.

10. Implement Form Validation: Develop a form with validation for various fields such as email, password, and phone number.

11. Build a Carousel Component: Design a carousel component that displays a slideshow of images or content.

12. Create a Responsive Layout: Develop a responsive layout that adjusts based on the screen size and orientation.

13. Implement Redux Store: Set up a Redux store and integrate it with a React application to manage state.

14. Build an Infinite Scroll Component: Develop a component that loads more data as the user scrolls down the page.

15. Create a Quiz Application: Develop a quiz application where users can answer multiple-choice questions and see their score at the end.

Here are some commonly asked output based questions to help you ace your interview!✅️✅️

1️⃣ Write a function that reverses a given string.

2️⃣ Write a function that finds the longest word in a sentence.

3️⃣ Write a function that removes duplicates from an array.

4️⃣ Given an array containing numbers from 1 to N, with one number missing, find the missing number.

5️⃣ Write a function that checks if a given string is a palindrome.

6️⃣ How to empty an array in JavaScript?

7️⃣ How would you check if a number is an integer or decimal?

8️⃣ What will be the output of the following code? (See question for code snippet)

9️⃣ What will be the output of the following code? (See question for code snippet)

🔟 What will be the output of `console.log(0 == ‘0')` in JavaScript and why?

1️⃣1️⃣ Explain the output of `console.log([] == ![])` and justify your answer.

1️⃣2️⃣ Predict the output of `console.log(‘2' + 1)` and explain the result.

1️⃣3️⃣ What will be printed to the console when `console.log(+’Infinity’ – ‘5')` is executed?

1️⃣4️⃣ Explain the output of `console.log(3 * ‘foo’)` and how JavaScript handles this operation.

1️⃣5️⃣ Predict the output of `console.log(typeof typeof 1)` and explain the reasoning behind it.

1️⃣6️⃣ What will be logged to the console when `console.log([] + {})` is executed and why?

1️⃣7️⃣ Explain the output of `console.log(‘foo’ instanceof String)` and its implications.

1️⃣8️⃣ Predict the result of `console.log(Math.max())` and explain why it produces that output.

1️⃣9️⃣ What will be the output of `console.log(NaN === NaN)` and why does JavaScript behave this way?

2️⃣0️⃣ Explain the output of `console.log(typeof NaN)` and the reasoning behind it.

2️⃣1️⃣ Predict the output of `console.log([] + [])` and explain how JavaScript handles array concatenation.

2️⃣2️⃣ What will be logged to the console when `console.log(0.1 + 0.2 === 0.3)` is executed and why?

2️⃣3️⃣ Explain the output of `console.log(‘10' – – ‘5')` and the type coercion involved.

2️⃣4️⃣ Predict the output of `console.log(null + null)` and explain the result.

2️⃣5️⃣ What will be printed to the console when `console.log([] == ‘’)` is executed and why?

𝟏-𝟏𝟎: 𝐁𝐚𝐬𝐢𝐜𝐬 𝐨𝐟 𝐂𝐒𝐒

1. What is CSS and what are its key features?
2. 2. Explain the difference between margin and padding.
3. 3. How does the box model work in CSS?
4. 4. Describe the concept of specificity in CSS.
5. 5. Explain the difference between inline, block, and inline-block elements.
6. 6. What are pseudo-classes and pseudo-elements in CSS?
7. 7. How do you center elements horizontally and vertically in CSS?
8. 8. What is the difference between display: none and visibility: hidden?
9. 9. Describe the difference between position: relative, position: absolute, and position: fixed.
10. 10. How do you implement responsive design in CSS?

𝟏𝟏-𝟐𝟎: 𝐋𝐚𝐲𝐨𝐮𝐭𝐬 𝐚𝐧𝐝 𝐅𝐥𝐞𝐱𝐛𝐨𝐱

11. What are CSS selectors and how do you use them?

12. Explain the concept of the CSS box-sizing property.

13. Describe the difference between flexbox and grid layout.

14. How do you handle browser compatibility issues in CSS?

15. What is the purpose of the z-index property in CSS?

16. Explain the concept of CSS transitions and animations.

17. How do you vertically align text in CSS?

18. Describe the difference between em and rem units in CSS.

19. What is the clearfix hack and when is it used?

20. How can you optimize CSS for performance?

𝟐𝟏-𝟑𝟎: 𝐅𝐥𝐨𝐚𝐭𝐬 𝐚𝐧𝐝 𝐆𝐫𝐚𝐝𝐢𝐞𝐧𝐭𝐬

21. What are CSS floats and how do they work?

22. Explain the concept of CSS specificity.

23. How do you implement a sticky footer in CSS?

24. Describe the difference between relative, absolute, and fixed positioning.

25. What is the purpose of the CSS transform property?

26. How do you create CSS sprites and why are they used?

27. Explain the concept of CSS preprocessors like SASS and LESS.

28. Describe the difference between margin collapsing and margin collapsing prevention.

29. How do you handle vendor prefixes in CSS?

30. What are the advantages and disadvantages of using CSS frameworks like Bootstrap?

All d best👍 Thank You Deepa👍