1.

Javascript engine:
JavaScript is not understandable by computer but the only browser
understands JavaScript. So, we need a program to convert our
JavaScript program into computer-understandable language. A
JavaScript engine is a computer program that executes JavaScript
code and converts it into computer understandable language.

Browser Name of Javascript Engine

Google Chrome V8

Edge (Internet Explorer) Chakra

Mozilla Firefox Spider Monkey

Safari Javascript Core Webkit

● Interpreter
Interpreters are quick. We don’t have to go through that
whole compilation step before execution. It just starts
translating the first line and then executes it. the interpreter
runs the code and executes it line by line.
● Compiler
The source code is converted into machine code once and
then gets executed.
● JIT(Just in Time)
 In short, a Just in time compiler is nothing but a
combination of an interpreter and a compiler.

2. DOM (Document object Model)

The DOM is represented as a tree.
DOM converts our file element into an object tree. Every object in the
DOM is hierarchically under another object, and any object can have
multiple children.

With DOM, we can easily access and manipulate tags, IDs, classes,
Attributes, or Elements of HTML using commands or methods
provided by the Document object.

Why DOM?
DOM converts our file element into an object tree. javascript can not
understand the tags(<h1>H</h1>) in HTML documents but can
understand object h1 in DOM. Now, Javascript can access each of
the objects (h1, p, etc) by using different functions. With DOM, we
can easily access and manipulate tags, IDs, classes, Attributes, or
Elements of HTML using commands or methods provided by the
Document object.

Virtual DOM: It is exactly the same as DOM. So, whenever there is a

change in the state of any element, a new Virtual DOM tree is
created. This new Virtual DOM tree is then compared with the
previous Virtual DOM tree.. After this, only the updated elements will
get rendered on the page again.

Virtual DOM is just like a blueprint of a machine, can do the changes

in the blueprint but those changes will not directly apply to the
machine.

Virtual DOM makes the performance faster, not because the

processing itself is done in less time. The reason is the amount of
changed information – rather than wasting time on updating the
entire page, you can dissect it into small elements and interactions

Real DOM Virtual DOM

It can manipulate on-screen elements. It cannot manipulate on-screen elements.
Any change updates the entire DOM tree. Any change only updates the relevant node in the tree.
Updating is slow and inefficient. Updating is fast and efficient.

a. Execution Context
The First thing the javascript engine does is to create this Global
Execution Context. And it gives you two things: window object and
this.

There are two types of execution contexts: global and function. The
global execution context is created when a JavaScript script first
starts to run, and it represents the global scope in JavaScript. A
function execution context is created whenever a function is called,
representing the function's local scope.

There are two phases of JavaScript execution context:

● Creation phase: Sets up a memory for storing variables and
functions. Stores the variables with values as undefined and
function references.

● Execution phase: In this phase, the JavaScript engine

executes the code in the execution context. It processes
any statements or expressions in the script and evaluates
any function calls.
 3. data types?
Primitive data types can store only a single value. To store
multiple and complex values, non-primitive data types are
used

- Primitive types
String, Number, BigInt, Boolean, Undefined(variable is
declared but not assigned),
Null(It represents a non-existent or a invalid value), Symbol

typeof "John Doe" // Returns "string"

typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof 234567890123456789012345678901234567890n
// Returns bigint
typeof undefined // Returns "undefined"
typeof null // Returns "object" (kind of a bug in JavaScript)
typeof Symbol('symbol') // Returns Symbol

- Non-primitive types
Object - Used to store collection of data.

var obj1 = {
x: 43,
y: "Hello world!",
z: function(){
return this.x;
}
}

// Collection of data as an ordered list

var array1 = [5, "Hello", true, 4.1];

4. Declare/Define?
Declare - creating a variable is called "Declaring" a variable
in JavaScript.
Define - assign a value to the variable
 5. Hoisting?
All the variables and functions are declared, they are moved on top of
the scope before code execution. The scope can be both local and
global. Hoisting is the default behavior of javascript.

Note - Variable initializations are not hoisted, only variable

declarations are hoisted:
Note - To avoid hoisting, you can run javascript in strict mode by
using “use strict” on top of the code:

6. “ == “ and “ === “ operators?

“==” is used to compare values
“ === “ is used to compare both values and types.

7. Scope
There are two types of scopes in JS:
● Global Scope: all the variables and functions having global
scope can be accessed from anywhere inside the code.

● Scope chain: Whenever our code tries to access a variable

