FE interview

Question 1

What is React?

Answer 1

An open-source JavaScript library developed by Facebook. It’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code in comparison with vanilla JavaScript.

In React, you develop your applications by creating reusable components that you can treat as independent blocks.

It supports reusable components, cutting down development time.

It uses JSX that makes it easier to code and render elements.

Also it uses Virtual DOM that eliminates excessive re-rendering, ensuring the high performance of your application.

Question 2

What is Redux?

Answer 2

Redux is an open-source JavaScript library for managing and centralizing application state.

It’s required to share data across the application and avoid props drilling.

The main advantage of using Redux is that it provides a predictable way to manage state in the application.

By making all state changes go through a central store, it’s easier to understand how the application’s state is modified.

Question 3

What are 3 main concepts of Redux?
How does Redux work?

Answer 3

Redux has three main concepts:

The store:
This is the single source of truth for the application’s state. It’s a big object that contains the current state of the application, and the central place where all state changes are made.

Actions:
Actions are objects that indicate an intention to change the state of the application. Actions get dispatched to the store. From there, the store uses them to determine how to update its state.

Reducers:
Reducers are pure functions. They take in the current state of the store and an action, and return a new state. They’re responsible for updating the store’s state. They use actions as information to do this. The Redux state should never be modified directly.

Question 4

Where is Redux stored

Answer 4

Redux keeps the state of the entire application in a single object, called the store. This store is a JavaScript object that provides methods for updating that state. The Redux store is created using the createStore function from the Redux library.

Question 5

What makes Redux so special?

Answer 5

The main advantage of using Redux is that it provides a predictable way to manage state in your application.

By making all state changes go through a central store, it’s easier to understand how the application’s state is modified.

Having this single source of truth makes it much easier to debug any issues.

It’s also easier to test, and to reset the store to a known initial state.

When using Redux with React, we can also manage state for React components. This makes it easier to build more complex, interactive applications.

Using Redux also gives a clear way to access and update the state of individual components.

Question 6

Redux set up process

Answer 6

Install the Redux library.

Create a store using the createStore function from the Redux library. We will pass the store a reducer function. This is a pure function that takes in the current state of the store and an action, and returns a new state.

Dispatch actions to the store using the dispatch method and passing it an action object. The store will use the reducer function to update its state based on the action that was dispatched.

Question 7

Why do you choose React?

Answer 7

React allows developers to utilize individual parts of their application, which boosts the speed of the development process. In simple terms, different developers can write individual parts and these changes will not cause the logic of the application.

It makes JavaScript coding more simple

It supports reusable components, cutting down development time.

JSX makes it easier to code and render elements.

Virtual DOM eliminates excessive re-rendering, ensuring the high performance of your application.

Question 8

What is AJAX?

Answer 8

AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of: A browser built-in XMLHttpRequest object (to request data from a web server)

AJAX is an acronym for Asynchronous JavaScript and XML. It is a group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest etc.

AJAX allows to send and receive data asynchronously without reloading the web page. So it is fast.

AJAX allows to send only important information to the server not the entire page. So only valuable data from the client side is routed to the server side. It makes the application interactive and faster.

Question 9

What is responsive design?

Answer 9

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

Question 10

What is Restful API?

Answer 10

RESTful API is an interface that two computer systems use to exchange information securely over the internet.

REST API is nothing but an application programming interface that follows REST architectural constraints such as statelessness, cacheability, maintainability, and scalability.

Question 11

What is the difference between REST API and RESTful API?

Answer 11

The REST API follows all the rules of the REST Architecture. It has a client-server, stateless, cacheable, layer system with a uniform interface, whereas the RESTful web applications have all the features of the REST architecture with unique additional features

REST (REpresentational State Transfer) is basically an architectural style of development having some principles:

It should be stateless

It should access all the resources from the server using only URI

It does not have inbuilt encryption

It does not have session

It uses one and only one protocol - HTTP

For performing CRUD operations, it should use HTTP verbs such as get, post, put and delete

It should return the result only in the form of JSON or XML, atom, OData etc. (lightweight data )

