1
Q
Promise
A
- 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
2
Q
Using promise
A
- 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)
3
Q
Promise api
A
- 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
4
Q
async/await
A
- 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
5
Q
virtual dom
A
- 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
5
Q
git
A
- a distributed control version system
- ## famous workflows : truck based and gitflow
5
Q
js data types
A
- 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)
5
Q
typescript type and interface
A
- 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
5
Q
closure
A
- 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
5
Q
hoisting
A
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
5
Q
scope
A
- 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
-
5
Q
Global scope
A
The default scope for all code running in script mode.
6
Q
Module scope:
A
The scope for code running in module mode.
6
Q
Function scope
A
The scope created with a function.
7
Q
Block scope
A
The scope created with a pair of curly braces (a block).
8
Q
What is Cross-Site Scripting (XSS)
A
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.
9
Q
What is callback hell?
A
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
9
Q
Polymorphism
A
The word Polymorphism means having many different forms. If we talk in object-oriented form, polymorphism refers to one interface, multiple functions.
10
Q
Strict Mode?
A
A new feature of ECMAScript 5 is Strict mode which lets you place a function, or a program in a “strict” context of operating.
11
Q
What is meant by the KISS principle?
A
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.
12
Q
What does SOLID stand for?
A
S- single responsibility principle
O- open-closed principle
L- Liskov Substitution principle
I- interface segregation principle
D- dependency.
13
Q
What is type Coercion in JavaScript?
A
The conversion of two different build-in Types of JavaScript is called Coercion. It comes in two forms, Explicit and implicit.
14
Q
Mention ways to decrease page load time?
A
Image optimization
Browser cache
Compress and optimize content
15
Q
State the elements of the CSS Box Model.
A
Content
Padding
Border
Margin
16
What is the benefit of Srcset?
When we want to generate many new solutions of exact images on several devices, Srcset is used. This helps improve the UI.
17
Differentiate Between Git Merge and Git Rebase
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.
18
react
- 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.
19
What is JSX?
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.
20
What is the difference between Element and Component?
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:
21
What are Pure Components?
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.
22
What is state in React?
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.
23
What are props in React?
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.
24
What are synthetic events in React?
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.
25
What is "key" prop and what is the benefit of using it in arrays of elements?
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.
26
What is the use of refs?
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.
27
What are forward refs?
Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.
28
What are controlled components?
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.
29
What are uncontrolled components?
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.
30
What is the difference between createElement and cloneElement?
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.
31
What is Lifting State Up in React?
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.
32
What are the different phases of component lifecycle?
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.
33
What are the lifecycle methods of React?
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.
34
What are Higher-Order Components?
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.
35
How to create props proxy for HOC component?
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
36
What is context?
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);
37
What is children prop?
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.
38
What are stateless components?
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.
39
What are the advantages of React?
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.
40
What are the recommended ways for static type checking?
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.
41
What is the use of react-dom package?
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()
42
What is ECMAScript
43
What is tree shaking
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.
44
What is JavaScript?
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.
45
What is the purpose of the this keyword in JavaScript?
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
46
What are classes in ES6
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";
}
}
47
What are modules
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
48
What is a service worker
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.
49
How do you manipulate DOM using a service worker
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.
50
What is event bubbling
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.
51
What is same-origin policy
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).
Frontend
flashcards
Decks in class (4)
# Cards