during the function call, it starts the search from local
variables. And if the variable is not found, it’ll continue
searching in its outer scope or parent functions’ scope until
it reaches the global scope and completes searching for the
variable there.

● Function Scope: Visibility is limited to the function.

function myFn() {
var x = 10;
console.log(x); //prints 10
}
console.log(x); // ReferenceError: x is not defined
 ● Block Scope: Visibility is limited to the block of code.
if (true) {
let x = 10;
console.log(x); //prints 10
}
console.log(x); // ReferenceError: x is not defined

https://www.interviewbit.com/problems/var-vs-let-vs-
const/

● Lexical Scope: Lexical Scope means that in a nested group

of functions, the inner functions have access to the
variables and other resources of their parent scope. This
means that the child's functions are lexically bound to the
execution context of their parents.

8. Lexical Environment
When the JavaScript engine creates a global execution
context to execute global code, it also creates a new lexical
environment to store the variables and functions defined in the
global scope.
A lexical Environment is holds an identifier-variable mapping

9. var and let?

Var - ‘var’ can be redefined and even redeclared anywhere
throughout its scope
Let - ‘let’ can be redefined within its scope but cannot be re-
declared within its scope.

var is function scoped and let is block scoped

Here we will see the use of var
<script>
console.log(x); // undefined
var x=5;
console.log(x); // 5
</script>

Here we will see the use of let

<script>
 console.log(x);
let x=5;
console.log(x);
</script>
ReferenceError: Cannot access 'x' before initialization

10. NaN?
NaN property represents the “Not-a-Number” value. It indicates a
value that is not a legal number.

typeof NaN will return a Number.

To check if a value is NaN, we use the isNaN() function,

11. passed by value and passed by reference?

In JavaScript, primitive data types are passed by value and non-
primitive data types are passed by reference.

● primitive types: data only respresent a single value.

var y = #8454; // y pointing to address of the value 234
var z = y;
var z = #5411; // z pointing to a completely new address of
the value 234
// Changing the value of y
y = 23;
console.log(z); // Returns 234, since z points to a new
address in the memory so changes in y will not effect z

● non-primitive types:
var obj = #8711; // obj pointing to address of { name:
"Vivek", surname: "Bisht" }
var obj2 = obj;
var obj2 = #8711; // obj2 pointing to the same address
// changing the value of obj1
obj1.name = "Akki";
console.log(obj2);
// Returns {name:"Akki", surname:"Bisht"} since both the
variables are pointing to the same address.
 12. strict mode?
a. Duplicate arguments are not allowed.
b. you won't be able to use the JavaScript keyword as
a parameter or function name..
c. not allowed to create global variables in 'Strict
Mode.

13. Higher Order Functions?

A function that takes another function(s) as an argument(s) and/or
returns a function as a value

—-------------
function higherOrder(fn) {
fn();
}
higherOrder(function() { console.log("Hello world") });
—--------------
function higherOrder2() {
return function() {
return "Do something";
}
}
var x = higherOrder2();
x() // Returns "Do something"

In JavaScript functions, map, filter and reduce are

examples of built-in higher-order functions

14. Inheritance
inheritance is an object getting access to the properties and method
of another object

15. “This”
this keyword refers to an object. In a regular function, this changes
according to the way that function is invoked.
Simple Invocation: this refers to the global object or maybe
undefined if you are using strict mode.
Method Invocation: this refers to the parent functions.
Indirect Invocation: if you use call or apply then that time this refers
to the first argument.
Constructor Invocation: this refers to the newly created instance.

16. Self Invoking Functions?

A self-invoking expression is invoked (started) automatically, without
being called. Function expressions will execute automatically if the
expression is followed by (). and will not be called again. Angle
bracket
(function () {
let x = "Hello!!"; // I will invoke myself
})();

17. call(), apply() and bind() methods

Call - call() method allows an object to use the method
(function) of another object.
call() accepts arguments
function sayHello(){
return "Hello " + this.name;
}
var obj = {name: "Sandy"};
sayHello.call(obj);
// Returns "Hello Sandy”

apply - The apply method is similar to the call() method. The

only difference is that,
call() method takes arguments separately whereas, apply()
method takes arguments as an array.
function saySomething(message){
return this.name + " is " + message;
}
var person4 = {name: "John"};
saySomething.apply(person4, ["awesome"]);
 Bind - This method returns a new function, where the value
of “this” keyword will be bound to the owner object, which is
provided as a parameter.

18. Callback
A callback function is a function that is
passed to another function as an argument and is executed after
some operation has been completed.