REST based services follow some of the above principles and not all

RESTFUL services means it follows all the above principles.

Question 12

What is the point of RESTful API?

Answer 12

RESTful APIs are the most commonly used APIs in the world of web services. They use Hypertext Transfer Protocol (HTTP) requests to create, read, update, and delete (CRUD) data. They are popular because of their simplicity, scalability, speed, and ability to handle all data types.

Question 13

What is a promise?

Answer 13

Promises are used to handle asynchronous operations in javascript

Before promises, callbacks were used to handle asynchronous operations. But due to the limited functionality of callbacks, using multiple callbacks to handle asynchronous code can lead to unmanageable code.

Promise object has four states -

Pending - Initial state of promise. This state represents that the promise has neither been fulfilled nor been rejected, it is in the pending state.

Fulfilled - This state represents that the promise has been fulfilled, meaning the async operation is completed.

Rejected - This state represents that the promise has been rejected for some reason, meaning the async operation has failed.

Settled - This state represents that the promise has been either rejected or fulfilled. A promise is created using the Promise constructor which takes in a callback function with two parameters, resolve and reject respectively.

Question 14

What is a callback?

Answer 14

Callbacks are functions that can be passed as an argument to another function. The callback function can be called from the function to which it was passed after some event has happened. Usually used for asynchronous actions

Question 15

What are the major features of React?

Answer 15

JSX.
Components.
One-way Data Binding.
Virtual DOM.
Simplicity.
Performance.

Question 16

What is JSX?

Answer 16

JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template. It is just an XML-like extension that allows us to write JavaScript that looks like markup and have it returned from a component.

Question 17

What is the virtual DOM

Answer 17

a concept used in react to provide faster updates on the DOM, React keeps in memory a copy of DOM, whenever there is an update React updates virtual DOM and sync it with real DOM

Question 18

How does the virtual DOM work?

Answer 18

The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

React uses Virtual DOM which is like a lightweight copy of the actual DOM (a virtual representation of the DOM). So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen. So each time there is a change in the state of our application, the virtual DOM gets updated first instead of the real DOM.

Question 19

What does lifting state up mean and why do we do it?

Answer 19

In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”.

Question 20

Why do we set a key property when we map over an array in React?

Answer 20

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

React uses the key prop to understand the component-to-DOM Element relation, which is then used for the reconciliation process.

Unique keys allow React not mix up the elements and avoid to mutate incorrect elements.

Question 21

What are the core principles of Redux?

Answer 21

Single source of truth​ The global state of your application is stored in an object tree within a single store.

State is read-only​ The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions​

Question 22

How do I make an AJAX request using Redux?

Answer 22

In old redux we apply redux-thunk middleware which allows you to define async actions.

Question 23

What are the benefits of using Redux DevTools?

Answer 23

Redux DevTool allows us to dispatch actions without writing any code. We can add our actions in dispatcher and it works just like action dispatched via Redux API. This kind of mocking helps in testing side effects and dependent actions.

Question 24

How do I use React DevTools? What does this help me with?

Answer 24

It enables developers to debug their code inside their Developer Tools.

We can check the props/ state/ hooks of the component

We can edit the props/ state from dev tools

We can search for a component

We can check the component’s tree

We can log a component’s data in the console

Question 25

Closure

Answer 25

Closures are inner functions that have access to the outer function’s variables and parameters. Even after the outer function’s execution is finished, the inner functions have access to the variables in the outer function.

Question 26

What is redux-thunk?

Answer 26

“thunks” are a pattern of writing functions with logic inside that can interact with a Redux store’s dispatch and getState methods. Using thunks requires the redux-thunk middleware to be added to the Redux store as part of its configuration.

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises

Question 27

React context vs Redux

Answer 27

The main difference between these two libraries is that Redux deals with changes of the state in a centralized manner. On the other hand, Context deals with them as they happen on the component level.

Question 28

What’s the benefit of using async/await?

Answer 28

Code is easily readable
Use numerous async functions in a row
Simpler debugging process
More convenient way of error handling

