Front End Interview Questions and Answers

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! 🚀

---

List of Content

1. Common interview questions
2. Common technical interview questions
3. HTML Interview Questions
4. CSS Interview Questions
5. Javascript Interview Questions (junior, middle, senior)
6. Javascript Coding Questions
7. React interview questions
8. Typescript interview questions
9. Security
10. Testing Questions
11. 🎉 Recruiting tasks
12. GIT
13. Funny Questions
14. Contribution

Common interview questions

1. What was the most interesting solution you implemented in your last project?
2. What's the latest programming book you've read?
3. How big was your team?
4. Have you worked in Agile, Scrum or Kanban environments?
5. Are you a team player?
6. What makes you a good developer?
7. What skill do you want to improve next?
8. What values can you bring to a new team?
9. What problems are you most interested in solving?
10. Describe your most recent project, how you solved it, and what you learned. What technologies did you use?
11. What type of environment do you prefer to work in? Why?
12. What does your ideal role look like?

Common technical interview questions

1. What is REST? - @docs
2. What is the difference between imperative and declarative programming in JS? - @blog
3. What is the difference between PUT and PATCH methods in REST? - @stackoverflow
4. Talk about the differences between websockets, long polling and SSE. - @stackoverflow
5. What is CORS? - @blog, @docs
6. List the main things you can do to increase page speed loading? - @blog
7. Progressive enhancement vs graceful degradation. What is the difference? - @docs
8. Do you use Grunt, Gulp, Webpack or Browserify in your projects?
9. What tools do you know or already use to improve your code?
10. What do you know about "60fps"? How can you achieve it? - @github
11. What is the difference between layout, painting and compositing? - @docs
12. What is Web Components? - @docs
13. What is the difference between sessionStorage, localStorage and cookies? @stackoverflow
14. Describe your perfect React/Angular/Vue application stack?

HTML Interview Questions

1. Could you list major HTML5 tags? - @docs
2. What does an 'optional' closing tag mean? - @docs
3. When and how to preload resources? - @blog
4. What is the difference between id and class? - @blog

CSS Interview Questions

1. What is the difference between 'mobile first' and 'desktop first' - @blog?
2. Which of these selectors has the highest specificity. What color will be applied to the paragraph?
3. What does the pseudo-class :root refer to?
4. What preprocessor do you use? (Sass or Less)

Javascript Interview Questions

JS Junior

1. Who is the author of JavaScript?
2. What is the best book for learning JavaScript and why? - @github
3. What is the type of NaN? How to check if a value is NaN?
4. What the reason that window.window === window return true? - @docs
5. What is the outcome of the JavaScript calculation? 1/0 = ?
6. What is hoisting? @docs
7. What is the difference between bubbling and capturing? - @stackoverflow

JS Middle

1. What does this refer to? - @blog
2. What is the JavaScript Event Loop? - @blog, @youtube
3. What is the Event Delegation? - @blog, @code
4. What is the difference between e.target and e.currentTarget? - @docs, @code
5. What is Window.postMessage() and where it can be used? - @docs
6. Is there any difference between Promises and callbacks? Which is better? - @blog,
7. What is recursion? When is the use of recursion useful in Javascript? - @blog
8. What do you hear about DRY, KISS, YAGNI? - @blog
9. What do you know about optional chaining operators? What benefits does it bring? @docs

JS Senior

1. What patterns do you know and successfully use in JavaScript?
2. What is the problem throttling and debouncing are resolved? What is the core difference between them? - @blog
3. What is SOLID? @wiki
4. What is the difference between inheritance and composition? What do you prefer? Why? @blog, @blog

Javascript Coding Questions

Write a `pipefy` function where a string received is returned, but with the "|" character between each character:

pipefy();

@code

Write a currying function that returns a sum of two numbers:

sum(1)(2);

currying function,

Write a factorialfunction without side effect:

// Code below must return `true`.
alert(factorial(3) === 6 && factorial(0) === 1);

factorial, side effect, @code

Which line of the below code will be executed with an error? Why?

10 .toString();
(10).toString();
10..toString();

What is the order of alerts?

setTimeout(function () {
  alert('gorilla');
  setTimeout(function () {
    alert('classical inheritance');
  }, 0);
  alert('drumroll');
}, 0);

alert('banana');

What is the result after code execution: 1, 2 or 3?

var x = 1;
var foo = {
  x: 2,
  bar: function () {
    x = 3;
    return this.x;
  },
};
var run = foo.bar;

alert(run());

What below code will return: `true` or `false`. What does each part of code return?

new String('a') instanceof String && 'b' instanceof String;

What the result of the following functions call? Is it the same?

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');

What would be the output of this code below?

(function () {
  console.log(a, b);
  var a = 1;
  const b = 2;
})();

Which one of the function expression below would be the best choice for the `prototype-constructor` pattern (a, b, c)? Why?

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;
};

Implement normalizeCase() function that converts "HELLO worLD" to "Hello world".

function normalizeCase(str) {
  // The magic happens here.
}

React interview questions

General

1. What is the difference between 'smart and dummy' components?
2. How to create a higher order component?
3. What is the difference between hoc, Renders Props and hooks patterns?
4. Why is it a good practice to render React Components in <div id="app"></div> over <body>?
5. What does mean "Isomorphic React Application"? - @blog
6. What happens when you execute setState() in the render() method?
7. What is the difference between useState() and useRef()?
8. How do lifecycle methods correspond to hooks?
9. Is it okay to call hooks inside loops or conditions?
10. How do you handle errors in React?
11. What is the difference between useEffect() and useLayoutEffect()?

Redux

1. What is the difference between Mobx & Redux? - @blog
2. What do you think about ajax request in reducer?
3. What architecture do you use to structure actions and reducers?
4. What is the difference between reducers and actions?
5. What is an action creator?
6. Is Redux still relevant in 2020? Can React context replace Redux?
7. What is middleware? Can you describe the use case where it can be used?
8. Have you used reselect?

Typescript interview questions

1. Talk about the differences between public, private, and protected class access modifiers? @docs
2. What typescript features do you use/know?
3. What is a generic type? @docs
4. What Typescript utility types do you use/know (Omit, Partial)? @docs

Security

1. What are the most common types of web attacks? - @blog

Testing Questions

1. Explain the difference between unit tests and integration tests? - @stackoverflow
2. Tell about TDD. What advantages or disadvantages of this concept you know? @docs
3. Which frameworks/platforms do you use for test you code?
4. List unit testing best practices principles. @slides

Recruiting tasks

1. React user search

GIT

1. What is the main difference between merge and rebase? - @blog

Funny Questions

1. Do you like parties?
2. Do you know that we have a dress code?
3. 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.