Frontend

Question 1

Promise

Answer 1

• promise object represents completing or failure of an async operation
• a promise is a proxy for value that is not essentially known when promise is created
• with promise , async methods can return value like sync methods
• instead of returning an instant value , method will return a promise which will be possible a value in future
• promsie state : pending , fullfilled , failure

Question 2

Using promise

Answer 2

• promiseMethod.then(successFunc , failureFunc)
• chaining promise vs callback hell
• if first promise returns another promise we can use it to chain promises (eventual tasks after another)

Question 3

Promise api

Answer 3

• promise.all() : takes promises as input and return a single promise
  -promise.any() : same as above , if any resolved final promise will be resolved
• promise.race() : same as above , first promise is final promise
• Promise.reject() : Returns a new Promise object

Question 4

async/await

Answer 4

• special syntax to work with promises
• easy and clean
• async and await keywords
• error handling with try catch blocks
• using await to make function pause and behave async

Question 5

virtual dom

Answer 5

• Document object model
• tree shape object with branches
• with dom , js can make html dynamic
• virtual dom is a lightweight javascript representation of Real Dom
• libraries such as ReactDom sync virtual dom to Real dom

Question 5

git

Answer 5

• a distributed control version system
• ## famous workflows : truck based and gitflow

Question 5

js data types

Answer 5

• built-in data structures
• js is dynamic type means variables are not directly associated with any particular value type , in result any variable can be assigned or reassigned by any value type
• weakly typed : allows implicit type conversion where an operation involves mismatch types
• in js all types expect object define immutable values represented directly at the lowest level of language
• all primitive can be tested by typeof expect null and undefined
• Null , undefined, string , number ,symbol , bigint , boolean
• Object , (dates , indexed collection like array , keyed collection liker map , set and structured data like json)

Question 5

typescript type and interface

Answer 5

• typescript is a seperset of javascript and a seprate langugage
• it adds type checking and ide completation
• we can define types based on built-in types with interface and type keywords
• basic types in ts (same as js just more) are : boolean , string ,number, array , tuple , Enum , Uknown , any , void,null and undefined , never , object

Question 5

closure

Answer 5

• a form of lexical scoping that used to preserve variables from outer scope of a function in the inner scope of function
• usage : closures let you associate data (the lexical env) with a function that operates on that data , it is a paradigm like object oriented programming , where object lets you associate data (object props) with one or more methods

Question 5

hoisting

Answer 5

a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution
- var and function declarions
- let , const , use strict

Question 5

scope

Answer 5

• current context of execution in which values and expressions are “visible” or can be referenced
• Scopes can also be layered in a hierarchy
  -child scopes have access to parent scopes, but not vice versa
  -

Question 5

Global scope

Answer 5

The default scope for all code running in script mode.

Question 6

Module scope:

Answer 6

The scope for code running in module mode.

Question 6

Function scope

Answer 6

The scope created with a function.

Question 7

Block scope

Answer 7

The scope created with a pair of curly braces (a block).

Question 8

What is Cross-Site Scripting (XSS)

Answer 8

XSS, Cross-Site Scripting is an attack which takes place when any attacker uses a web application to send any malicious code, in the form of browser side script, to another user.

Question 9

What is callback hell?

Answer 9

The callbacks which are stacked in the form of pyramid structure.

when we use callback functions to do async operations , chaining of callback function make code very messy and hard to read

Question 9

Polymorphism

Answer 9

The word Polymorphism means having many different forms. If we talk in object-oriented form, polymorphism refers to one interface, multiple functions.

Question 10

Strict Mode?

Answer 10

A new feature of ECMAScript 5 is Strict mode which lets you place a function, or a program in a “strict” context of operating.

Question 11

What is meant by the KISS principle?

Answer 11

KISS, a backronym of “Keep it simple, stupid”. Which was the principal design in the US Navy in 1960. The KISS principle states that the simpler the system the better it works.

Question 12

What does SOLID stand for?

Answer 12

S- single responsibility principle

O- open-closed principle

L- Liskov Substitution principle