Question 29

What is cookie?
Cookies vs localStorage vs sessionStorage?

Answer 29

Cookies - the simplest form of browser storage.
Key-Value pairs.
Often set by the server - logging info.
Can also be created via document.cookie.

Local storage - part of the web storage API.
System for storing information in the browser.
No expiration date.

Session storage - the same.
Expires at. the end of a session.

Question 30

What is prototypal inheritance?

Answer 30

All javascript objects inherit properties from a prototype.
For example,
Array objects inherit properties from the Array prototype.

On top of the chain is Object.prototype. Every prototype inherits properties and methods from the Object.prototype.

A prototype is a blueprint of an object. The prototype allows us to use properties and methods on an object even if the properties and methods do not exist on the current object.

Question 31

What is the DOM?

Answer 31

DOM stands for Document Object Model.
DOM is a programming interface for HTML and XML documents.
When the browser tries to render an HTML document, it creates an object based on the HTML document called DOM.
Using this DOM, we can manipulate or change various elements inside the HTML document.

Question 32

How to compare two objects?

Answer 32

Objects are reference types so you can’t just use === or == to compare 2 objects. One quick way to compare if 2 objects have the same key value, is using JSON.stringify. Another way is using Lodash isEqual function 👏

Question 33

What is asynchronous programming and why is it important in JavaScript?

Answer 33

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished

Question 34

What is hoisting?

Answer 34

Hoisting is the default behavior of javascript where all variables with var keyword and function declarations are moved on top of the scope. The scope can be both local and global.

Question 35

What is apply, call and bind?

Answer 35

call()
It’s a predefined method in javascript
allows an object to use the method of another object.
accepts arguments

apply()
is similar to the call() method. The only difference is that, call() method takes arguments separately whereas, apply() method takes arguments as an array

bind()
returns a new function, where the value of “this” keyword will be bound to the owner object, which is provided as a parameter

Question 36

What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Answer 36

null is actual value
undefined - when a variable in declared but not initialized.
use the typeof operator

Question 37

what is higher order function?

Answer 37

What is a Higher Order Function? A higher order function is a function that takes one or more functions as arguments, or returns a function as its result. There are several different types of higher order functions like map and reduce.

Question 38

What is the difference between == and ===?

Answer 38

Both are comparison operators. The difference between both the operators is that “==” is used to compare values whereas, “ === “ is used to compare both values and types

Question 39

What is the difference between store and reducer

Answer 39

Store - Is what holds all the data your application uses. Reducer - is what manipulates that data when it recieves an action. Action - is what tells reducer to manipulate the store data, it carries the name and (not required) some data.

Question 40

How do you send data up from child to parent component

Answer 40

Pass a function as a prop to the Child component.
Call the function in the Child component and pass the data as arguments.
Access the data in the function in the Parent .

Question 41

How browser works

Answer 41

1. When you visit a website, the web browser that you are using will contact the DNS server that will translate the human readable website name into a numeric IP address. Every website name is basically an alias for an IP address. So, DNS converts that URL into IP address, and each website has its own unique IP address.
   Once a DNS server finds the IP address of the website, that IP address will be returned to the browser.
2. The browser will use the IP address to communicate with the web server.
3. Now that your browser has a connection with the website’s web server, your browser will retrieve the html code of the specific page that is requested.
4. Once your browser receives the HTML code from the web server, it will display that HTML code to you in the browser window.
5. If and when you close that particular browser window, the connection with the web server will end.

Question 42

How does HTTP work?

Answer 42

HTTP stands for Hypertext Transfer Protocol. It is a set of rules which is used for transferring the files like, audio, video, mage, text and other files. HTTP is a protocol that is used to transfer the hypertext from the client end to the server end, but HTTP does not have any security. Whenever a user opens their Web Browser, that means the user indirectly uses HTTP.

HTTP Requests are messages which are sent by the client or user to initiate an action on the server.