19. Closures?
Closure means that an inner function has access to the vars and
parameters of its outer function, even after the outer function has
returned. like variables remember their values even after a function
call. because the inner function retains a reference to the outer
function, even after the outer function has been executed.

When the function will be executed. Then all its variables will be used
and it will return a value, after the value is returned then all the
variables will be destroyed.

All the local variables will be destroyed. Variables will be destroyed

but the return value you get is called closure. Closure means a
function along with its environment. Function and lexical environment.

The function and the lexical environment reference are also returned.

Data Hiding and encapsulation

function Counter()
{
var counter = 0;
function IncreaseCounter()
{
return counter += 1;
};
return IncreaseCounter;
}
var counter = Counter();
 alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

20. constructor function?

Constructor functions are used to create objects in javascript
If we want to create multiple objects having similar properties and
methods, constructor functions are used

21. rest parameter and spread operator?

a. Rest (...) Parameter is collecting all remaining
elements into an array .
b. Spread Operator is unpacking collected elements
such as arrays into single elements

22. promises?
Promises are used to handle asynchronous operations in javascript.

Resolve: is a function that will be called when the async operation

has been successfully completed.
Reject: is a function that will be called, when the async operation
fails or if some error occurs.
then(): method is used to access the result when the promise is
fulfilled.
catch() method is used to access the result/error when the promise
is rejected.

23. exec () and test ()?

Exec - used to test for the match in a string. If there is a match this
method returns the first match else it returns NULL.
Test - used to test for the match in a string. If there is a match this
method returns true else false.

24. Currying?
transforms a function into a nested series of functions, each taking a
single argument. Instead of taking all the arguments at the same
time, the function takes one argument at a time and returns a new
function.
 function multiply(a,b){
return a*b;
}
function currying(fn){
return function(a){
return function(b){
return fn(a,b);
}
}
}
var curriedMultiply = currying(multiply);
multiply(4, 3); // Returns 12
curriedMultiply(4)(3); // Also returns 12

It divides your function into multiple smaller functions that can handle
one responsibility.

It helps us to create a higher-order function.

It is very useful in building modular and reusable code

It helps us to avoid passing the same variable multiple times

It makes the code more readable

It reduces the chances of error in our function by dividing it into

multiple smaller functions that can handle one responsibility.

25. Coercion?
Implicit type coercion in javascript is the automatic conversion of
value from one data type to another.
● String coercion

var x = 3;
var y = "3";
x + y // Returns "33"

var x = 3;
Var y = "3";
x - y //Returns 0 since the variable y (string type) is
converted to a number type
 ● If statements:
var x = 0;
var y = 23;
if(x) { console.log(x) } // The code inside this block will not
run since the value of x is 0(Falsy)
if(y) { console.log(y) } // The code inside this block will run
since the value of y is 23 (Truthy)

● Logical operators
OR ( | | ) operator - If the first value is truthy, then the first
value is returned. Otherwise, the second value always gets
returned.

AND ( && ) operator - If both the values are truthy, always

the second value is returned. If the first value is falsy then
the first value is returned or if the second value is falsy then
the second value is returned.

Event Bubbling

1. Capturing Phase
2. Target Phase
3. Bubbling Phase
Let's say we add a button in our webpage and the button is wrapped
into another div ok. So button is a child element and div is parent
element. When you click on a button it automatically clicks on the
parent element also. So it calls Bubbling like an event call and
bubbles up all the elements
 Cookie and Session

Cookie Session

Cookies are client-side files that are Sessions are server-side files that store user information.
stored on a local computer and contain session start() method
user information.

Cookies expire after the user specified The session ends when the user closes the browser or logs
lifetime. out of the program.

It can only store a limited amount of It is able to store an unlimited amount of information.
data .Like 4 KB

Cookies are used to store information The data is saved in an encrypted format during sessions.
in a text file.

event delegation

Event delegation is a technique in JavaScript where you attach a

single event listener to a parent element instead of attaching
individual event listeners to multiple child elements. This is useful
because it reduces memory consumption and improves
performance, especially when dealing with a large number of
elements. It also allows you to handle events on dynamically added
or removed elements.

BFC.

In the webpage all the elements in the block box are right so
sometimes we face some issues like overlapping and all.
So BFC defines some rules like Root element should be HTML and
float is not null, display elements should be inline-box or table or flex
and grid.
React

Arrow Functions

is a new feature introduced in ES6. Functions are used to perform