I- interface segregation principle

D- dependency.

Question 13

What is type Coercion in JavaScript?

Answer 13

The conversion of two different build-in Types of JavaScript is called Coercion. It comes in two forms, Explicit and implicit.

Question 14

Mention ways to decrease page load time?

Answer 14

Image optimization
Browser cache
Compress and optimize content

Question 15

State the elements of the CSS Box Model.

Answer 15

Content
Padding
Border
Margin

Question 16

What is the benefit of Srcset?

Answer 16

When we want to generate many new solutions of exact images on several devices, Srcset is used. This helps improve the UI.

Question 17

Differentiate Between Git Merge and Git Rebase

Answer 17

you can rebase the feature branch into master instead of merging it. This incorporates all the new commits in the master branch. It also re-writes the project history by creating brand new commits for each commit in the original branch.

Question 18

react

Answer 18

• a js library for building modern applications
• feauters : jsx . Virtual DOM,server-side rendering,nidirectional or one-way data flow
  -reusable/composable UI components to develop the view.

Question 19

What is JSX?

Answer 19

JSX stands for JavaScript XML and it is an XML-like syntax extension to ECMAScript. Basically it just provides the syntactic sugar for the React.createElement(type, props, …children) function, giving us expressiveness of JavaScript along with HTML like template syntax.

Question 20

What is the difference between Element and Component?

Answer 20

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it cannot be mutated.

-Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

Question 21

What are Pure Components?

Answer 21

Pure components are the components which render the same output for the same state and props. In function components, you can achieve these pure components through memoized React.memo() API wrapping around the component. This API prevents unnecessary re-renders by comparing the previous props and new props using shallow comparison. So it will be helpful for performance optimizations.

Question 22

What is state in React?

Answer 22

State of a component is an object that holds some information that may change over the lifetime of the component. The important point is whenever the state object changes, the component re-renders.
It is always recommended to make our state as simple as possible and minimize the number of stateful components.

Question 23

What are props in React?

Answer 23

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation similar to HTML-tag attributes. Here, the data is passed down from a parent component to a child component.

Question 24

What are synthetic events in React?

Answer 24

syntheticEvent is a cross-browser wrapper around the browser’s native event. Its API is same as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Question 25

What is “key” prop and what is the benefit of using it in arrays of elements?

Answer 25

A key is a special attribute you should include when mapping over arrays to render data. Key prop helps React identify which items have changed, are added, or are removed.

Question 26

What is the use of refs?

Answer 26

The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.

Question 27

What are forward refs?

Answer 27

Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.

Question 28

What are controlled components?

Answer 28

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

Question 29

What are uncontrolled components?

Answer 29

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Question 30

What is the difference between createElement and cloneElement?

Answer 30

JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.

Question 31

What is Lifting State Up in React?

Answer 31

When several components need to share the same changing data then it is recommended to lift the shared state up to their closest common ancestor. That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

Question 32

What are the different phases of component lifecycle?

Answer 32

The component lifecycle has three distinct lifecycle phases:

Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.

Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.

Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

It’s worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows

Render The component will render without any side effects. This applies to Pure components and in this phase, React can pause, abort, or restart the render.

Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the getSnapshotBeforeUpdate().

Commit React works with the DOM and executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

Question 33

What are the lifecycle methods of React?

Answer 33

Before React 16.3

componentWillMount: Executed before rendering and is used for App level configuration in your root component.
componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn’t need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
componentWillUpdate: Executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true.
componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
React 16.3+

getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need a derived state. Worth reading if you need derived state.
componentDidMount: Executed after first rendering and where all AJAX requests, DOM or state updates, and set up event listeners should occur.
shouldComponentUpdate: Determines if the component will be updated or not. By default, it returns true. If you are sure that the component doesn’t need to render after the state or props are updated, you can return a false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives a new prop.
getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

Question 34

What are Higher-Order Components?

Answer 34

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature.

We call them pure components because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.

HOC can be used for many use cases:

Code reuse, logic and bootstrap abstraction.
Render hijacking.
State abstraction and manipulation.
Props manipulation.