It has Request Header Fields: The request-header fields are used to allow the client to pass additional information to the server like the request and the client itself. The request header fields act as request modifiers, with semantics equivalent to the parameters on a programming language method invocation.

It has methods: get, post, patch, delete

The Server issues an HTTP Status Code in response to a request of the client made to the server. Status code is a 3-digit integer. The first digit of status code is used to specify one of five standard classes of responses. The last two digits of status code do not have any categorization role.

URI stands for uniform resource identifier. URIs define the identity of anything, including information resources such as web pages available on the internet and distinguish one resource from another.

Question 43

Virtual DOM

Answer 43

a concept used in react to provide faster updates on the DOM, React keeps in memory a copy of DOM, whenever there is an update React updates virtual DOM and sync it with real DOM

Question 44

State

Answer 44

JS variable, whenever its value is updated it triggers a rerender the application and a new value is displayed in the UI

Question 45

Rules when using hooks in React

Answer 45

hooks should not be called inside of functions, loops, if statements.
It should be called inside the component but above functions loops.
only in functional components

Question 46

What is a pure function?

Answer 46

A Pure Function is a function that always returns the same result if the same arguments are passed. It does not depend on any state or data change during a program’s execution. Rather, it only depends on its input arguments.

A pure function is a function that satisfies the following two conditions:
Given the same input, it always returns the same output.
Causes no side effects outside the function’s scope.

The side-effect is a function that modifies any data outside of its scope.

Question 47

What are hooks?

Answer 47

Hooks are a new feature added in React v16.8. It allows to use all React features without writing class components.
These are in-built functions that allow developers to use state and lifecycle methods within components in React

Question 48

UseRef

Answer 48

To get access to underlying DOM element

Question 49

What is a callback hell?

Answer 49

Callbacks are functions that can be passed as an argument to another function. The callback function can be called from the function to which it was passed (caller) after some event has happened. Used for asynchronous actions

Question 50

Features of JavaScript

Answer 50

It is a lightweight, interpreted programming language - does not require compilation. It can be added to HTML and when the page loads, scripts execute automatically
Executed inside user’s browsers
Event-driven: respond to events
Limitation: executes in a single thread. Browsers uses event loop to mimic concurrency
It was created with the intention to be used in browsers, and now it is also used on server side
After HTML and CSS, JS is the third biggest web technology
Supports OOP
It is an open and cross-platform language

Question 51

Is JavaScript a case-sensitive language?

Answer 51

Yes, JavaScript is a case sensitive language. The language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

Question 52

Advantages of using JavaScript

Answer 52

1. Javascript is executed on the client-side as well as server-side also. There are a variety of Frontend Frameworks that you may study and utilize. However, if you want to use JavaScript on the backend, you’ll need to learn NodeJS. It is currently the only JavaScript framework that may be used on the backend.
2. Javascript is a simple language to learn.
3. Web pages now have more functionality because of Javascript.
4. To the end-user, Javascript is quite quick

Question 53

String

Answer 53

It represents a series of characters and is written with quotes. A string can be represented using a single or a double quote.

Question 54

Number

Answer 54

It represents a number and can be written with or without decimals

Question 55

BigInt

Answer 55

This data type is used to store numbers which are above the limitation of the Number data type. It can store large integers and is represented by adding “n” to an integer literal

Question 56

Boolean

Answer 56

It represents a logical entity and can have only two values : true or false. Booleans are generally used for conditional testing

Question 57

Undefined

Answer 57

When a variable is declared but not assigned, it has the value of undefined and it’s type is also undefined

Question 58

Null

Answer 58

It represents a non-existent or a invalid value

Question 59

Symbol

Answer 59

It is a new data type introduced in the ES6 version of javascript. It is used to store an anonymous and unique value

Question 60

Scopes of a variable in JavaScript?

Answer 60

The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.
* Global Variables − A global variable has global scope which means it is visible everywhere in your JavaScript code.
* Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Question 61

What is the purpose of ‘This’ operator in JavaScript?

Answer 61

The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

n call(), apply() and, bind() methods

Question 62

Types of errors

Answer 62