certain actions, and they are important for reusing code: Define the
code once, and use it many times.
● Syntax
● Arguments binding
● Function Hoisting
● this
● new keyword
● No duplicate named parameters

Render
It is compulsory for each component to have a renader() function.
Render function returns the html which is to be displayed in a
component. If you need to render more than one element, all the
elements must be inside one parent tag.

Hooks
Hooks are the function component that let you “hook into” react
state and lifecycle features from the function component.

-so before the function component, react was using class

components right where we used lifecycle methods and state now
you are replacing classes with functions so you need some reason to
provide state and lifecycle features in functional components.

Rules React Hooks?

Only call hooks at the top level. You can’t call hooks in a loop inside
loops, conditions and all.

Methods: usestate, useEffect, useMemo, useRef

useState: useState is used to store data and It returns an array with

two elements: the current state value and a function to update that
value
useEffect: useEffect performs like lifeCycle methods like component
mount, update, or unmount. you can use it to fetch data, set up event
listeners, state change and all.

useRef: You can use it to store values, refer to DOM elements, or

hold references to other objects.

useMemo: it compare previous state and props to current state and

props and check if it updated then only component render otherwise
not

Why hooks?
● No more complex lifecycle method
● You don't want to worry about “this” keyword
● No more method binding

Lifecycle methods in hooks:

Initial render

componentDidMount()
usEffect(()=>{
},[])

update
Shouldcomponentupdate()
useMemo() // basically you can decide whether you can render this
component or not.

componentDidUpdate()
useState(() => {
})

useState(() => {
setUser(“Hemanhsi”);
},[props.user])

Unmount
useState(() => {
return () => {{cleanup}}
}, [])
State
The state is used to contain data or information about the
component. Every time the state of an object changes, React re-
renders the component to the browser
● The state object is initialized in the constructor
● A state can be modified based on user action or network
changes
● The state object can store multiple properties
● this.setState() is used to change the value of the state
object

Props
Props stand for "Properties." They are read-only components. Props
are used to store data that can be accessed by the children
component.

State vs Props

State Props

Use Case State is used to store Props are used to

the data of the pass data and event
components that have handlers to the
to be rendered to the children components
view
⇙Mutability State holds the data Props are immutable—
and can change over once set, props cannot
time be changed
Component State can only be used Props can be used in
in class components both functional and
class components
Updation Event handlers The parent component
generally update state sets props for the
children components
HOC
a higher-order component is a function that takes a component and
returns a new component.High order Components act as a container
for other components. They are generally used when a common
logic has to be used by multiple components.

Example
HOC.js
Const HOC = (component) => {
const data = {
firstName: “Hemanshi”,
lastName: “Undhad”
}
return () => <component values={data} />
}
export default HOC;

App.js
Import HOC from “./HOC”;
const App = ({values}) => {
returns (
<div>
First Name: {values.firstName}
Last Name: {values.lastName}
<div>
)
}
Export default HOC(App);

Components
components are independent and reusable bits of code.

Function and Class Component

Functional
Class Components
Components

A functional component that A class component requires you

accepts props as an argument to extend from React.
and returns a React Component and create a render
 function which returns a React
element(JSX).
element.

Functional components run

Class component is instantiated
from top to bottom and once the
and different life cycle method
function is returned it can't be
is kept alive
kept alive.

Also known as Stateless

components as they simply
Also known as Stateful
accept data and display them in
components because
some form, they are mainly
responsible for rendering UI.

React lifecycle methods can be

React lifecycle methods cannot
used inside class components
be used in functional
(for example,
components.
componentDidMount).

It requires different syntax

Hooks can be easily used in inside a class component to
functional components to make implement hooks.
them Stateful. example: constructor(props) {
example: const super(props);
[name,SetName]=
React.useState(‘ ‘) this.state = {name: ‘ ‘}
}

Constructor are used as it needs

Constructors are not used.
to store state.

Pure Component

Pure Component compares current state and props with new props
and states to decide whether the component should re-render itself
or Not.
Lifecycle

i. Initialization - define the props and initial state of the

component.
ii. Mounting

when the initialization of the component is completed and

the component is mounted on the DOM and rendered for the
first time on the webpage.

componentWillMount() – this function gets invoked once

before the render() function is executed for the first time.

componentDidMount() – this function gets invoked once

after the render() function is executed for the first time

iii. Updation

where the states and props of a component are updated

followed by some user events such as clicking, pressing a
key on the keyboard

componentWillReceiveProps() - This function is invoked

before a mounted component gets its props reassigned

