25 Common Frontend Developer Interview Q&A
Tags: frontend, beginners, javascript, interview
Published: 2019-01-08 04:34:51

---
title: 25 Common Frontend Developer Interview Q&A
published: true
description: 25 Common Frontend Developer Interview Questions & Answer
tags: #frontend #beginners #javascript #interview
canonical_url: https://medium.com/@jamal.pb95/25-common-front-end-developer-interview-questions-answer-md-2a10c8c93e73
---

![feature-image](https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)

Photo by [Pexels](https://www.pexels.com)

## Questions:

1. What is Semantic Element in HTML5?
2. Viewport height & width in CSS3?
3. What is CSS breakpoints?
4. CSS Best Practice about ID and Class?
5. What is SASS/SCSS?
6. What is mixin in Sass/SCSS?
7. What's new in ES6?
8. What is Event Bubbling?
9. What is prototype inheritance in JavaScript?
10. Abstract function in JavaScript?
11. What is `this` keyword in Arrow function?
12. What is `this` keyword in normal function?
13. What is the difference between localStorage and sessionStorage?
14. What is CORS?
15. What is HTTP request?
16. How many HTTP methods we have?
17. What is API and REST API?
18. Make an AJAX request?
19. How does the browser work?
20. What is Pure Function in JavaScript?
21. Event Handling in JavaScript?
22. JavaScript execution context?
23. How to manage your state in React?
24. How Redux works?
25. What is Presentational Component and Functional Component?

Let's describes little more:

### 1. What is the Semantic Element in HTML5?
A semantic element clearly describes its meaning to both the browser and the developer.
 - Examples of non-semantic elements: `<div>` and `<span>` - Tells nothing about its content.
 - Examples of semantic elements: `<form>`, `<table>`, and `<article>` - Clearly defines its content.
 
More Details: [W3Schools](https://www.w3schools.com/html/html5_semantic_elements.asp) 

### 2. View port height & width in CSS3?
The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages, or JavaScript.

This new set of units consists of four different units. Two for each axis, and a minimum and maximum value of the two.

 - `vw`: 1/100th viewport width
 - `vh`: 1/100th viewport height
 - `vmin`: 1/100th of the smallest side
 - `vmax`: 1/100th of the largest side
 
Note: `IE9` uses `vm` instead of `vmin`. It does not support `vmax`.
Just to clarify: `1vmax` equals `1vh` in portrait mode, whilst in landscape mode, `1vmax` will equal `1vw`.

More Details: [Source](https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)

### 3. What is CSS breakpoints?
CSS breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user. CSS breakpoints are also called media query breakpoints, as they are used with a media query.

```css
/* For mobile phones: */
.col {
  width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
  .col-s {width: 50%;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
  .col-lg {width: 33.33%;}
}
```

More Details: [RWD](https://responsivedesign.is/strategy/page-layout/defining-breakpoints/)

### 4. CSS Best Practice about ID and Class?
We need ways to describe content in an HTML/XHTML document. The basic elements like `<h1>`, `<p>`, and `<ul>` will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this, we need ID's and Classes. For example `<ul id="nav">`, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example, a footer, where we might do something like this: `<div id="footer">`. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: `<div class="sidebar-box">`.

More Details: [CSS TRICKS](https://css-tricks.com/the-difference-between-id-and-class/)

### 5. What is SASS/SCSS?
Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. ... Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

More Details on [Sass/SCSS official sit](https://sass-lang.com/) and [My Own blog post in bangla](https://bit.ly/2IyeyW1)

### 6. What is mixin in Sass/SCSS?
One of the most powerful features of the `CSS` preprocessor `Sass` is the `mixin`, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead.

```scss
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }
```

when this code we compile to CSS looks like below type:

```css
.box {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
```

### 7. What's new in ES6?
JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more.
 - arrows
 - classes
 - enhanced object literals
 - template strings
 - destructuring
 - default + rest + spread
 - let + const
 - iterators + for..of
 - generators
 - unicode
 - modules
 - module loaders
 - map + set + weakmap + weakset
 - proxies
 - symbols
 - subclassable built-ins
 - promises
 - math + number + string + array + object APIs
 - binary and octal literals
 - reflect api
 - tail calls

More Details: [ES6 Features](https://github.com/lukehoban/es6features)

### 8. What is Event Bubbling?
The bubbling principle is simple.

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

```html
 <style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
```

A click on the inner `<p>` first runs `onclick`:

 - On that `<p>`.
 - Then on the outer `<div>`.
 - Then on the outer `<form>`.
 - And so on upwards till the document object.

More Details: [JavaScript.info](https://javascript.info/bubbling-and-capturing)


### 9. What is prototype inheritance in JavaScript?
**Inheritance** refers to an object's ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes and this form of inheritance is often called prototypal inheritance.

More Details on [DigitalOcean](https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript)

### 10. Abstract function in JavaScript?
In object-oriented programming, **abstraction** is one of the four central principles (along with **encapsulation**, **inheritance**, and **polymorphism**). **Abstraction** is valuable for two key reasons:

  - **Abstraction** hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the code.
  - **Abstraction** helps us to reduce code duplication. Abstraction provides ways of dealing with crosscutting concerns and enables us to avoid tightly coupled code.

The lack of abstraction inevitably leads to problems with maintainability.

More Details on [CSS TRICKS](https://css-tricks.com/importance-javascript-abstractions-working-remote-data/)

### 11. What is `this` keyword in Arrow function?
In classic function expressions, the `this` keyword is bound to different values based on the context in which it is called. With arrow functions, however, `this` is lexically bound. It means that it uses this from the code that contains the arrow function.

For example, look at the setTimeout function below:
```javascript
// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};
```
In the ES5 example, `.bind(this)` is required to help pass the this context into the function. Otherwise, by default `this` would be undefined.
```javascript
// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};
```
ES6 arrow functions can’t be bound to a `this` keyword, so it will lexically go up a scope, and use the value of `this` in the scope in which it was defined.

More Details on [freeCodeCamp Blog](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26)

### 12. What is `this` keyword in normal function?
A function's `this` keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of `this` is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the `bind()` method to set the value of a function's `this` regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own `this` binding (it retains the `this` value of the enclosing lexical context).

More Details on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

### 13. What is the difference between localStorage, sessionStorage and cookies?
OK, __localStorage__ as it's called its local storage for your browsers, it can save up to __10MB__, __sessionStorage__ does the same, but as its name saying, it's session based and will be deleted after closing your browser, also can save less than __localStorage__, like up to __5MB__, but __cookies__ are very tiny data storing in your browser, that can save up __4KB__ and can be accessed through server or browser both...

More Details on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

### 14. What is CORS?
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional `HTTP` headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

More Details: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

### 15. What is HTTP request?
__HTTP Request__ is a packet of Information that one computer sends to another computer to communicate something. To its core, __HTTP Request__ is a packet of binary data sent by the Client to the server. An __HTTP Request__ contains following parts. Request Line. Headers, 0 or more Headers in the request.

More Details on [Codecademy](https://www.codecademy.com/articles/http-requests)

### 16. How many HTTP methods we have?
HTTP defines a set of `request methods` to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be safe, idempotent, or cacheable.

#### GET
The `GET` method requests a representation of the specified resource. Requests using `GET` should only retrieve data.

#### HEAD
The `HEAD` method asks for a response identical to that of a `GET` request, but without the response body.

#### POST
The `POST` method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.

#### PUT
The `PUT` method replaces all current representations of the target resource with the request payload.

#### DELETE
The `DELETE` method deletes the specified resource.

#### CONNECT
The `CONNECT` method establishes a tunnel to the server identified by the target resource.

#### OPTIONS
The `OPTIONS` method is used to describe the communication options for the target resource.

#### TRACE
The `TRACE` method performs a message loop-back test along the path to the target resource.

#### PATCH
The `PATCH` method is used to apply partial modifications to a resource.

### 17. What is API and REST API?
##### API:
a set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other services.

More Details on [freeCodeCamp blog](https://medium.freecodecamp.org/what-is-an-api-in-english-please-b880a3214a82)

##### REST API:
__REST__ or __RESTful__ API design (Representational State Transfer) is designed to take advantage of existing protocols. While __REST__ can be used over nearly any protocol, it usually takes advantage of HTTP when used for Web APIs. This means that developers do not need to install libraries or additional software in order to take advantage of a REST API design. REST API Design was defined by Dr. Roy Fielding in his 2000 doctorate dissertation. It is notable for its incredible layer of flexibility. Since data is not tied to methods and resources, REST has the ability to handle multiple types of calls, return different data formats and even change structurally with the correct implementation of hypermedia.

More Details on [SitePoint](https://www.sitepoint.com/developers-rest-api/)

### 18. Make an AJAX request?
Here is a generic jQuery AJAX request:
```javascript
$(function() {
    function LoadPersons(data) {
        // do something with data
    }

    $.ajax({
        type: 'POST',
        url: url,
        data: JSON.stringify(parameters),
        contentType: 'application/json;',
        dataType: 'json',
        success: function(result) {
            // do something with persons (data)
            // e.g. LoadPersons(data);
        }
    });
});
```

More Details on [jQuery official docs](http://api.jquery.com/jquery.ajax/)

### 19. How does the browser work?
The web server locates and then sends the information to the web browser, which displays the results. When web browsers contact servers, they're asking to be sent pages built with Hypertext Markup Language (HTML). Browsers interpret those pages and display them on your computer.

More Details on [html5rocks](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)

### 20. What is Pure Function in JavaScript?
Pure functions are functions that accept input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value. ... Here is a pure function.

More Details on [freeCodeCamp blog](https://medium.freecodecamp.org/what-is-a-pure-function-in-javascript-acb887375dfe)

### 21. Event Handling in JavaScript?
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click to is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

More Details on [Eloquent Javascript](https://eloquentjavascript.net/15_event.html)

### 22. JavaScript execution context?
Execution context (EC) is defined as the environment in which JavaScript code is executed. By environment I mean the value of this, variables, objects, and functions JavaScript code has access to, constitutes its environment.

More Details on [medium](https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0)

### 23. How to manage your state in React?
There's always been a myriad of ways to manage state in React. Redux has always been a popular choice, but with React 16, and recently released libraries, there are now even more options. you can manage your state using __React Context API__, __Redux__ or __Mobx__ etc.

More Details on [Medium](https://blog.bitsrc.io/state-of-react-state-management-in-2019-779647206bbc)

### 24. How Redux works?
Actions, reducers, action creators, middleware, pure functions, immutability…
Most of these terms seem totally foreign.

__Redux__ is astonishingly simple. It uses a function called a reducer (a name derived from the JavaScript reduce method) that takes two parameters: An action, and a next state. The reducer has access to the current (soon to be previous) state, applies the given action to that state, and returns the desired next state.

More Details on [Dave Ceddia's blog](https://daveceddia.com/how-does-redux-work/)

### 25. What is Presentational Component and Functional Component?
##### Presentational Component:
Rarely have their own state (when they do, it’s UI state rather than data).

More Details on [Dan Abramov blog](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

##### Functional Component:
A React component can be considered pure if it renders the same output for the same state and props.

More Details on [Log Rocket](https://logrocket.com/blog/pure-functional-components/)

Want to know about "Full Stack Developer Interview Questions" below toptal.com article is a good read.
[10 Essential Full-stack Interview Questions](https://www.toptal.com/full-stack/interview-questions)

Feel free to comment and share this article with your favorite places and yes encourage me to spread your love by clicking the heart button. Thanks

## Who Am I?
This is [Md. Jamal Uddin](https://jaamaal.com/) working as a Software Developer based in Dhaka, Bangladesh. I love to learn new things and share them with others. Playing with cutting technologies is my hobby and working with legacy is my day job :). Connect me on [Twitter](https://twitter.com/jamal_uddin95) and [LinkedIn](https://www.linkedin.com/in/jamal-pb95/)

Note: this post all data is collected from various sources. I have referenced some of them.