ction 1: General Javascript Questions
1. Change the name from ‘Rajan’ to ‘Piyush’ of the object given below. (To test the
knowledge of constant object and object destructuring
let person = [Link]({
name: "Rajan",
age: 30,
});
Solution: [Link] method creates a constant object and the properties of the
object cannot be changed directly. Destructuring of object creates a new object whose
properties can be change
//first destructure the object
person = { ...person };
[Link] = "Piyush";
[Link]([Link])
2. Predict the output for the following console statement. (Test the knowledge of equality
operator in javascript weak (==) vs strict (===) equality, also that ‘null’ in javascript is an
object)
[Link](null == undefined);
[Link](null === undefined);
Solution
a. true
b. false
Explanation: Strict equality (===) operator checks for both type and value of the variable
being compared. The type of ‘null’ in javascript is object while type of ‘undefined’ is
‘undefined’. (===) operator doesn’t do implicit type conversion while (==) operator does
an implicit type conversion to a common type before comparing the type of both null and
undefined is converted to undefined.
3. Predict the output of the following. (Test the knowledge of filter and map function of
javascript)
let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let b = [];
b = [Link]((item) => {
if (item % 2 === 0) {
return item;
}
});
[Link]([Link]);
b = [Link]((item) => {
if (item % 2 === 0) {
return item;
}
});
[Link]([Link]);
Solution:
a. 5
b. 10
Explanation
a. The output of the filter is
[ 2, 4, 6, 8, 10 ]
b. The output of the map is
[
undefined, 2,
undefined, 4,
undefined, 6,
undefined, 8,
undefined, 10
]
4. Predict the output of the following. (Test the knowledge of anonymous function)
let p = {
name: "Ram",
printName1: function () {
[Link](`Hello my name is ${[Link]}`);
},
printName2: () => {
[Link](`Hello my name is ${[Link]}`);
},
};
p.printName1();
p.printName2();
Solution:
a. Hello my name is Ram
b. Hello my name is undefined
Explanation: `this` in javascript refers to the current object. Anonymous function doesn't access
the `this` keyword because there is no `this` binding.
5. Predict the output. (Testing knowledge on let and var keyword and hoisting)
for (var i = 0; i < 5; i++) {
setTimeout(() => {
[Link](i);
}, 1000);
}
for (let i = 0; i < 5; i++) {
setTimeout(() => {
[Link](i);
}, 1000);
}
Solution:
1st `for loop` will print 5, 5 times after 1 second
2nd `for loop` will print 0,1,2,3,4 times after 1 second
Explanation: `var` is function scoped while `let` is block scoped
Section 2: NodeJS Questions
1. Predict the output of the following (Test the knowledge of promise data flow)
[Link](2)
.then((v) => {
[Link](v);
return v * 2;
})
.then((v) => {
[Link](v);
return v * 4;
})
.then((v) => {
[Link](v);
return v * 8;
})
.finally((v) => {
[Link](v);
return v * 16;
})
.then((v) => {
[Link](v);
});
Solution:
2
4
16
undefined
128
2. Predict the output (Test the knowledge of nodejs event loop)
setTimeout(() => [Link](`A`), 0);
[Link](`B`).then([Link]);
[Link](`C`);
[Link](() => {
[Link](`D`);
});
[Link](`E`);
[Link](`F`).then([Link]);
Solution:
C
E
D
B
F
A
3. Write a for loop to print value 0 to 4 each with a 1 second delay. Eg. Print 0, then after 1
second print 1, after 1 second print 2 etc. (Test the knowledge of promise)
Solution (one of the many possible solutions)
const looper = async () => {
for (let i = 0; i < 5; i++) {
let p = new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});
await p;
[Link](i);
}
};
looper();
4. What are [Link] streams?
Solutions:
Streams are instances of EventEmitter which can be used to work with streaming
data in [Link]. They can be used for handling and manipulating streaming large
files(videos, mp3, etc) over the network. They use buffers as their temporary
storage.
There are mainly four types of the stream:
● Writable: streams to which data can be written (for example,
[Link]()).
● Readable: streams from which data can be read (for example,
[Link]()).
● Duplex: streams that are both Readable and Writable (for example,
[Link]).
● Transform: Duplex streams that can modify or transform the data as it is
written and read (for example, [Link]()).
5. What is middleware?
Solutions:
Middleware comes in between your request and business logic. It is mainly used
to capture logs and enable rate limit, routing, authentication, basically whatever
that is not a part of business logic. There are third-party middleware also such as
body-parser and you can write your own middleware for a specific use case.
Section 3: ReactJS Questions
For react oral questions please refer to the following website. It has very good set of oral
questions for react
[Link]
1)Explain Virtual DOM in React?
Sites built with vanilla JavaScript directly update the Real DOM. It is fine for
smaller websites, but as your website grows complex, it slows down the website. This happens
because the browser engine has to traverse all nodes even if you update only one node.
Even Angular updates or work on Real DOM. ReactJS doesn’t update the Real
DOM directly but has a concept of Virtual DOM. This causes a great performance benefit for
ReactJS and so it’s faster than vanilla JavaScript apps and also Angular apps.
- Virtual DOM is actually an in-memory representation of Real DOM. It is a
lightweight JavaScript Object which is a copy of Real DOM.
- Whenever the setState() method is called in your code, ReactJS creates the
whole Virtual DOM from scratch.
- At a given time, ReactJS maintains two virtual DOM, one with the updated state
Virtual DOM and the other with the previous state Virtual DOM.
- ReactJS uses a differential algorithm to compare both of the Virtual DOM to find
the minimum number of steps to update the Real DOM.
After that, it updates the Real DOM, whenever it’s best to update it.
2) What all ways data can be passed between react components
Parent to child – props, context
Child to parent – states, callbacks
Siblings – callback, props, context
Stores like Redux can also be used
3) Explain Various react hooks:
-useState : It is the most important and often used hook. The purpose of this
hook is to handle reactive data, any data that changes in the application is called state, when
any of the data changes, React re-renders the UI.
-useEffect : It allows us to implement all of the lifecycle hooks from within a single
function API.
-useContext : This hook allows us to work with React's Context API, which itself
is a mechanism to allow us to share data within its component tree without passing through
props. It basically removes prop-drilling
- useRef : This hook allows us to create a mutable object. It is used when the
value keeps changes like in the case of useState hook, but the difference is, it doesn't trigger a
re-render when the value [Link] common use case of this, is to grab HTML elements
from the DOM.
-useReducer :It is very similar to setState. It's a different way to manage state
using Redux Pattern. Instead of updating the state directly, we dispatch actions that go to a
reducer function, and this function figures out how to compute the next state.
-useMemo : This hook will help you to optimize computational cost or improve
performance. It is mostly used when we're needed to make expensive calculations.
4) What is MVC and where does React stand in it?
MVC or Model-View-Controller is a software design pattern mainly used in Web
development for creating complex web-apps. This architecture comes from the traditional flow
of web-application:
- View: Displays visualization of data to the user. It is mainly the UI which the
user interacts with.
- Controller: It processes server-side logic and is a middleware between View
and Model.
- Model: It mainly processes data from or to the database. It is only connected to
the database.
Now, React is considered as the View layer in the MVC model, as it is mainly
used to create the [Link] use Controller and Model logic in React, we use third party libraries like
flux and Redux with it.
5) What are Axios Interceptors?
-Axios interceptors are the default configurations that are added automatically to
every request or response that a user receives. It is useful to check response status code for
every response that is being received and also to send headers like authtoken etc for every call
in a centralized location.
6) Is JavaScript “pass-by-reference” or “pass-by-value”
The primitive types (number, string, etc.) are passed by value, but objects are
unknown, because they can be both passed-by-value (in case we consider that a variable
holding an object is in fact a reference to the object) and passed-by-reference (when we
consider that the variable to the object holds the object itself).
Objects can be treated as pass by Reference.
7) Are the calls from javascript sync or Async
- Calls from Javascript are async
8) How can we make the calls Synchronous (followup questions for number 6)
- Callbacks
- Promises
- Async await.
10) Is node js Single threaded or MultiThreaded
- Node js is Single Threaded
11) follow up Question Whys is node js single threaded
-[Link] is single-threaded for async processing. By doing async processing on
a single-thread under typical web loads, more performance and scalability can be achieved
instead of the typical thread-based implementation.
12) What are streams in [Link]?
Streams are objects that enable you to read data or write data continuously.
There are four types of streams:
Readable – Used for reading operations
Writable − Used for write operations
Duplex − Can be used for both reading and write operations
Transform − A type of duplex stream where the output is
computed based on input
13) Explain Arrow functions in Javascript?
An arrow function is a concise and short way to write function expressions in Es6
or above.A row functions cannot be used as constructors and also does not support this,
arguments, super, or [Link] keywords. It is best suited for non-method functions. In general
an arrow function looks like const function_name= ()=>{}
const greet=()=>{[Link]('hello');}
greet();
14) What is the difference between deep and shallow object copy in JavaScript?
Some differences are:
-Deep copy means copies all values or properties recursively in the new
object whereas shallow copy copies only the reference.
-In a deep copy, changes in the new object don't show in the original
object whereas, in shallow copy, changes in new objects will reflect in the original object.
-In a deep copy, original objects do not share the same properties with
new objects whereas, in shallow copy, they do.
15) Explain the spread operator in JavaScript?
The spread operator expands an expression in places where multiple
arguments/variables/elements are needed to present. It is represented with three dots (…).
For example:
var mid = [3, 4];
var newarray = [1, 2, ...mid, 5, 6];
[Link](newarray);
// [1, 2, 3, 4, 5, 6]
In the above example, instead of appending a mid array, it rather expands in the
newarray with the help of spread operator. This is how the spread operator works in JavaScript.