shouldComponentUpdate() - Returns true or false value

based on certain conditions. If you want your component to
update, return true else return false. By default, it returns
false.

componentWillUpdate () - this function gets invoked once

before the render() function is executed after the updation
of State or Props

componentDidUpdate() - this function gets invoked once

after the render() function is executed after

iv. componentWillUnmount() – Called after the component is

unmounted from the DOM. It is used to clear up the memory
spaces.
Redux

is used for the entire application's state management. React uses

Redux for building the user interface.

Why we use Redux:

When an application holds a large number of components interacting
with each other through their state it becomes difficult to manage
the passing of state of a component as props to another component
located far in the component tree.

Redux-Saga is a library that aims to make application side effects

(i.e. asynchronous things like data fetching and impure things like
accessing the browser cache) easier to manage, more efficient to
execute, easy to test, and better at handling failures.

Store: it hold the state of the application, storing all of the states in a
single place called a store

Action: Dispatch an action, it is the source information for the store,

Any data, whether from UI events, needs to eventually be dispatched
as actions. Actions only describe what happened, not how the
application's state changes.
A reducer is a function that accepts the current state and action, and
returns a new state with the action performed.

export const increment = (num) => {

return{
type: 'INCREMENT',
payload: num
};
};

Reducer: it specifies how the application’s state changes in response

to action sent to the store.
const counterReducer = (state=0, action) => {
switch(action.type)
{
case 'INCREMENT':
return state + action.payload;
case 'DECREMENT':
 return state - 1;
default:
return state;
}
};

Routing
React Routing is binding an URL to a component. React does not
support routing directly. So we can use third party library like react-
router-dom
React router provides four components to manage navigation
1.Router
2.Link
<Link to="/">Home</Link>
3. Route
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);

<Router>
<Route path="/about" component={About} />
</Router>

Styling
● Inline styling
● Javascript object
const styleobj={
color: “white”,
margin: “8px”
}
<h1 style={styleobj} />
 ● create a css file and import it in the component.

Map, filter and reducer

Map : map function is basically used to transform an array.
Transform means if you want to transform each and every value of
this array and get a new array out of it.

filter: filter function filters all values on the array based on some
conditions.
reduce: reducer function executes each element of the array and
returns a single output value.

Debouncing
Debouncing it helps us to optimize how to call certain events.

Ex: in the input field we call some function and call API on onChange
event.

What happens to every single KeyStroke or every single letter that

we type on input each time we call API. it will make a lot of
unneccesary API calls to the backend. which will put a lot of pressure
on our server, right so to avoid these issue we used debouncing

The debounce function makes sure that the code is only triggered
once user input pauses.

If we add 400 milliseconds in the debouncing function then when we

type something and pause then after 400 millisecond action will be
called.

Throttling
Throttling is a technique to limit the execution of an event handle
function even when an event triggers continuously due to user
action.

Like you set the trigger limit as a 400 millisecond ok. And you trigger
events continuously so what happens is that the action only calls
every 400 milisecound.
ECMAScript

The ECMAScript specification is a standardized specification of a

scripting language

Sync & Async

Synchronous means the code runs in a particular sequence of

instructions given in the program. Each instruction waits for the
previous instruction to complete its execution.

Asynchronous: Asynchronous code execution allows to execution

next instructions immediately and doesn't block the flow because of
previous instructions

responsbility

My responsbility is to take care of frontend related work. I interact

with my clients. I get the requirements in the form of a document or
email. Then I start preparing design, then we will reach out to certain
teams for the data, especially data engineers.

Day to day work

So my day starts with a stand-up meeting where we discuss about

blockers, what is the current work we are doing and always we
interact with the team making sure that if anyone is facing
challenges we try to solve it. Then we prioritize our task and start
working on it.

Why React
From the start of my career I just worked with react only. So I think I
have good knowledge about react.

Virtual DOM: React uses a virtual DOM (Document Object Model)

which is an efficient way to render updates to the UI. When a change
is made, React updates only the specific part of the UI that needs to
change, rather than re-rendering the entire page. This results in faster
rendering and better performance compared to some other libraries.
Component-based architecture: React uses a component-based
architecture, which means that each part of the UI is broken down
into smaller, reusable components. This makes it easier to maintain
and update the UI, as changes to one component do not affect the
others

One-way data flow: React follows a one-way data flow model, where
the data flows in one direction, from the parent component to the
child component. This makes it easier to debug and understand the
flow of data within the application.

React was an open-sourced library. With frameworks like Redux,