1. Syntax error: Syntax errors are mistakes or spelling problems in the code that cause the program to not execute at all or to stop running halfway through. Error messages are usually supplied as well.
2. Logical error: Reasoning mistakes occur when the syntax is proper but the logic or program is incorrect. The application executes without problems in this case. However, the output findings are inaccurate. These are sometimes more difficult to correct than syntax issues since these applications do not display error signals for logic faults

Question 63

Memoization

Answer 63

Memoization is a form of caching where the return value of a function is cached based on its parameters. If the parameter of that function is not changed, the cached version of the function is returned

Question 64

Advantages of using External JavaScript

Answer 64

1. It allows web designers and developers to collaborate on HTML and javascript files.
2. We can reuse the code.
3. Code readability is simple in external javascript

Question 65

Currying

Answer 65

Currying is an advanced technique to transform a function with several arguments, to several functions with one or fewer arguments

Question 66

The variable naming conventions in JavaScript?

Answer 66

You should not use any of the JavaScript reserved keyword as variable name. For example, break or boolean variable names are not valid.
JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or the underscore character. For example, 123name is an invalid variable name but _123name or name123 is a valid one.
JavaScript variable names are case sensitive. For example, Test and test are two different variables.

Question 67

What is the difference between Attributes and Property?

Answer 67

Attributes - provide more details on an element like id, type, value etc.
Property - is the value assigned to the property like type=”text”, value=’Name’ etc.

Question 68

What is a Typed language?

Answer 68

Typed Language is in which the values are associated with values and not with variables. It is of two types:
Dynamically: in this, the variable can hold multiple types; like in JS a variable can take numbers, chars.
Statically: in this, the variable can hold only one type, like in Java a variable declared of string can take only a set of characters and nothing else.

Question 69

Recursion

Answer 69

Recursion is a technique to iterate over an operation by having a function call itself repeatedly until it arrives at a result

Question 70

Constructor function

Answer 70

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

Question 71

BOM

Answer 71

Browser Object Model is known as BOM. It allows users to interact with the browser. A browser’s initial object is a window. As a result, you may call all of the window’s functions directly or by referencing the window. The document, history, screen, navigator, location, and other attributes are available in the window object.

Question 72

Differences between declaring variables using var, let and const

Answer 72

The variables declared with the let keyword in the global scope behave just like the variable declared with the var keyword in the global scope.
Variables declared in the global scope with var and let keywords can be accessed from anywhere in the code.
But, there is one difference! Variables that are declared with the var keyword in the global scope are added to the window/global object. Therefore, they can be accessed using window.variableName.
Whereas, the variables declared with the let keyword are not added to the global object, therefore, trying to access such variables using window.variableName results in an error
Variables are declared in a functional/local scope using var and let keywords behave exactly the same, meaning, they cannot be accessed from outside of the scope
In javascript, a block means the code written inside the curly braces {}.
Variables declared with var keyword do not have block scope. It means a variable declared in block scope {} with the var keyword is the same as declaring the variable in the global scope.
Variables declared with let keyword inside the block scope cannot be accessed from outside of the block

Question 73

Rest parameter and spread operator

Answer 73

Both rest parameter and spread operator were introduced in the ES6 version of javascript.
Rest parameter ( … ):
It provides an improved way of handling the parameters of a function.
Using the rest parameter syntax, we can create functions that can take a variable number of arguments.
Any number of arguments will be converted into an array using the rest parameter.
It also helps in extracting all or some parts of the arguments.
Rest parameters can be used by applying three dots (…) before the parameters
Spread operator (…):
Although the syntax of the spread operator is exactly the same as the rest parameter, the spread operator is used to spreading an array, and object literals. We also use spread operators where one or more arguments are expected in a function call

Question 74

Generator

Answer 74

