User interface coding JavaScript functions System design Quiz Algorithmic coding

Front End Quiz Questions

Test your knowledge on front end theory with trivia-style questions on critical front end topics.

Covers critical topics

Answers by ex-interviewers

Front End Quiz Interview QuestionsQuiz-style front end interview questions — What to expect, concepts to learn, and 100+ important practice questions.

Guide

GUIDES

What's the difference between `block`, `inline`, and `inline-block`?
Topics
CSS
What is the difference between `==` and `===` in JavaScript?
Topics
JavaScript
What is the difference between state and props in React?
Topics
React
What's the difference between a JavaScript variable that is: `null`, `undefined` or undeclared?
Topics
JavaScript
What's the difference between `.call` and `.apply` in JavaScript?
Topics
JavaScript
Are you familiar with styling SVG?
Topics
CSS
What is the difference between `mouseenter` and `mouseover` event in JavaScript and browsers?
Topics
Web APIsHTMLJavaScript
What are the various data types in JavaScript?
Topics
JavaScript
What is the difference between a `Map` object and a plain object in JavaScript?
Topics
JavaScript
What are proxies in JavaScript used for?
Topics
JavaScript
Explain the concept of a callback function in asynchronous operations
Topics
AsyncJavaScript
Explain the concept of a microtask queue
Topics
AsyncJavaScript
Explain the concept of caching and how it can be used to improve performance
Topics
JavaScriptPerformance
Explain the concept of code coverage and how it can be used to assess test quality
Topics
JavaScriptTesting
Explain the concept of Content Security Policy (CSP) and how it enhances security
Topics
JavaScriptSecurity
Explain the concept of Cross-Site Request Forgery (CSRF) and its mitigation techniques
Topics
JavaScriptNetworkingSecurity
Explain the concept of debouncing and throttling
Topics
AsyncJavaScriptPerformance
Explain the concept of destructuring assignment for objects and arrays
Topics
JavaScript
Explain the concept of error propagation in JavaScript
Topics
JavaScript
Explain the concept of hoisting with regards to functions
Topics
JavaScript
Explain the concept of inheritance in ES2015 classes
Topics
JavaScriptOOP
Explain the concept of input validation and its importance in security
Topics
JavaScriptSecurity
Explain the concept of lazy loading and how it can improve performance
Topics
JavaScriptPerformance
Explain the concept of lexical scoping
Topics
JavaScript
Explain the concept of partial application
Topics
ClosureJavaScript
Explain the concept of scope in JavaScript
Topics
JavaScript
Explain the concept of tagged templates
Topics
JavaScript
Explain the concept of test-driven development (TDD)
Topics
JavaScriptTesting
Explain the concept of the Prototype pattern
Topics
JavaScriptOOP
Explain the concept of the Singleton pattern
Topics
JavaScript
Explain the concept of the spread operator and its uses
Topics
JavaScript
Explain the concept of the Strategy pattern
Topics
JavaScript
Explain the concept of the Web Socket API
Topics
JavaScriptNetworking
Explain the concept of `this` binding in event handlers
Topics
ClosureWeb APIsJavaScript
Explain the concept of tree shaking in module bundling
Topics
JavaScript
Explain the difference between classical inheritance and prototypal inheritance
Topics
JavaScriptOOP
Explain the difference between `document.querySelector()` and `document.getElementById()`
Topics
Web APIsJavaScriptHTML
Explain the difference between dot notation and bracket notation for accessing object properties
Topics
JavaScript
Explain the difference between global scope, function scope, and block scope
Topics
JavaScript
Explain the difference between shallow copy and deep copy
Topics
JavaScript
Explain the difference between unit testing, integration testing, and end-to-end testing
Topics
JavaScriptTesting
Explain the difference in hoisting between `var`, `let`, and `const`
Topics
JavaScript
Explain the different states of a Promise
Topics
AsyncJavaScript
Explain the different ways the `this` keyword can be bound
Topics
ClosureJavaScript
Explain the event phases in a browser
Topics
BrowserJavaScript
Explain the Observer pattern and its use cases
Topics
JavaScript
How can closures be used to create private variables?
Topics
ClosureJavaScript
How can you avoid problems related to hoisting?
Topics
JavaScript
How can you create custom error objects?
Topics
JavaScript
How can you implement secure authentication and authorization in JavaScript applications?
Topics
JavaScriptSecurity
How can you optimize DOM manipulation for better performance?
Topics
Web APIsJavaScriptPerformance
How can you optimize network requests for better performance?
Topics
JavaScriptNetworkingPerformance
How can you prevent clickjacking attacks?
Topics
JavaScriptSecurity
How can you prevent SQL injection vulnerabilities in JavaScript applications?
Topics
JavaScriptSecurity
How can you test asynchronous code in JavaScript?
Topics
AsyncJavaScriptTesting
How do currying and partial application differ from each other?
Topics
ClosureJavaScript
How do `<iframe>` on a page communicate?
Topics
Web APIsJavaScriptHTML
How do `Set`s and `Map`s handle equality checks for objects?
Topics
JavaScript
How do you access the index of an element in an array during iteration?
Topics
JavaScript
How do you add, remove, and modify HTML elements using JavaScript?
Topics
Web APIsJavaScriptHTML
How do you add, remove, and update elements in an array?
Topics
JavaScript
How do you check if an object has a specific property?
Topics
JavaScript
How do you check the data type of a variable?
Topics
JavaScript
How do you convert a `Set` to an array in JavaScript?
Topics
JavaScript
How do you convert a string to a number in JavaScript?
Topics
JavaScript
How do you create a constructor function?
Topics
JavaScriptOOP
How do you detect if JavaScript is disabled on a page?
Topics
BrowserJavaScript
How do you get the query string values of the current page in JavaScript?
Topics
Web APIsJavaScript
How do you handle errors in asynchronous operations?
Topics
AsyncJavaScript
How do you handle errors using `try...catch` blocks?
Topics
JavaScript
How do you import and export modules in JavaScript?
Topics
JavaScript
How do you make an HTTP request using the Fetch API?
Topics
JavaScriptNetworking
How do you manipulate CSS styles using JavaScript?
Topics
CSSWeb APIsJavaScript
How do you prevent the default behavior of an event?
Topics
Web APIsJavaScript
How do you redirect to a new page in JavaScript?
Topics
Web APIsJavaScript
How do you reliably determine whether an object is empty?
Topics
JavaScript
How do you use `window.history` API?
Topics
Web APIsJavaScript
How do you validate form elements using the Constraint Validation API?
Topics
Web APIsJavaScript
How do you write unit tests for JavaScript code?
Topics
JavaScriptTesting
How does hoisting affect function declarations and expressions?
Topics
JavaScript
How is `Promise.all()` different from `Promise.allSettled()`?
Topics
AsyncJavaScript
Provide some examples of how currying and partial application can be used
Topics
ClosureJavaScript
What are callback functions and how are they used?
Topics
AsyncJavaScript
What are default parameters and how are they used?
Topics
JavaScript
What are design patterns and why are they useful?
Topics
JavaScript
What are event listeners and how are they used?
Topics
Web APIsJavaScript
What are mocks and stubs and how are they used in testing?
Topics
JavaScriptTesting
What are modules and why are they useful?
Topics
JavaScript
What are Progressive Web Applications (PWAs)?
Topics
BrowserJavaScript
What are Promises and how do they work?
Topics
JavaScript
What are rest parameters and how are they used?
Topics
JavaScript
What are `Set`s and `Map`s and how are they used?
Topics
JavaScript
What are some best practices for handling sensitive data in JavaScript?
Topics
JavaScriptSecurity
What are some best practices for writing maintainable and effective tests in JavaScript?
Topics
JavaScriptTesting
What are some common performance bottlenecks in JavaScript applications?
Topics
JavaScriptPerformance
What are some common security headers and their purpose?
Topics
JavaScriptSecurity
What are some popular JavaScript testing frameworks?
Topics
JavaScriptTesting
What are some techniques for reducing reflows and repaints?
Topics
BrowserJavaScriptPerformance
What are some tools and techniques for identifying security vulnerabilities in JavaScript code?
Topics
JavaScriptSecurity
What are some tools that can be used for JavaScript testing?
Topics
JavaScriptTesting
What are some tools that can be used to measure and analyze JavaScript performance?
Topics
JavaScriptPerformance
What are template literals and how are they used?
Topics
JavaScript
What are the advantages of using the spread operator with arrays and objects?
Topics
JavaScript
What are the benefits of using a module bundler?
Topics
JavaScript
What are the benefits of using currying and partial application?
Topics
ClosureJavaScript
What are the common pitfalls of using the `this` keyword?
Topics
JavaScriptOOP
What are the different methods for iterating over an array?
Topics
JavaScript
What are the different types of errors in JavaScript?
Topics
JavaScript
What are the different types of testing in software development?
Topics
JavaScriptTesting
What are the different ways to copy an object or an array?
Topics
JavaScript
What are the different ways to make an API call in JavaScript?
Topics
JavaScriptNetworking
What are the metadata fields of a module?
Topics
JavaScript
What are the potential issues caused by hoisting?
Topics
JavaScript
What are the potential pitfalls of using closures?
Topics
ClosureJavaScript
What are Web Workers and how can they be used to improve performance?
Topics
Web APIsJavaScriptPerformance
What is async/await and how does it simplify asynchronous code?
Topics
AsyncJavaScript
What is Cross-Site Scripting (XSS) and how can you prevent it?
Topics
JavaScriptSecurity
What is currying and how does it work?
Topics
ClosureJavaScript
What is `Object.freeze()` for?
Topics
JavaScript
What is `Object.preventExtensions()` for?
Topics
JavaScript
What is `Object.seal()` for?
Topics
JavaScript
What is recursion and how is it used in JavaScript?
Topics
JavaScriptRecursion
What is the Command pattern and how is it used?
Topics
JavaScript
What is the Decorator pattern and how is it used?
Topics
JavaScript
What is the difference between a parameter and an argument?
Topics
JavaScript
What is the difference between `event.preventDefault()` and `event.stopPropagation()`?
Topics
Web APIsHTMLJavaScript
What is the difference between `innerHTML` and `textContent`?
Topics
Web APIsHTMLJavaScript
What is the difference between `setTimeout()`, `setImmediate()`, and `process.nextTick()`?
Topics
Web APIsJavaScript
What is the difference between the Window object and the Document object?
Topics
Web APIsJavaScript
What is the DOM and how is it structured?
Topics
JavaScriptHTML
What is the Factory pattern and how is it used?
Topics
JavaScript
What is the `Intl` namespace object for?
Topics
JavaScriptInternationalization
What is the Module pattern and how does it help with encapsulation?
Topics
JavaScript
What is the prototype chain and how does it work?
Topics
JavaScriptOOP
What is the purpose of the `break` and `continue` statements?
Topics
JavaScript
What is the purpose of the `finally` block?
Topics
JavaScript
What is the purpose of the `new` keyword?
Topics
JavaScriptOOP
What is the purpose of the `switch` statement?
Topics
JavaScript
What is the spread operator and how is it used?
Topics
JavaScript
What is the ternary operator and how is it used?
Topics
JavaScript
What is the use of `Promise.all()`
Topics
AsyncJavaScript
What's the difference between an "attribute" and a "property" in the DOM?
Topics
Web APIsJavaScriptHTML
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
Topics
CSS
What does `* { box-sizing: border-box; }` do?
Topics
CSS
What is the CSS `display` property and can you give a few examples of its use?
Topics
CSS
What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?
Topics
CSS
What is React? Describe the benefits of React
Topics
React
What are the differences between JavaScript variables created using `let`, `var` or `const`?
Topics
JavaScript
What is the difference between React Node, React Element, and a React Component?
Topics
React
What is JSX and how does it work?
Topics
React
Explain event delegation in JavaScript
Topics
Web APIsJavaScript
What is the purpose of the `key` prop in React?
Topics
React
What is the consequence of using array indices as the value for `key`s in React?
Topics
React
Describe the difference between a cookie, `sessionStorage` and `localStorage` in browsers
Topics
Web APIsJavaScript
What is the difference between controlled and uncontrolled React Components?
Topics
React
Describe the difference between `<script>`, `<script async>` and `<script defer>`
Topics
HTMLJavaScript
What are some pitfalls about using context in React?
Topics
React
What are the benefits of using hooks in React?
Topics
React
Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
Topics
CSS
Can you give an example of an `@media` property other than `screen`?
Topics
CSS
Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`?
Topics
HTMLPerformance
Describe `float`s and how they work.
Topics
CSS
Describe pseudo-elements and discuss what they are used for.
Topics
CSS
Describe what you like and dislike about the CSS preprocessors you have used.
Topics
CSS
Have you ever used a grid system, and if so, what do you prefer?

Front End Quiz Questions

Questions List