React can simply be extended to integrate functionality like routing
and state management patterns.

Absolute : Element will be positions relative to the closest positioned

Relative: Element will be positioned relative to its original position.

AXIOS

● Make XMLHttpRequests from the browser

● Make http requests from node.js

● Supports the Promise API

● Intercept request and response

● Transform request and response data

● Cancel requests

● Automatic transforms for JSON data

Optimize React Code:

- Reduce Re-rendering
Use React Pure Components to reduce Re-rendering

to make rendering faster. You can use techniques like

shouldComponentUpdate, PureComponent, and React.memo to
avoid unnecessary re-renders.
If the previous state and props data is the same as the updated
props or state, then the component is not re-rendered.

- Lazy Loading and Suspense

const Component = React.lazy(() => import('./Component'));

<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>

Lazy component rendered inside a Suspense component. What

happens is it waits until all component data loads and then displays
data. And there is one fallback which allows us to show some
content like which we give in fallback argument

- Code Splitting
Split your code into smaller parts so that only the necessary parts are
loaded when needed.

- Do Not Use Inline Function Definition

If we are using the inline functions, every time the “render” function is
called, a new instance of the function is created.

- Debouncing concepts
Debouncing refers to ignoring the event handler call until the calls
have stopped for a certain amount of time.

- Use function base component instead of class component

- When data is 1000 of code then add Pagination and like you can
fetch first 50 record and then when you click on next then next 50
record fetch or you can fetch record scroll base when you scroll
down then api call and data will be fetch

- Delete unnecessary library

optimizing the loading time

minifying and compressing JavaScript and CSS
files, leveraging browser caching, reducing the
number of HTTP requests, optimizing image sizes,
using content delivery networks (CDNs), lazy-
loading resources, and implementing code splitting
to load only necessary code initially
Polyfill
Some Functionality that one browser might support but another
browser might not be supported so that time we need to write a code
to understand new functionality in older browsers too.

Call ()
let car1 = {
color: "Red",
company: "Hundai"
}

function purchase(Currency, price) {

console.log(`I have purchased ${this.color} - $
{this.company} car for ${Currency} ${price}`)
}

Function.prototype.mycall = function(content = {}, ...args) {

if(typeof this !== "function") {
throw new Erro(this + "It's not Callable")
}

content.fn = this;
content.fn(...args);
}

purchase.mycall(car1, "Rs", 50000000)

Apply()
let car1 = {
 color: "Red",
company: "Hundai"
}

function purchase(Currency, price) {

console.log(`I have purchased ${this.color} - $
{this.company} car for ${Currency} ${price}`)
}

Function.prototype.myApply = function(content = {}, args = []) {

if(typeof this !== "function") {
throw new Error(this + "It's not Callable")
}

if(!Array.isArray(args)) {
throw new TypeError("Not Array")
}

content.fn = this;
content.fn(...args);
}

purchase.myApply(car1, ["Rs", 50000000])

Bind()
let car1 = {
color: "Red",
company: "Hundai"
};

function purchase(Currency, price) {

console.log(`I have purchased ${this.color} - ${this.company} car
for ${Currency} ${price}`);
}

Function.prototype.myBind = function (content, ...args) {

if (typeof this !== "function") {
throw new Error(this + " is not callable");
}

const fn = this;
return function (...newArgs) {
return fn.apply(content, [...args, ...newArgs]);
};
};

const car2 = purchase.myBind(car1, "Rs");

 console.log(car2(50000000));

Project structure

Hooks

Curring
Clourser

LifeCycle

Diff React 16 - 18

Deployment

Lazy component

1. what is debouncing,
2. what is throtlling,
3. why should we use react js over other framework and libraries,
4. tell me a scenario where you found a solution for a blocker or problem
that you are really proud of,
5. explain all the hooks in reactjs,
6. explain component lifecycle and all the lifecycle methods in functional
component,
7. what is redux saga and redux thunk,
8. explain all the methods in react js for overall application speed
optimization,
9. what is polyfill using call, apply, bind for reusable logic in javascript,
10. explain prototype in javascript,
11. what are higher order components,

coding round:
Given a string containing just the characters '(', ')', '{', '}', '[' and ']',
determine if the input string is valid.
input : “[()]{}{[()()]()}” validate if the structure is correct if it is return
true or else return false
the validation should check if a opening braces have a closing
braces and also they are in the currect order
example: in javascript the correct order is [ { ( ) } ]

Que: what are the challenging roles that i can expect here? I m very
much interested this role so