Introduced in the ES6 version, generator functions are a special class of functions. They can be stopped midway and then continue from where they had stopped. Generator functions are declared with the function* keyword instead of the normal function keyword
In normal functions, we use the return keyword to return a value and as soon as the return statement gets executed, the function execution stops
In the case of generator functions, when called, they do not execute the code, instead, they return a generator object
The generator object consists of a method called next(), this method when called, executes the code until the nearest yield statement, and returns the yield value
As one can see the next method returns an object consisting of a value and done properties. Value property represents the yielded value. Done property tells us whether the function code is finished or not. (Returns true if finished)

Question 75

Classes

Answer 75

Introduced in the ES6 version, classes are nothing but syntactic sugars for constructor functions. They provide a new way of declaring constructor functions in javascript.
Key points to remember about classes:
Unlike functions, classes are not hoisted.
A class cannot be used before it is declared. A class can inherit properties and methods from other classes by using the extend keyword.
All the syntaxes inside the class must follow the strict mode(‘use strict’) of javascript. An error will be thrown if the strict mode rules are not followed

Question 76

Set

Answer 76

is a collection of unique and ordered elements

Question 77

WeakSet

Answer 77

Set is a collection of unique and ordered elements.
Just like Set, WeakSet is also a collection of unique and ordered elements with some key differences:
Weakset contains only objects and no other type.
An object inside the weakset is referenced weakly. This means, that if the object inside the weakset does not have a reference, it will be garbage collected.
Unlike Set, WeakSet only has three methods, add() , delete() and has()

Question 78

WeakMap

Answer 78

Map is used to store key-value pairs. The key-value pairs can be of both primitive and non-primitive types.
WeakMap is similar to Map with key differences:
The keys and values in weakmap should always be an object.
If there are no references to the object, the object will be garbage collected

Question 79

Object Destructuring

Answer 79

Object destructuring is a new way to extract elements from an object or an array
To extract all the elements inside an object in one line of code

Question 80

Temporal Dead Zone

Answer 80

Temporal Dead Zone is a behavior that occurs with variables declared using let and const keywords. It is a behavior where we try to access a variable before it is initialized

Question 81

Arrow functions

Answer 81

Arrow functions were introduced in the ES6 version of javascript. They provide us with a new and shorter syntax for declaring functions. Arrow functions can only be used as a function expression
Arrow functions are declared without the function keyword. If there is only one returning expression then we don’t need to use the return keyword as well in an arrow function as shown in the example above. Also, for functions having just one line of code, curly braces { } can be omitted
If the function takes in only one argument, then the parenthesis () around the parameter can be omitted
In the arrow functions, there is no binding of this keyword. This keyword inside an arrow function does not refer to the object calling it. It rather inherits its value from the parent scope

Question 82

What is the difference between Local storage & Session storage?

Answer 82

Local Storage – The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) – reducing the amount of traffic between client and server. It will stay until it is manually cleared through settings or program.
Session Storage – It is similar to local storage; the only difference is while data stored in local storage has no expiration time, data stored in session storage gets cleared when the page session ends. Session Storage will leave when the browser is closed.
In case you are facing any challenges with these JavaScript Interview Questions, please comment on your problems in the section below.

Question 83

What is the difference between null & undefined?

Answer 83

Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

Question 84

What is the difference between undeclared & undefined?

Answer 84

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered. Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

Question 85

Deferred scripts

Answer 85

The processing of HTML code while the page loads are disabled by nature till the script hasn’t halted. Your page will be affected if your network is a bit slow, or if the script is very hey. When you use Deferred, the script waits for the HTML parser to finish before executing it. This reduces the time it takes for web pages to load, allowing them to appear more quickly

Question 86

What is the difference between window & document in JavaScript?

Answer 86

JavaScript window is a global object which holds variables, functions, history, location.

The document also comes under the window and can be considered as the property of the window.

Question 87

What is the difference between innerHTML & innerText?

Answer 87

innerHTML – It will process an HTML tag if found in a string
innerText – It will not process an HTML tag if found in a string

Question 88

What is an event bubbling in JavaScript?

Answer 88

Event bubbling is a way of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. The execution starts from that event and goes to its parent element. Then the execution passes to its parent element and so on till the body element.

Question 89

What is NaN in JavaScript?

Answer 89