Question 35

How to create props proxy for HOC component?

Answer 35

You can add/edit props passed to the component using props proxy pattern like this:

function HOC(WrappedComponent) {
return class Test extends Component {
render() {
const newProps = {
title: “New Header”,
footer: false,
showFeatureX: false,
showFeatureY: true,
};

  return <WrappedComponent {...this.props} {...newProps} />;
}   }; }

Question 36

What is context?

Answer 36

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

For example, authenticated users, locale preferences, UI themes need to be accessed in the application by many components.

const { Provider, Consumer } = React.createContext(defaultValue);

Question 37

What is children prop?

Answer 37

Children is a prop (this.props.children) that allows you to pass components as data to other components, just like any other prop you use. Component tree put between component’s opening and closing tag will be passed to that component as children prop.

There are several methods available in the React API to work with this prop. These include React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.

Question 38

What are stateless components?

Answer 38

If the behaviour of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the this keyword altogether.

Question 39

What are the advantages of React?

Answer 39

Increases the application’s performance with Virtual DOM.
JSX makes code easy to read and write.
It renders both on client and server side (SSR).
Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
Easy to write unit and integration tests with tools such as Jest.

Question 40

What are the recommended ways for static type checking?

Answer 40

normally we use PropTypes library (React.PropTypes moved to a prop-types package since React v15.5) for type checking in the React applications. For large code bases, it is recommended to use static type checkers such as Flow or TypeScript, that perform type checking at compile time and provide auto-completion features.

Question 41

What is the use of react-dom package?

Answer 41

The react-dom package provides DOM-specific methods that can be used at the top level of your app. Most of the components are not required to use this module. Some of the methods of this package are:

render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()

Question 42

What is ECMAScript

Question 43

What is tree shaking

Answer 43

Tree shaking is a form of dead code elimination. It means that unused modules will not be included in the bundle during the build process and for that it relies on the static structure of ES2015 module syntax,( i.e. import and export). Initially this has been popularized by the ES2015 module bundler rollup.

Question 44

What is JavaScript?

Answer 44

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

Question 45

What is the purpose of the this keyword in JavaScript?

Answer 45

The this keyword in JavaScript is a special variable that is used within a function to refer to the object on which the function is invoked. The value of this depends on how the function is called. It allows functions to access and interact with the object they are bound to.
The this keyword in JavaScript is a reference to the object that owns or invokes the current function. Its value is determined by the calling context. Example 1: this in a Global Context
console.log(this);
In a global context, this refers to the global object (e.g., window in a browser

Question 46

What are classes in ES6

Answer 46

In ES6, Javascript classes are primarily syntactic sugar over JavaScript’s existing prototype-based inheritance. For example, the prototype based inheritance written in function expression as below,

function Bike(model, color) {
this.model = model;
this.color = color;
}

Bike.prototype.getDetails = function () {
return this.model + “ bike has” + this.color + “ color”;
};
Whereas ES6 classes can be defined as an alternative

class Bike {
constructor(color, model) {
this.color = color;
this.model = model;
}

getDetails() {
return this.model + “ bike has” + this.color + “ color”;
}
}

Question 47

What are modules

Answer 47

Modules refer to small units of independent, reusable code and also act as the foundation of many JavaScript design patterns. Most of the JavaScript modules export an object literal, a function, or a constructor

Question 48

What is a service worker

Answer 48

A Service worker is basically a script (JavaScript file) that runs in the background, separate from a web page and provides features that don’t need a web page or user interaction. Some of the major features of service workers are Rich offline experiences(offline first web application development), periodic background syncs, push notifications, intercept and handle network requests and programmatically managing a cache of responses.

Question 49

How do you manipulate DOM using a service worker

Answer 49

Service worker can’t access the DOM directly. But it can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM.

Question 50

What is event bubbling

Answer 50

Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element.

Question 51

What is same-origin policy

Answer 51

The same-origin policy is a policy that prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. If you enable this policy then it prevents a malicious script on one page from obtaining access to sensitive data on another web page using Document Object Model(DOM).