Awesome
<div align="center"> <a href="https://webman.pro"> <img src="https://webman.pro/logo.svg" width="50px" alt="webman.pro"> </a> <br /> <h1> Front End Interview Questions and Answers</h1> <a href="CONTRIBUTING.md"> <img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat" alt="Contributions"> </a> <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/CONTRIBUTING.md"> <img src="https://img.shields.io/github/contributors/wwwebman/front-end-interview-questions.svg" alt="Contributors"> </a> <a href="https://github.com/wwwebman/gulp-webpack-starter/blob/master/LICENSE"> <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="License"> </a> </div> <br />The goal is to provide candidates with the opportunity to test their knowledge before a real-world interview. Drawing on my experience and the experiences of other developers, this resource will help you achieve better interview results.
Rock your interview! :rocket:
List of Content
- Common interview questions
- Common technical interview questions
- HTML Interview Questions
- CSS Interview Questions
- Javascript Interview Questions (junior, middle, senior)
- Javascript Coding Questions
- React interview questions
- Typescript interview questions
- Security
- Testing Questions
- :tada: Recruiting tasks
- GIT
- Funny Questions
- Contribution
Common interview questions
- What was the most interesting solution you implemented in your last project?
- What's the latest programming book you've read?
- How big was your team?
- Have you worked in Agile, Scrum or Kanban environments?
- Are you a team player?
- What makes you a good developer?
- What skill do you want to improve next?
- What values can you bring to a new team?
- What problems are you most interested in solving?
- Describe your most recent project, how you solved it, and what you learned. What technologies did you use?
- What type of environment do you prefer to work in? Why?
- What does your ideal role look like?
Common technical interview questions
- What is REST? - @docs
- What is the difference between imperative and declarative programming in JS? - @blog
- What is the difference between PUT and PATCH methods in REST? - @stackoverflow
- Talk about the differences between websockets, long polling and SSE. - @stackoverflow
- What is CORS? - @blog, @docs
- List the main things you can do to increase page speed loading? - @blog
- Progressive enhancement vs graceful degradation. What is the difference? - @docs
- Do you use Grunt, Gulp, Webpack or Browserify in your projects?
- What tools do you know or already use to improve your code?
- What do you know about "60fps"? How can you achieve it? - @github
- What is the difference between layout, painting and compositing? - @docs
- What is Web Components? - @docs
- What is the difference between sessionStorage, localStorage and cookies? @stackoverflow
- Describe your perfect React/Angular/Vue application stack?
HTML Interview Questions
- Could you list major HTML5 tags? - @docs
- What does an 'optional' closing tag mean? - @docs
- When and how to preload resources? - @blog
- What is the difference between id and class? - @blog
CSS Interview Questions
- What is the difference between 'mobile first' and 'desktop first' - @blog?
- Which of these selectors has the highest specificity. What color will be applied to the paragraph?
- What does the pseudo-class
:root
refer to? - What preprocessor do you use? (Sass or Less)
Javascript Interview Questions
JS Junior
- Who is the author of JavaScript?
- What is the best book for learning JavaScript and why? - @github
- What is the type of NaN? How to check if a value is NaN?
- What the reason that
window.window === window
return true? - @docs - What is the outcome of the JavaScript calculation?
1/0 = ?
- What is hoisting? @docs
- What is the difference between bubbling and capturing? - @stackoverflow
JS Middle
- What does
this
refer to? - @blog - What is the JavaScript Event Loop? - @blog, @youtube
- What is the Event Delegation? - @blog, @code
- What is the difference between e.target and e.currentTarget? - @docs, @code
- What is
Window.postMessage()
and where it can be used? - @docs - Is there any difference between Promises and callbacks? Which is better? - @blog,
- What is recursion? When is the use of recursion useful in Javascript? - @blog
- What do you hear about DRY, KISS, YAGNI? - @blog
- What do you know about optional chaining operators? What benefits does it bring? @docs
JS Senior
- What patterns do you know and successfully use in JavaScript?
- What is the problem throttling and debouncing are resolved? What is the core difference between them? - @blog
- What is SOLID? @wiki
- What is the difference between inheritance and composition? What do you prefer? Why? @blog, @blog
Javascript Coding Questions
<details> <summary>Write a `pipefy` function where a string received is returned, but with the "|" character between each character:</summary>pipefy();
</details>
<details>
<summary>Write a currying function that returns a sum of two numbers:</summary>
sum(1)(2);
</details>
<details>
<summary>Write a factorialfunction without side effect:</summary>
// Code below must return `true`.
alert(factorial(3) === 6 && factorial(0) === 1);
</details>
<details>
<summary>Which line of the below code will be executed with an error? Why?</summary>
10 .toString();
(10).toString();
10..toString();
</details>
<details>
<summary>What is the order of alerts?</summary>
setTimeout(function () {
alert('gorilla');
setTimeout(function () {
alert('classical inheritance');
}, 0);
alert('drumroll');
}, 0);
alert('banana');
</details>
<details>
<summary>What is the result after code execution: 1, 2 or 3?</summary>
var x = 1;
var foo = {
x: 2,
bar: function () {
x = 3;
return this.x;
},
};
var run = foo.bar;
alert(run());
</details>
<details>
<summary>What below code will return: `true` or `false`. What does each part of code return?</summary>
new String('a') instanceof String && 'b' instanceof String;
</details>
<details>
<summary>What the result of the following functions call? Is it the same?</summary>
const a = function (obj, val) {
obj.val = {
a: 1,
b: 2,
};
return obj;
};
const b = function (obj, val) {
return (obj.val = {
a: 1,
b: 2,
});
};
a({}, 'val');
b({}, 'val');
</details>
<details>
<summary>What would be the output of this code below?</summary>
(function () {
console.log(a, b);
var a = 1;
const b = 2;
})();
</details>
<details>
<summary>Which one of the function expression below would be the best choice for the `prototype-constructor` pattern (a, b, c)? Why?</summary>
function Man(name) {
this.name = name;
}
// a
Man.prototype.getName = function () {
return this.name;
};
// b
Man.prototype.getName = function getName() {
return this.name;
};
// c
Man.prototype.getName = () => {
return this.name;
};
</details>
<details>
<summary>Implement normalizeCase() function that converts "HELLO worLD" to "Hello world".</summary>
function normalizeCase(str) {
// The magic happens here.
}
</details>
React interview questions
General
- What is the difference between 'smart and dummy' components?
- How to create a higher order component?
- What is the difference between hoc, Renders Props and hooks patterns?
- Why is it a good practice to render React Components in
<div id="app"></div>
over<body>
? - What does mean "Isomorphic React Application"? - @blog
- What happens when you execute
setState()
in therender()
method? - What is the difference between
useState()
anduseRef()
? - How do lifecycle methods correspond to hooks?
- Is it okay to call hooks inside loops or conditions?
- How do you handle errors in React?
- What is the difference between
useEffect()
anduseLayoutEffect()
?
Redux
- What is the difference between Mobx & Redux? - @blog
- What do you think about ajax request in reducer?
- What architecture do you use to structure actions and reducers?
- What is the difference between reducers and actions?
- What is an action creator?
- Is Redux still relevant in 2020? Can React context replace Redux?
- What is middleware? Can you describe the use case where it can be used?
- Have you used reselect?
Typescript interview questions
- Talk about the differences between public, private, and protected class access modifiers? @docs
- What typescript features do you use/know?
- What is a generic type? @docs
- What Typescript utility types do you use/know (Omit, Partial)? @docs
Security
- What are the most common types of web attacks? - @blog
Testing Questions
- Explain the difference between unit tests and integration tests? - @stackoverflow
- Tell about TDD. What advantages or disadvantages of this concept you know? @docs
- Which frameworks/platforms do you use for test you code?
- List unit testing best practices principles. @slides
Recruiting tasks
GIT
- What is the main difference between
merge
andrebase
? - @blog
Funny Questions
- Do you like parties?
- Do you know that we have a dress code?
- Where do you see yourself in 5 years?
Contribution
It would be cool to find your Front End interview question on our list. Check out the contributing guide to get started.
License
MIT License, Copyright © 2017-present, Dmytro Chumak. See LICENSE for more information.