NaN is a short form of Not a Number. Since NaN always compares unequal to any number, including NaN, it is usually used to indicate an error condition for a function that should return a valid number. When a string or something else is being converted into a number and that cannot be done, then we get to see NaN.
In case you are facing any challenges with these JavaScript Interview Questions, please comment on your problems in the section below.

Question 90

How do JavaScript primitive/object types passed in functions?

Answer 90

One of the differences between the two is that Primitive Data Types are passed By Value and Objects are passed By Reference.
By Value means creating a COPY of the original. Picture it like twins: they are born exactly the same, but the first twin doesn’t lose a leg when the second twin loses his in the war.
By Reference means creating an ALIAS to the original. When your Mom calls you “Pumpkin Pie” although your name is Margaret, this doesn’t suddenly give birth to a clone of yourself: you are still one, but you can be called by these two very different names.

Question 91

How can you convert the string of any base to integer in JavaScript?

Answer 91

The parseInt() function is used to convert numbers between different bases. It takes the string to be converted as its first parameter, and the second parameter is the base of the given string.

Question 92

What are Exports & Imports?

Answer 92

Imports and exports help us to write modular JavaScript code. Using Imports and exports we can split our code into multiple files.

Question 93

What is the ‘Strict’ mode in JavaScript and how can it be enabled?

Answer 93

Strict mode is a way to introduce better error-checking into your code.
When you use strict mode, you cannot use implicitly declared variables, or assign a value to a read-only property, or add a property to an object that is not extensible.
You can enable strict mode by adding “use strict” at the beginning of a file, a program, or a function.

Question 94

Git

Answer 94

A version control system is a system that keeps track of all changes made to a file so that a specific version can be reverted if necessary
this ensures that everyone in the team is working on the most recent version of the file

Git push is used to push the local repository content to a remote repository
After a local repository has been modified a push is executed to share the modification with remote team members

Question 95

Scope

Answer 95

Global Scope
Variables or functions declared in the global namespace have global scope, which means all the variables and functions having global scope can be accessed from anywhere inside the code

Function Scope
Any variables or functions declared inside a function have local/function scope, which means that all the variables and functions declared inside a function, can be accessed from within the function and not outside of it

Block Scope
Block scope is related to the variables declared using let and const. Variables declared with var do not have block scope. Block scope tells us that any variable declared inside a block { }, can be accessed only inside that block and cannot be accessed outside of it.

Question 96

Event Delegation

Answer 96

providing event listener to parent and access the child element with the help of this event

Question 97

Debugger

Answer 97

The debugger for the browser must be activated in order to debug the code. Built-in debuggers may be switched on and off. The remaining section of the code should stop execution before moving on to the next line while debugging

Question 98

Difference between ‘var’ and ‘let’ keywords

Answer 98

var is in JS since the beginning
var has function scope - it does not respect other blocks
var gets hoisted to top of scope - namely its definition is hoisted, not value

let was introduced in ES6
let has block scope - available only within block

Question 99

Difference between null and undefined

Answer 99

null is actual value
undefined - when a variable is declared but not initialized

Question 100

Implicit Type Coercion

Answer 100

Implicit type coercion in javascript is the automatic conversion of value from one data type to another. It takes place when the operands of an expression are of different data types

String coercion
String coercion takes place when using ‘ + ‘ operator. When a number is added to a string, the number type is always converted to the string type

while using ‘ - ‘ operator is that, a string is converted to a number and then subtraction takes place

Boolean Coercion
Boolean coercion takes place when using logical operators, ternary operators, if statements, and loop checks. To understand boolean coercion in if statements and operators, we need to understand truthy and falsy values
All values except false, 0, 0n, -0, “”, null, undefined, and NaN are truthy values

Equality Coercion
Equality coercion takes place when using ‘ == ‘ operator
The ‘==’ operator, converts both the operands to the same type and then compares them

Question 101

Logical operators

Answer 101

Logical operators in javascript, unlike operators in other programming languages, do not return true or false. They always return one of the operands.
OR ( | | ) operator - If the first value is truthy, then the first value is returned. Otherwise, always the second value 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

Question 102

JS is dynamically typed language

Answer 102

JavaScript is a dynamically typed language. In a dynamically typed language, the type of a variable is checked during run-time in contrast to a statically typed language, where the type of a variable is checked during compile-time

Question 103

What is NaN property

Answer 103

NaN property represents the “Not-a-Number” value. It indicates a value that is not a legal number. typeof of NaN will return a Number. To check if a value is NaN, we use the isNaN() function
isNaN() function converts the given value to a Number type, and then equates to NaN

Question 104

Immediately Invoked Function

Answer 104

An Immediately Invoked Function ( known as IIFE and pronounced as IIFY) is a function that runs as soon as it is defined
To understand IIFE, we need to understand the two sets of parentheses that are added while creating an IIFE
W add the first set of parenthesis that tells the compiler that the function is not a function declaration, instead, it’s a function expression
The second set of parenthesis invokes the function

Question 105

Strict mode

Answer 105

1. Duplicate arguments are not allowed by developers.
2. In strict mode, you won’t be able to use the JavaScript keyword as a parameter or function name.
3. The ‘use strict’ keyword is used to define strict mode at the start of the script. Strict mode is supported by all browsers.
4. Engineers will not be allowed to create global variables in ‘Strict Mode

Question 106

Higher Order Functions

Answer 106

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions

Question 107

Prototypes

Answer 107

All javascript objects inherit properties from a prototype. For example,
Date objects inherit properties from the Date prototype
Math objects inherit properties from the Math prototype
Array objects inherit properties from the Array prototype.
On top of the chain is Object.prototype. Every prototype inherits properties and methods from the Object.prototype. A prototype is a blueprint of an object. The prototype allows us to use properties and methods on an object even if the properties and methods do not exist on the current object

Question 108

SOLID

Answer 108

Helps to write better code
Avoid duplicate code
Easy to maintain
Easy to understand
Flexible software
Reduce complexity

Single Responsibility Principle
A Class should have one and one reason to change

Open/Closed Principle
Software entities should be open for extension but closed for modification

Liskov substitution principle
Subtypes must be substitutable for their base types

Interface Segregation Principle
Keep the interfaces as small as possible.
The dependency of class to another one should depend on the smallest possible interface

Dependency Inversion Principle
Depend upon abstractions (interfaces) not upon concrete classes

Question 109

JavaScript

Answer 109

The primary programming language of the web, primarily used for adding functionality to websites. JavaScript is a general purpose multi-paradigm programming language with dynamic typing. Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript Paradigm A style of programming. Oftentimes languages are built with a specific paradigm in mind, but JavaScript is known as a multi-paradigm language, because it allows for programming in a variety of paradigms. Some of the major paradigms of JavaScript include:

Event-driven: Functions can be made to respond to events, such as when a user clicks on an element or scrolls down the page.

Functional: Functions can be written as “pure functions”, meaning functions that always have the same output for a given set of arguments and never produce side effects. Additionally, JavaScript supports first-class functions and higher-order functions. This means that functions can be treated as normal values, passed as arguments to other functions and returned from functions.

Object-oriented: Objects can be created as custom data stores and they can be made to inherit from each other.

Imperative: Programs can be written by explicitly describing the control flow, such as with loops and conditionals.

Declarative: Programs can be written by describing the desired output with implicit control flow. Oftentimes this is associated with functional programming (e.g. using the forEach function to loop over an array instead of a for loop).

Question 110

React

Answer 110

A JavaScript library developed by Facebook for building user interfaces. React uses a component-based architecture to create interfaces with an intuitive declarative approach.

Component : A reusable independent piece of a user interface. In modern React, components are usually functional components, which are simply functions that return JSX.

JSX : Short for JavaScript XML, a JavaScript syntax extension for inlining XML and HTML in JavaScript.

ReactDOM : A package used with React to work as the bridge between React elements and the actual DOM in the browser. The most frequently used ReactDOM function is the render function, which adds a component to the DOM.