Curated by Amod Shinde

www.amodshinde.com
 Table of Contents
1. JavaScript Basics
1.1. What are the different data types in JavaScript?
1.2. How can we check the data types of JavaScript variables?
1.3. What is the difference between ‘==’ and ‘===’ in
JavaScript?
1.4. What is the output of the following?
1.5. Explain implicit type coercion in JavaScript.
1.6. Explain NaN in JavaScript.
1.7. What is the data type of NaN?
1.8. What is JSON?
1.9. How do you convert JSON data to a string and vice versa?
1.10. Explain splice() and slice() methods in JavaScript and list
their differences.
1.11. Is JavaScript a statically typed language or a dynamically
typed language?
1.12. Explain Higher Order Functions in JavaScript.
1.13. What are immediately Invoked Functions in JavaScript?
1.14. What are the possible ways to create objects in JavaScript?
1.15. What is a prototype chain?
1.16. What is the difference between Call, Apply, and Bind?
1.17. What is the difference between slice and splice?
1.18. What is a first-order function?
1.19. What is a unary function?
1.20. What is the currying function?
1.21. What is the difference between let and var?
1.22. What is the Temporal Dead Zone?
1.23. What is the benefit of using modules?
1.24. What is memoization?
1.25. What is Hoisting?
1.26. What are classes in ES6?
1.27. What are closures?
1.28. What is scope in JavaScript?
1.29. What is a service worker?
1.30. How do you manipulate DOM using a service worker?
1.31. How do you reuse information across service worker
restarts?
1.32. What is IndexedDB?
1.33. What is web storage?
1.34. What is a Cookie?
1.35. Why do you need a Cookie?
1.36. What are the config options in a cookie?
1.37. How do you delete a cookie?
1.38. What are the differences between a cookie, local storage,
and session storage?
1.39. What is the main difference between localStorage and
sessionStorage?
1.40. What are the methods available on session storage?
1.41. What is a storage event and its event handler?
1.42. Why do you need web storage?
1.43. How do you check web storage browser support?
1.44. How do you check web workers browser support?
1.45. What are the restrictions of web workers on DOM?
1.46. What is a promise?
1.47. Why do you need a promise?
1.48. What are the three states of a promise?
1.49. What is a callback function?
1.50. Why do we need callbacks?
1.51. What is a callback hell?
1.52. What are server-sent events?
1.53. How do you receive server-sent event notifications?
1.54. How do you check browser support for server-sent events?
1.55. What are the events available for server-sent events?
1.56. What are the main rules of a promise?
1.57. What is a callback in a callback?
1.58. What is promise chaining?
1.59. What is promise.all?
1.60. What is the purpose of the race method in promise?
1.61. What is strict mode in JavaScript?
1.62. Why do you need strict mode?
1.63. How do you declare strict mode?
1.64. What is the purpose of double exclamation?
1.65. What is the purpose of the delete operator?
1.66. What is the typeof operator?
1.67. What is an undefined property?
1.68. What is a null value?
1.69. What is the difference between null and undefined?
1.70. What is eval?
1.71. What is the difference between window and document?
1.72. How do you access history in JavaScript?
1.73. How do you detect caps lock key turned on or not?
 1.74. What are the differences between undeclared and
undefined variables?
1.75. What are the problems with global variables?
1.76. What is the purpose of the isFinite function?
1.77. What is an event flow?
1.78. What is event bubbling?
1.79. What is event capturing?
1.80. How do you submit a form using JavaScript?
1.81. How do you find operating system details?
1.82. What is the difference between document load and
DOMContentLoaded events?
1.83. What is the difference between native, host, and user
objects?
1.84. What are the tools or techniques used for debugging
JavaScript code?
1.85. What are the pros and cons of promises over callbacks?
1.86. What is the difference between an attribute and a property?
1.87. What is the same-origin policy?
1.88. What is the purpose of void 0?
1.89. Is JavaScript a compiled or interpreted language?
1.90. Is there any relation between Java and JavaScript?
1.91. What are events?
1.92. What is the use of preventDefault method?
1.93. What is the use of stopPropagation method?
1.94. What are the steps involved in return false usage?
1.95. What is BOM?
1.96. What is the use of setTimeout?
1.97. What is the use of setInterval?
1.98. Why is JavaScript treated as Single-threaded?
1.99. What are the syntax rules of JSON?
1.100. What are PWAs (Progressive Web Apps)?
1.101. What is the purpose of clearTimeout method?
1.102. What is the purpose of clearInterval method?
1.103. How do you redirect a new page in JavaScript?
1.104. How do you check whether a string contains a substring?
1.105. How do you get the current URL with JavaScript?
1.106. What are the various URL properties of the location object?
1.107. How do you get query string values in JavaScript?
1.108. How do you check if a key exists in an object?
1.109. How do you loop through or enumerate a JavaScript
object?
1.110. How do you test for an empty object?
1.111. What is an arguments object?
1.112. What are the pros and cons of the for loop?
1.113. How do you display the current date in JavaScript?
1.114. How do you compare two date objects?
1.115. How do you check if a string starts with another string?
1.116. How do you trim a string in JavaScript?
1.117. How do you add a key-value pair in JavaScript?
1.118. Explain arrays in JavaScript?
1.119. Is there any way to force using strict mode in Node.js?
1.120. Why would you use something like the load event?
1.121. Does this event have disadvantages?
1.122. Do you know any alternatives, and why would you use
those?
1.123. What's the difference between Host objects and Native
objects?
1.124. What does "use strict" do?
1.125. What is a Polyfill?
1.126. What are escape characters in JavaScript?
1.127. What are some advantages of using JavaScript?
1.128. Explain ceil() method in JavaScript.
1.129. Explain concat() method in JavaScript.
1.130. Explain constructor() method in JavaScript.
1.131. Explain Date() method in JavaScript.
1.132. Explain Date.parse() method in JavaScript.
1.133. Explain exec() method in JavaScript.
1.134. Explain filter() method in JavaScript.
1.135. Explain localeCompare() method in JavaScript.
1.136. Explain match() method in JavaScript.
1.137. Explain pop() method in JavaScript.
1.138. Explain reduce() method in JavaScript.
1.139. Explain some() method in JavaScript.
1.140. Explain toLocaleString() method in JavaScript.
1.141. Explain toUpperCase() method in JavaScript.
1.142. Explain valueOf() method in JavaScript.
1.143. How can you convert a string to Number using unary plus?
1.144. Explain various types of error constructors supported by
JavaScript.
1.145. Explain the difference between function declaration and
function expression.
1.146. What will be the output of the JS code below? Please
explain.
1.147. What do you understand by Closures in JavaScript?
1.148. What do you mean by Event Bubbling and Event
Capturing?
1.149. How can you iterate an object?
1.150. Could you explain escape() and unescape() functions?
1.151. What are Generator functions?
1.152. What is prototypal Inheritance?
1.153. Explain sort() method.
1.154. Explain reverse() method.
1.155. Answer if the following expressions result in true or false.
1.156. What is the syntax of ‘Self-Invoking Function’?
1.157. What is an Iterator?
1.158. How does synchronous iteration work?
1.159. What is an event loop?
1.160. What is the call stack?
1.161. What is a Unary operator?
1.162. What is a decorator?
1.163. What is the purpose of compareFunction while sorting?
1.164. How do you find the min and max value in an array?
1.165. What is an empty statement, and what is the purpose of it?
1.166. How do you get metadata of a module?
1.167. What is a comma operator?
1.168. What is the advantage of a comma operator?
1.169. What is TypeScript?
1.170. What are the differences between JavaScript and
TypeScript?
1.171. What are the advantages of TypeScript over JavaScript?
1.172. What is an object initializer?
1.173. What is a constructor method?
1.174. What happens if you write a constructor more than once in
a class?
1.175. How do you call the constructor of a parent class?
1.176. How do you get the prototype of an object?
1.177. What happens if I pass a string type for getPrototype
method?
1.178. How do you set the prototype of one object to another?
1.179. How do you check whether an object can be extendable or
not?
1.180. How do you prevent an object from extending?
1.181. What are the different ways to make an object
non-extensible?
1.182. How do you define multiple properties on an object?
1.183. What is MEAN in JavaScript?
1.184. What Is Obfuscation in JavaScript?
1.185. Why do you need Obfuscation?
1.186. What is Minification?
1.187. What are the advantages of minification?
1.188. What are the differences between Obfuscation and
Encryption?
1.189. What are the common tools used for minification?
1.190. How do you perform form validation using JavaScript?
1.191. How do you perform form validation without JavaScript?
1.192. What are the DOM methods available for constraint
validation?
1.193. What are the available constraint validation DOM
properties?
1.194. What are the list of validity properties?
1.195. Give an example usage of rangeOverflow property.
1.196. Is enums feature available in JavaScript?
1.197. What is an enum?
1.198. How do you list all properties of an object?
1.199. How do you get property descriptors of an object?
1.200. What are the attributes provided by a property descriptor?
1.201. How do you extend classes?
1.202. How do I modify the URL without reloading the page?
1.203. How do you check whether an array includes a particular
value or not?
1.204. How do you compare scalar arrays?
1.205. How to get the value from get parameters?
1.206. How do you print numbers with commas as thousand
separators?
1.207. What is the difference between Java and JavaScript?
1.208. Does JavaScript support namespaces?
1.209. How do you declare namespaces?
1.210. How do you invoke JavaScript code in an iframe from the
parent page?
1.211. How do you get the timezone offset from a date?
1.212. How do you load CSS and JS files dynamically?
1.213. What are the different methods to find HTML elements in
DOM?
1.214. What is jQuery?
1.215. What is the V8 JavaScript engine?
1.216. Why do we call JavaScript a dynamic language?
1.217. What is a void operator?
1.218. How to set the cursor to wait?
1.219. How do you create an infinite loop?
1.220. What is the output of the below for loops?
1.221. List down some of the features of ES6.
1.222. What is ES6?
1.223. Can I redeclare let and const variables?
1.224. Does a const variable make the value immutable?
1.225. What are default parameters?
1.226. What are template literals?
1.227. How do you write multi-line strings in template literals?
1.228. What are nesting templates?
1.229. What are tagged templates?
1.230. What are raw strings?
1.231. What is destructuring assignment?
1.232. What are default values in destructuring assignment?
1.233. How do you swap variables in destructuring assignment?
1.234. What are enhanced object literals?
1.235. What are dynamic imports?
1.236. What are the use cases for dynamic imports?
1.237. What are typed arrays?
1.238. What is a freeze method?
1.239. What is the purpose of the freeze method?
1.240. Why do I need to use the freeze method?
1.241. How do you detect a browser language preference?
1.242. How to convert a string to title case with JavaScript?
1.243. How do you detect JavaScript disabled in the page?
1.244. What are various operators supported by JavaScript?
1.245. What is a rest parameter?
1.246. What happens if you do not use the rest parameter as the
last argument?
1.247. What are the bitwise operators available in JavaScript?
1.248. What is a spread operator?
1.249. How do you determine whether an object is frozen or not?
1.250. How do you determine two values are the same or not
using an object?
1.251. What is the purpose of using the object.is method?
1.252. How do you copy properties from one object to another?
1.253. What are the applications of the assign method?
1.254. What is a proxy object?
1.255. What is the purpose of the seal method?
1.256. What are the applications of the seal method?
1.257. What are the differences between freeze and seal
methods?
1.258. How do you determine if an object is sealed or not?
1.259. How do you get enumerable key and value pairs?
1.260. What is the main difference between Object.values and
Object.entries method?
1.261. How can you get the list of keys of any object?
1.262. What is a WeakSet?
1.263. What are the differences between WeakSet and Set?
1.264. List down the collection of methods available on WeakSet.
1.265. What is a WeakMap?
1.266. What are the differences between WeakMap and Map?
1.267. List down the collection of methods available on WeakMap.
1.268. What is the purpose of uneval?
1.269. How do you encode a URL?
1.270. How do you decode a URL?
1.271. How do you print the contents of a web page?
1.272. What is the difference between uneval and eval?
1.273. What is an anonymous function?
1.274. What is the precedence order between local and global
variables?
1.275. What are JavaScript accessors?
1.276. How do you define a property on the Object constructor?
1.277. What is the difference between get and defineProperty?
1.278. What are the advantages of Getters and Setters?
1.279. Can I add getters and setters using defineProperty
method?
1.280. What is the purpose of the switch-case?
1.281. What are the conventions to be followed for the usage of
switch case?
1.282. What are all the types of Pop up boxes available in
JavaScript?
1.283. What is the difference between an alert box and a
confirmation box?
1.284. What are escape characters?
1.285. What are the disadvantages of using innerHTML in
JavaScript?
1.286. What is break and continue statements?
1.287. Which keywords are used to handle exceptions?
1.288. What is the use of the blur function?
1.289. What is the unshift method in JavaScript?
1.290. What is the way to get the status of a CheckBox?
1.291. What is a window.onload and onDocumentReady?
1.292. How can a particular frame be targeted from a hyperlink in
JavaScript?
1.293. How are DOM utilized in JavaScript?
1.294. What is the role of deferred scripts in JavaScript?
1.295. What are Screen objects?
1.296. How to use
1.297.
1.298. Loops in JavaScript?
1.299. What are the important JavaScript Array Methods explained
with examples?
1.300. What is JavaScript Unit Testing, and what are the
challenges in JavaScript Unit Testing?
1.301. What are some important JavaScript Unit Testing
Frameworks?
1.302. What is a potential pitfall with using typeof bar === "object"
to determine if bar is an object? How can this pitfall be
avoided?
1.303. What will the code below output to the console and why?
1.304. What is the significance of, and reason for, wrapping the
entire content of a JavaScript source file in a function
block?
1.305. What is the significance, and what are the benefits, of
including 'use strict' at the beginning of a JavaScript source
file?
1.306. Consider the two functions below. Will they both return the
same thing? Why or why not?
1.307. What will the code below output? Explain your answer.
1.308. In what order will the numbers 1-4 be logged to the console
when the code below is executed? Why?
1.309. Write a sum method that will work properly when invoked
using either syntax below.
1.310. Discuss possible ways to write a function isInteger(x) that
determines if x is an integer.
1.311. What will the following code output and why?
1.312. What would the following code return?
1.313. Imagine you have this code:
1.314. How do you add an element at the beginning of an array?
How do you add one at the end?
1.315. What are the various statements in error handling?
1.316. What are the two types of loops in JavaScript?
1.317. What is Node.js?
1.318. What is an Intl object?
1.319. How do you perform language-specific date and time
formatting?
1.320. Is it possible to add CSS to console messages?
1.321. What is the purpose of the dir method of the console
object?
1.322. Is it possible to debug HTML elements in the console?
1.323. How do you display data in a tabular format using the
console object?
1.324. What is the shortcut to get a timestamp?
1.325. How do you flatten multi-dimensional arrays?
1.326. What is the easiest multi-condition checking?
1.327. How do you capture the browser back button?
1.328. How do you disable right-click in the web page?
1.329. What are wrapper objects?
1.330. What are the different ways to deal with Asynchronous
Code?
1.331. How to cancel a fetch request?
1.332. What is web speech API?
1.333. What is minimum timeout throttling?
1.334. How do you implement zero timeout in modern browsers?
1.335. What are tasks in the event loop?
1.336. What is a microtask?
1.337. What are the differences between promises and
observables?
1.338. What is heap?
1.339. What is an event table?
1.340. What is a microTask queue?
1.341. What is the difference between shim and polyfill?
1.342. How do you detect primitive or non-primitive value types?
1.343. What is Babel?
1.344. Is Node.js completely single-threaded?
1.345. What are the common use cases of observables?
1.346. What is RxJS?
1.347. What is the difference between Function constructor and
function declaration?
1.348. What is a Short circuit condition?
1.349. What is the easiest way to resize an array?
1.350. What is an observable?
1.351. What is the difference between function and class
declarations?
1.352. What is an async function?
1.353. How do you prevent promises from swallowing errors?
1.354. What are the differences between the spread operator and
rest parameter?
1.355. What are the different kinds of generators?
1.356. What are the built-in iterables?
1.357. What are the differences between for...of and for...in
statements?
1.358. How do you define instance and non-instance properties?
1.359. What is the difference between isNaN and Number.isNaN?
1.360. What is the easiest way to ignore promise errors?
What are the different data types in
javascript?

Data types in javascript are broadly categorised into

Primitive data types and non-primitive data types.

Primitive data types include String, Number, BigInt,

Undefined, Symbol, Null, Boolean.

Non-primitive data types include Objects, Arrays.

Primitive data types can store only one value while

non primitive data types can store multiple values.
How can we check the data types of
Javascript variables?
We can use typeof operator to check for the data type
of variables in javascript.

Example:

What is the difference between ‘==’ and

‘===’ in javascript?
Both are comparison operators. ,“==” is used to
compare values whereas, “ === “ is used to compare
both value and types.

Example:

var a = 10;
var b = '10';
(a == b); //true
(a === b); //false
What is the output of the following?

A. 12<13<19
B. 19>12>2
C. 19>12>0

A => true

Evaluation starts from left to right. 12 < 13 is true. Now

our expression looks like true < 19.True is evaluated
as 1 and 1 < 19 is true. Hence the result is true.

B=> false

From the left, 19 > 12 is true. New expression is true >

2. As we saw previously too that true evaluates as 1.
1>2 is false. Hence 19>12>2 evaluates to false.

C => true.

From left, 19 > 12 is true. New expression is true > 0.

i.e. 1>0 is true. Hence 19>12>0 evaluates to true.

Explain implicit type coercion in

javascript.
Automatic conversion of value from one data type to
another, when operands of the expression are of
different data types is known as type coercion.

Example:

let a = 1;
let b = '1';
b + a; //returns “11”
a - b; //returns 0

Explain NaN in javascript.

NaN in javascript refers to ‘not a number’. This indicates
that a variable is not a valid number. Javascript also
provides isNaN() method to check if the value of a variable
is NaN.

What is the data type of NaN ?

Number.

What is JSON ?
JSON is a text-based data format that follows
Javascript’s object syntax. JSON is an abbreviation of
Javascript Object Notation. It is usually used when you
want to transmit data across a network.

How do you convert JSON data to string

and vice versa ?
Parsing:Parsing: i.e. from string to JSON

JSON.parse(text);

Stringification:

JSON.stringify(object);

Explain splice() and slice() methods in

javascript and list their differences.
slice( )

slice() is an array method that returns selected

elements in an array as a new array object. slice
method won't mutate the original array but it returns
the subset as a new array.

Syntax:

array.slice(start, end)

Example:
 const arr = ['Apple', 'Bat' , 'Cat', 'Dog',
'Elephant'];

arr.slice(1,3) // returns ['Bat' , 'Cat']

arr.slice(0,4) // returns ['Apple', 'Bat',
'Cat', 'Dog']
arr.slice(2) //returns ['Cat', 'Dog',
'Elephant']

splice( )

splice() is an array method that either adds/removes

items to/from an array, and then returns the removed
item. splice method modifies the original array and
returns the deleted array.

Syntax:

array.splice(start, deletecount, item1, item2 ……

itemX)

Example:

const arr = ['Apple', 'Bat' , 'Cat', 'Dog',

 'Elephant'];

arr.slice(1,3) // returns ['Bat' , 'Cat']

arr.slice(0,4) // returns ['Apple', 'Bat',
'Cat', 'Dog']
arr.slice(2) //returns ['Cat', 'Dog',
'Elephant']

Is javascript a statically typed language

or a Dynamically typed language?
Javascript is a dynamically typed language. What we
mean by that is, type of the variables are checked
during the runtime. It is also called a loosely typed
language, variables in js are not associated with any
type. It can hold the value of any data type.

let k = 12;
k = 'This is a string';

Explain Higher Order Functions in

javascript.
Higher order functions are a result of functions being
first-class citizens in javascript. Function that take in
other functions as arguments and/or return a function
are called higher order functions.

Example:

function HOF(fn) {
fn();
}

HOF(function () {
console.log("In Higher order Fn");
});

What are immediately Invoked

Functions in JavaScript?
An Immediately Invoked Function ( known as IIFE and
pronounced as IIFY) is a function that runs as soon as
it is defined.

Syntax:

(function(){
//Do something
 })();

Two parentheses in the end ( ) invoke the function as

soon as they are defined.
//IFFE step by step

//function declaration
function() {
//Do something
}// throws error because function
declaration should always have name
-----
//wrapping it in () to tell the compiler
that it is a function expression and not
function declaration
(function() {

});
------
//invoking the expression
(function() {

})();
What are the possible ways to create
objects in JavaScript?
There are many ways to create objects in javascript as
below

i. Object constructor:
The simplest way to create an empty object
is using the Object constructor. Currently this
approach is not recommended.

var object = new Object();

ii. Object's create method:

The create method of Object creates a new
object by passing the prototype object as a
parameter

var object = Object.create(null);

iii. Object literal syntax:

The object literal syntax is equivalent to
create method when it passes null as
parameter
var object = {};
 iv. Function constructor:
Create any function and apply the new
operator to create object instances,

function Person(name){
this.name=name;
this.age=21;
}
var object = new Person("IronMan");

v. Function constructor with prototype:

This is similar to function constructor but it
uses prototype for their properties and
methods,

function Person(){}
Person.prototype.name = "IronMan";
var object = new Person();

vi. ES6 Class syntax:

ES6 introduces class feature to create the
objects
 class Person {
constructor(name) {
this.name = name;
}
}
var object = new Person("IronMan");

vii. Singleton pattern:

A Singleton is an object which can only be
instantiated one time. Repeated calls to its
constructor return the same instance and this
way one can ensure that they don't
accidentally create multiple instances.

var object = new function(){

this.name = "IronMan";
}

What is a prototype chain?

Prototype chaining is used to build new types of
objects based on existing ones. It is similar to
inheritance in a class based language.
The prototype on object instance is available
through Object.getPrototypeOf(object) or proto
property whereas prototype on constructors
function is available through Object.prototype.

What is the difference between Call,

Apply and Bind?
The difference between Call, Apply and Bind can
be explained with below examples,
Call: The call() method invokes a function with a
given this value and arguments provided one by
one

var employee1 = {firstName: 'John',

lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy',
lastName: 'Baily'};

function invite(greeting1, greeting2) {

console.log(greeting1 + ' ' +
this.firstName + ' ' + this.lastName+ ', '+
greeting2);
}

invite.call(employee1, 'Hello', 'How are

you?'); // Hello John Rodson, How are you?
invite.call(employee2, 'Hello', 'How are
you?'); // Hello Jimmy Baily, How are you?

Apply: Invokes the function with a given this value

and allows you to pass in arguments as an array

var employee1 = {firstName: 'John',

lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy',
lastName: 'Baily'};

function invite(greeting1, greeting2) {

console.log(greeting1 + ' ' +
this.firstName + ' ' + this.lastName+ ', '+
greeting2);
}

invite.apply(employee1, ['Hello', 'How are

you?']); // Hello John Rodson, How are you?
invite.apply(employee2, ['Hello', 'How are
you?']); // Hello Jimmy Baily, How are you?

bind: returns a new function, allowing you to pass

any number of arguments

var employee1 = {firstName: 'John',

lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy',
lastName: 'Baily'};

function invite(greeting1, greeting2) {

console.log(greeting1 + ' ' +
this.firstName + ' ' + this.lastName+ ', '+
greeting2);
 }

var inviteEmployee1 =
invite.bind(employee1);
var inviteEmployee2 =
invite.bind(employee2);
inviteEmployee1('Hello', 'How are you?');
// Hello John Rodson, How are you?
inviteEmployee2('Hello', 'How are you?');
// Hello Jimmy Baily, How are you?

Call and apply are pretty interchangeable. Both

execute the current function immediately. You need
to decide whether it’s easier to send in an array or a
comma separated list of arguments. You can
remember by treating Call is for comma (separated
list) and Apply is for Array.

Whereas Bind creates a new function that will have

this set to the first parameter passed to bind().

What is the difference between

slice and splice ?
Slice Splice

Doesn’t modify original Modifies the original array

array

Returns the subset of the Returns the deleted

original array elements of the array

Used to pick elements Used to insert or delete

from the array elements to/from array

What is a first class function?

In Javascript, functions are first class objects.
First-class functions means when functions in that
language are treated like any other variable.

For example, in such a language, a function can be

passed as an argument to other functions, can be
returned by another function and can be assigned
as a value to a variable. For example, in the below
example, handler functions assigned to a listener

const handler = () => console.log ('This is

a click handler function');
document.addEventListener ('click',
 handler);

What is a first order function?

First-order function is a function that doesn’t accept
another function as an argument and doesn’t return
a function as its return value.

What is a unary function?

Unary function (i.e. monadic) is a function that
accepts exactly one argument. It stands for a single
argument accepted by a function.

Let us take an example of unary function,

const unaryFunction = k => console.log

(k*20);

What is the currying function?

Currying is the process of taking a function with
multiple arguments and turning it into a sequence of
functions each with only a single argument.

Let's take an example of n-ary function and how it

turns into a currying function,

const sum = (a, b, c) => a + b + c;

console.log(sum(1,2,3)) //6
const unarySum = function(a) {
return function(b) {
return function(c) {
return a + b + c;
}
}
}
unarySum(1)(2)(3) //6

What is the purpose of the let

keyword?
The let statement declares a block scope local
variable. Hence the variables defined with let
keyword are limited in scope to the block,
statement, or expression on which it is used.
Whereas variables declared with the var keyword
used to define a variable globally, or locally to an
entire function regardless of block scope.

Let's take an example to demonstrate the usage,

let counter = 30;

if (counter === 30) {
let counter = 31;
console.log(counter); // 31
}
console.log(counter); // 30 (because the
variable in if block won't exist here)

What is the difference between let

and var?

You can list out the differences in a tabular format

 var let

It has function scope It has block scope

While variables let variables are hoisted

declared with var too but not initialized
keyword are hoisted and are inaccessible
and are initialized with until their definition is
undefined. evaluated

In strict mode, var will let raises a SyntaxError

let you re-declare the on redeclaration in the
same variable in the same scope
same scope

Let's take an example to see the difference,

function userDetails(username) {
if(username) {
console.log(salary); // undefined due
 to hoisting
console.log(age); // ReferenceError:
Cannot access 'age' before initialization
let age = 30;
var salary = 10000;
}
console.log(salary); //10000 (accessible
to due function scope)
console.log(age); //error: age is not
defined(due to block scope)
}
userDetails('John');

What is the Temporal Dead Zone?

The Temporal Dead Zone is a behavior in
JavaScript that occurs when declaring a variable
with the let and const keywords, but not with var. In
ECMAScript 6, accessing a let or const variable
before its declaration (within its scope) causes a
ReferenceError. The time span when that happens,
between the creation of a variable’s binding and its
declaration, is called the temporal dead zone.

Let's see this behavior with an example,

 function somemethod() {
console.log(counter1); // undefined
console.log(counter2); // ReferenceError
var counter1 = 1;
let counter2 = 2;
}

What is the benefit of using

modules?
There are a lot of benefits to using modules in
favour of a sprawling. Some of the benefits are,

i. Maintainability
ii. Reusability
iii. Namespacing

What is memoization?
Memoization is a programming technique which
attempts to increase a function’s performance by
caching its previously computed results. Each time
a memoized function is called, its parameters are
used to index the cache. If the data is present, then
it can be returned, without executing the entire
function. Otherwise the function is executed and
then the result is added to the cache. Let's take an
example of adding function with memoization

const memoizAddition = () => {

let cache = {};
return (value) => {
if (value in cache) {
console.log('Fetching from cache');
return cache[value]; // Here,
cache.value cannot be used as property name
starts with the number which is not a valid
JavaScript identifier. Hence, can only be
accessed using the square bracket notation.
}
else {
console.log('Calculating result');
let result = value + 20;
cache[value] = result;
return result;
}
 }
}
// returned function from memoizAddition
const addition = memoizAddition();
console.log(addition(20)); //output: 40
calculated
console.log(addition(20)); //output: 40
cached

What is Hoisting?
Hoisting is a JavaScript mechanism where
variables and function declarations are moved to
the top of their scope before code execution.
Remember that JavaScript only hoists declarations,
not initialisation. Let's take a simple example of
variable hoisting,

console.log(message); //output : undefined

 var message = 'The variable Has been
hoisted';
The above code looks like as below to the
interpreter,
var message;
console.log(message);
message = 'The variable Has been hoisted';

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';
}
}

What are closures?

A closure is the combination of a function and the
lexical environment within which that function was
declared. i.e, It is an inner function that has access
to the outer or enclosing function’s variables. The
closure has three scope chains

i. Own scope where variables defined between

its curly brackets
ii. Outer function’s variables
iii. Global variables

Let's take an example of closure concept,

function Welcome(name){
 var greetingInfo = function(message){
console.log(message+' '+name);
}
return greetingInfo;
}
var myFunction = Welcome('John');
myFunction('Welcome '); //Output: Welcome
John
myFunction('Hello Mr.'); //output: Hello
Mr.John

As per the above code, the inner function(i.e,

greetingInfo) has access to the variables in the
outer function scope(i.e, Welcome) even after the
outer function has returned

What is scope in javascript?

Scope is the accessibility of variables, functions,
and objects in some particular part of your code
during runtime. In other words, scope determines
the visibility of variables and other resources in
areas of your code.
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.

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.

How do you reuse information

across service worker restarts?
The problem with service worker is that it gets
terminated when not in use, and restarted when it's
next needed, so you cannot rely on global state
within a service worker's onfetch and onmessage
handlers. In this case, service workers will have
access to IndexedDB API in order to persist and
reuse across restarts.

What is IndexedDB?
IndexedDB is a low-level API for client-side storage
of larger amounts of structured data, including
files/blobs. This API uses indexes to enable
high-performance searches of this data.

What is web storage?

Web storage is an API that provides a mechanism
by which browsers can store key/value pairs locally
within the user's browser, in a much more intuitive
fashion than using cookies. The web storage
provides two mechanisms for storing data on the
client.

i. Local storage: It stores data for current origin

with no expiration date.
 ii. Session storage: It stores data for one
session and the data is lost when the
browser tab is closed.

What is a Cookie?
A cookie is a piece of data that is stored on your
computer to be accessed by your browser. Cookies
are saved as key/value pairs.

Why do you need a Cookie?

Cookies are used to remember information about
the user profile(such as username). It basically
involves two steps,
 i. When a user visits a web page, the user
profile can be stored in a cookie.
ii. Next time the user visits the page, the cookie
remembers the user profile.

What are the config options in a

cookie?
There are few below options available for a cookie,

i. By default, the cookie is deleted when the

browser is closed but you can change this
behavior by setting expiry date (in UTC
time).
document.cookie = "username=John;
expires=Sat, 8 Jun 2019 12:00:00 UTC";

ii. By default, the cookie belongs to a current

page. But you can tell the browser what path
the cookie belongs to using a path
parameter.
document.cookie = "username=John;
path=/services";
How do you delete a cookie?
You can delete a cookie by setting the expiry date
as a passed date. You don't need to specify a
cookie value in this case. For example, you can
delete a username cookie in the current page as
below.

document.cookie = "username=; expires=Fri,

07 Jun 2019 00:00:00 UTC; path=/;";

Note: You should define the cookie path option to

ensure that you delete the right cookie. Some browsers
doesn't allow to delete a cookie unless you specify a
path parameter.
What are the differences between
cookie, local storage and session
storage?
Below are some of the differences between cookie,
local storage and session storage,

Feature Cookie Local Session

Storage Storage

Accessed Both client-side client-side

on client server-sid only only
or server e&
side client-side

Lifetime As until until tab is

configured deleted closed
using
Expires
option

SSL Supported Not Not

support Supported Supported

Maximum 4KB 5MB 5MB

data size
What is the main difference
between localStorage and
sessionStorage?
LocalStorage is the same as SessionStorage but it
persists the data even when the browser is closed
and reopened(i.e it has no expiration time) whereas
in sessionStorage data gets cleared when the page
session ends.

What are the methods available on

session storage?
The session storage provided methods for reading,
writing and clearing the session data

// Save data to sessionStorage

sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from
sessionStorage
sessionStorage.clear();
What is a storage event and its
event handler?
The StorageEvent is an event that fires when a
storage area has been changed in the context of
another document. Whereas onstorage property is
an EventHandler for processing storage events.
The syntax would be as below

window.onstorage = functionRef;

Why do you need web storage?

Web storage is more secure, and large amounts of
data can be stored locally, without affecting website
performance. Also, the information is never
transferred to the server. Hence this is a more
recommended approach than Cookies.

How do you check web storage

browser support?
You need to check browser support for localStorage
and sessionStorage before using web storage,
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

How do you check web workers

browser support?
You need to check browser support for web
workers before using it

if (typeof(Worker) !== "undefined") {

// code for Web worker support.
} else {
// Sorry! No Web Worker support..
}

What are the restrictions of web

workers on DOM?
WebWorkers don't have access to below javascript
objects since they are defined in an external files

i. Window object
ii. Document object
iii. Parent object

What is a promise
A promise is an object that may produce a single
value some time in the future with either a resolved
value or a reason that it’s not resolved(for example,
network error). It will be in one of the 3 possible
states: fulfilled, rejected, or pending.

The syntax of Promise creation looks like below,

const promise = new

Promise(function(resolve, reject) {
// promise description
})
Example:

const promise = new Promise(resolve => {

setTimeout(() => {
resolve("I'm a Promise!");
}, 5000);
}, reject => {
});
promise.then(value =>
console.log(value));

Why do you need a promise?

Promises are used to handle asynchronous
operations. They provide an alternative approach
for callbacks by reducing the callback hell and
writing the cleaner code.

What are the three states of

promise
Promises have three states:

i. Pending: This is an initial state of the

Promise before an operation begins
 ii. Fulfilled: This state indicates that the
specified operation was completed.
iii. Rejected: This state indicates that the
operation did not complete. In this case an
error value will be thrown

What is a callback function?

A callback function is a function passed into
another function as an argument. This function is
invoked inside the outer function to complete an
action. Let's take a simple example of how to use
callback function

function callbackFunction(name) {
console.log('Hello ' + name);
}

function outerFunction(callback) {
let name = prompt('Please enter your
name.');
callback(name);
}
outerFunction(callbackFunction);

Why do we need callbacks

The callbacks are needed because javascript is an
event driven language. That means instead of
waiting for a response javascript will keep executing
while listening for other events. Let's take an
example with the first function invoking an API
call(simulated by setTimeout) and the next function
which logs the message.

function firstFunction(){
// Simulate a code delay
setTimeout( function(){
console.log('First function called');
}, 1000 );
}
function secondFunction(){
console.log('Second function called');
}
firstFunction();
secondFunction();

Output
// Second function called
// First function called

As observed from the output, javascript didn't wait

for the response of the first function and the
remaining code block got executed. So callbacks
are used in a way to make sure that certain code
doesn’t execute until the other code finishes
execution.

What is a callback hell

Callback Hell is an anti-pattern with multiple nested
callbacks which makes code hard to read and
debug when dealing with asynchronous logic. The
callback hell looks like below,

async1(function(){
async2(function(){
async3(function(){
async4(function(){
....
});
});
});

What are server-sent events

Server-sent events (SSE) is a server push
technology enabling a browser to receive automatic
updates from a server via HTTP connection without
resorting to polling. These are a one way
communications channel - events flow from server
to client only. This has been used in
Facebook/Twitter updates, stock price updates,
news feeds etc.

How do you receive server-sent

event notifications
The EventSource object is used to receive
server-sent event notifications. For example, you
can receive messages from server as below,

if(typeof(EventSource) !== "undefined") {

var source = new
EventSource("sse_generator.js");
source.onmessage = function(event) {

document.getElementById("output").innerHTML
+= event.data + "<br>";
};
}
How do you check browser
support for server-sent events
You can perform browser support for server-sent
events before using it as below,

if(typeof(EventSource) !== "undefined") {

// Server-sent events supported. Let's
have some code here!
} else {
// No server-sent events supported
}

What are the events available for

server sent events?
Below are the list of events available for server sent
events

Event Description

onopen It is used when a connection to

the server is opened
 onmessage This event is used when a
message is received

onerror It happens when an error occurs

What are the main rules of

promise
A promise must follow a specific set of rules,

i. A promise is an object that supplies a

standard-compliant .then() method
ii. A pending promise may transition into
either fulfilled or rejected state
iii. A fulfilled or rejected promise is
settled and it must not transition into
any other state.
iv. Once a promise is settled, the value
must not change.

What is callback in callback

You can nest one callback inside in another
callback to execute the actions sequentially one by
one. This is known as callbacks in callbacks.

loadScript('/script1.js', function(script)
{
console.log('first script is loaded');
loadScript('/script2.js',
function(script) {
console.log('second script is
loaded');
loadScript('/script3.js',
function(script) {
console.log('third script is
loaded');
// after all scripts are loaded
});
})
});

What is promise chaining

The process of executing a sequence of
asynchronous tasks one after another using
promises is known as Promise chaining. Let's take
an example of promise chaining for calculating the
final result,

new Promise(function(resolve, reject) {

 setTimeout(() => resolve(1), 1000);
}).then(function(result) {
console.log(result); // 1
return result * 2;
}).then(function(result) {
console.log(result); // 2
return result * 3;
}).then(function(result) {
console.log(result); // 6
return result * 4;
});

In the above handlers, the result is passed to the

chain of .then() handlers with the below work flow,

I. The initial promise resolves in 1 second,

II. After that .then handler is called by logging the

result(1) and then return a promise with the value of
result * 2.

III. After that the value passed to the next .then

handler by logging the result(2) and return a
promise with result * 3.
IV. Finally the value passed to the last .then handler
by logging the result(6) and return a promise with
result * 4.

What is promise.all
Promise.all is a promise that takes an array of
promises as an input (an iterable), and it gets
resolved when all the promises get resolved or any
one of them gets rejected. For example, the syntax
of promise.all method is below,

Promise.all([Promise1, Promise2, Promise3])

.then(result) => { console.log(result) })
.catch(error => console.log(`Error in
promises ${error}`))

Note: Remember that the order of the

promises(output the result) is maintained as per
input order.

What is the purpose of the race

method in promise
Promise.race() method will return the promise
instance which is firstly resolved or rejected. Let's
take an example of race() method where promise2
is resolved first
var promise1 = new
Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'one');
});
var promise2 = new
Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'two');
});

Promise.race([promise1,
promise2]).then(function(value) {
console.log(value); // "two" // Both
promises will resolve, but promise2 is
faster
});

What is a strict mode in

javascript
Strict Mode is a new feature in ECMAScript 5 that
allows you to place a program, or a function, in a
“strict” operating context. This way it prevents
certain actions from being taken and throws more
exceptions. The literal expression "use strict";
instructs the browser to use the javascript code in
the Strict mode.

Why do you need strict mode

Strict mode is useful to write "secure" JavaScript by
notifying "bad syntax" into real errors. For example,
it eliminates accidentally creating a global variable
by throwing an error and also throws an error for
assignment to a non-writable property, a getter-only
property, a non-existing property, a non-existing
variable, or a non-existing object.

How do you declare strict mode

The strict mode is declared by adding "use strict";
to the beginning of a script or a function. If declared
at the beginning of a script, it has global scope.

"use strict";
x = 3.14; // This will cause an error
because x is not declared

and if you declare inside a function, it has local

scope
 x = 3.14; // This will not cause an
error.
myFunction();

function myFunction() {
"use strict";
y = 3.14; // This will cause an error
}

What is the purpose of double

exclamation
The double exclamation or negation(!!) ensures the
resulting type is a boolean. If it was falsey (e.g. 0,
null, undefined, etc.), it will be false, otherwise, true.
For example, you can test IE version using this
expression as below,

let isIE8 = false;

isIE8 = !! navigator.userAgent.match(/MSIE
8.0/);
console.log(isIE8); // returns true or
false
If you don't use this expression then it returns the
original value.

console.log(navigator.userAgent.match(/MSIE
8.0/)); // returns either an Array or null

Note: The expression !! is not an operator, but it is

just twice of ! operator.

What is the purpose of the delete

operator
The delete keyword is used to delete the property
as well as its value.

var user= {name: "John", age:20};

delete user.age;

console.log(user); // {name: "John"}

What is the typeof operator

You can use the JavaScript typeof operator to find
the type of a JavaScript variable. It returns the type
of a variable or an expression.

typeof "John Abraham" // Returns

"string"
typeof (1 + 2) // Returns "number"

What is undefined property

The undefined property indicates that a variable has
not been assigned a value, or not declared at all. The
type of undefined value is undefined too.

var user; // Value is undefined, type is

undefined
console.log(typeof(user)) //undefined

Any variable can be emptied by setting the value to

undefined.

user = undefined

What is null value

The value null represents the intentional absence of
any object value. It is one of JavaScript's primitive
values. The type of null value is object. You can
empty the variable by setting the value to null.

var user = null;

console.log(typeof(user)) //object

What is the difference between

null and undefined
Below are the main differences between null and
undefined,

null Undefined

It is an assignment It is not an assignment

value which indicates value where a variable
that variable points to has been declared but
no object. has not yet been
assigned a value.

Type of null is object Type of undefined is

undefined

The null value is a The undefined value is

primitive value that a primitive value used
represents the null, when a variable has not
empty, or non-existent been assigned a value.
reference.
Indicates the absence Indicates absence of
of a value for a variable variable itself

Converted to zero (0) Converted to NaN while

while performing performing primitive
primitive operations operations

What is eval
The eval() function evaluates JavaScript code
represented as a string. The string can be a
JavaScript expression, variable, statement, or
sequence of statements.
console.log(eval('1 + 2')); // 3

What is the difference between

window and document
Below are the main differences between window and
document,

Window Document

It is the root level It is the direct child of

element in any web the window object. This
page is also known as
Document Object
 Model(DOM)

By default window You can access it via

object is available window.document or
implicitly in the page document.

It has methods like It provides methods like

alert(), confirm() and getElementById,
properties like getElementsByTagNam
document, location e, createElement etc

How do you access history in

javascript
The window.history object contains the browser's
history. You can load previous and next URLs in the
history using back() and next() methods.

function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}

Note: You can also access history without window

prefix.
How do you detect caps lock key
turned on or not
The mouseEvent getModifierState() is used to return a
boolean value that indicates whether the specified
modifier key is activated or not. The modifiers such
as CapsLock, ScrollLock and NumLock are activated
when they are clicked, and deactivated when they
are clicked again.
Let's take an input element to detect the CapsLock
on/off behavior with an example,

<input type="password"
onmousedown="enterInput(event)">

<p id="feedback"></p>
<script>
function enterInput(e) {
var flag = e.getModifierState("CapsLock");
if(flag) {

document.getElementById("feedback").innerHT
ML = "CapsLock activated";
} else {

document.getElementById("feedback").innerHT
ML = "CapsLock not activated";
}
}
</script>

What are the differences between

undeclared and undefined
variables
Below are the major differences between undeclared
and undefined variables,

Undeclared Undefined

These variables do not These variables

exist in a program and declared in the program
are not declared but have not assigned
any value

If you try to read the If you try to read the

value of an undeclared value of an undefined
variable, then a runtime variable, an undefined
error is encountered value is returned.
What are global variables
Global variables are those that are available
throughout the length of the code without any
scope. The var keyword is used to declare a local
variable but if you omit it then it will become global
variable

msg = "Hello" // var is missing, it becomes

global variable

What are the problems with

global variables
The problem with global variables is the conflict of
variable names of local and global scope. It is also
difficult to debug and test the code that relies on
global variables.

What is the purpose of isFinite

function
The isFinite() function is used to determine whether a
number is a finite, legal number. It returns false if the
value is +infinity, -infinity, or NaN (Not-a-Number),
otherwise it returns true.
 isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false
isFinite(100); // true

What is an event flow

Event flow is the order in which event is received on
the web page. When you click an element that is
nested in various other elements, before your click
actually reaches its destination, or target element, it
must trigger the click event for each of its parent
elements first, starting at the top with the global
window object. There are two ways of event flow

i. Top to Bottom(Event Capturing)

ii. Bottom to Top (Event Bubbling)

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.
What is event capturing
Event capturing is a type of event propagation
where the event is first captured by the outermost
element, and then successively triggers on the
descendants (children) of the target element in the
same nesting hierarchy till it reaches the innermost
DOM element.

How do you submit a form using

JavaScript
You can submit a form using
document.forms[0].submit(). All the form input's
information is submitted using onsubmit event
handler

function submit() {
document.forms[0].submit();
}

How do you find operating

system details
The window.navigator object contains information
about the visitor's browser OS details. Some of the
OS properties are available under platform
property,

console.log(navigator.platform);

What is the difference between

document load and
DOMContentLoaded events
The DOMContentLoaded event is fired when the initial
HTML document has been completely loaded and
parsed, without waiting for assets(stylesheets,
images, and subframes) to finish loading. Whereas
The load event is fired when the whole page has
loaded, including all dependent
resources(stylesheets, images).

What is the difference between

native, host and user objects
Native objects are objects that are part of the
JavaScript language defined by the ECMAScript
specification. For example, String, Math, RegExp,
Object, Function etc core objects defined in the
ECMAScript spec. Host objects are objects
provided by the browser or runtime environment
(Node). For example, window, XmlHttpRequest,
DOM nodes etc are considered as host objects.
User objects are objects defined in the javascript
code. For example, User objects created for profile
information.

What are the tools or techniques

used for debugging JavaScript
code
You can use below tools or techniques for
debugging javascript

1. Chrome Devtools
2. debugger statement
3. Good old console.log statement

What are the pros and cons of

promises over callbacks
Below are the list of pros and cons of promises over
callbacks,
Pros:

1. It avoids callback hell which is unreadable

 2. Easy to write sequential asynchronous code
with .then()
3. Easy to write parallel asynchronous code
with Promise.all()
4. Solves some of the common problems of
callbacks(call the callback too late, too early,
many times and swallow errors/exceptions)

Cons:

1. It makes little complex code

2. You need to load a polyfill if ES6 is not
supported

What is the difference between an

attribute and a property
Attributes are defined on the HTML markup whereas
properties are defined on the DOM. For example, the
below HTML element has 2 attributes type and value,
<input type="text" value="Name:">
You can retrieve the attribute value as below,

const input =
document.querySelector('input');
console.log(input.getAttribute('value'));
// Good morning
 console.log(input.value); // Good morning

And after you change the value of the text field to

"Good evening", it becomes like

console.log(input.getAttribute('value'));
// Good morning
console.log(input.value); // Good evening

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).

What is the purpose of void 0

Void(0) is used to prevent the page from refreshing.
This will be helpful to eliminate the unwanted
side-effect, because it will return the undefined
primitive value. It is commonly used for HTML
documents that use href="JavaScript:Void(0);"
within an <a> element. i.e, when you click a link, the
browser loads a new page or refreshes the same
page. But this behavior will be prevented using this
expression. For example, the below link notify the
message without reloading the page

<a href="JavaScript:void(0);"
onclick="alert('Well done!')">Click Me!</a>

Is JavaScript a compiled or
interpreted language
JavaScript is an interpreted language, not a
compiled language. An interpreter in the browser
reads over the JavaScript code, interprets each
line, and runs it. Nowadays modern browsers use a
technology known as Just-In-Time (JIT)
compilation, which compiles JavaScript to
executable bytecode just as it is about to run.

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

Is there any relation between

Java and JavaScript
No, they are entirely two different programming
languages and have nothing to do with each other.
But both of them are Object Oriented Programming
languages and like many other languages, they
follow similar syntax for basic features(if, else, for,
switch, break, continue etc).

What are events

Events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages,
JavaScript can react on these events. Some of the
examples of HTML events are,

1. Web page has finished loading

2. Input field was changed
3. Button was clicked

Let's describe the behavior of click event for button

element,
<!doctype html>
<html>
<head>
<script>
function greeting() {
alert('Hello! Good morning');
}
</script>
</head>
<body>
<button type="button"
onclick="greeting()">Click me</button>
</body>
</html>

What is the use of preventDefault

method
The preventDefault() method cancels the event if it
is cancelable, meaning that the default action or
behaviour that belongs to the event will not occur.
For example, prevent form submission when
clicking on submit button and prevent opening the
page URL when clicking on hyperlink are some
common use cases.

document.getElementById("link").addEventListener("c
lick", function(event){

event.preventDefault();

});

Note: Remember that not all events are cancelable.

What is the use of stopPropagation

method
The stopPropagation method is used to stop the
event from bubbling up the event chain. For
example, the below nested divs with
stopPropagation method prevents default event
propagation when clicking on nested div(Div1)

<p>Click DIV1 Element</p>

<div onclick="secondFunc()">DIV 2

<div onclick="firstFunc(event)">DIV 1</div>

</div>
<script>

function firstFunc(event) {

alert("DIV 1");

event.stopPropagation();

function secondFunc() {

alert("DIV 2");

</script>

What are the steps involved in

return false usage
The return false statement in event handlers
performs the below steps,

i. First it stops the browser's default action or

behaviour.
ii. It prevents the event from propagating the
DOM
 iii. Stops callback execution and returns
immediately when called.

What is BOM
The Browser Object Model (BOM) allows
JavaScript to "talk to" the browser. It consists of the
objects navigator, history, screen, location and
document which are children of the window. The
Browser Object Model is not standardized and can
change based on different browsers.

What is the use of setTimeout

The setTimeout() method is used to call a function
or evaluate an expression after a specified number
of milliseconds. For example, let's log a message
after 2 seconds using setTimeout method,

setTimeout(function(){ console.log("Good morning");

}, 2000);
What is the use of setInterval
The setInterval() method is used to call a function
or evaluate an expression at specified intervals (in
milliseconds). For example, let's log a message
after 2 seconds using setInterval method,

setInterval(function(){ console.log(

Why is JavaScript treated as Single

threaded
JavaScript is a single-threaded language. Because
the language specification does not allow the
programmer to write code so that the interpreter
can run parts of it in parallel in multiple threads or
processes. Whereas languages like java, go, C++
can make multi-threaded and multi-process
programs.

What is an event delegation

Event delegation is a technique for listening to
events where you delegate a parent element as the
listener for all of the events that happen inside it.

For example, if you wanted to detect field changes

in inside a specific form, you can use event
delegation technique,

var form =
document.querySelector('#registration-form');

// Listen for changes to fields inside the form

form.addEventListener('input', function (event) {

// Log the field that was changed

console.log(event.target);

}, false);
What are the syntax rules of JSON
Below are the list of syntax rules of JSON

i. The data is in name/value pairs

ii. The data is separated by commas
iii. Curly braces hold objects
iv. Square brackets hold arrays

What are PWAs

Progressive web applications (PWAs) are a type of
mobile app delivered through the web, built using
common web technologies including HTML, CSS
and JavaScript. These PWAs are deployed to
servers, accessible through URLs, and indexed by
search engines.

What is the purpose of

clearTimeout method
The clearTimeout() function is used in javascript to
clear the timeout which has been set by
setTimeout()function before that. i.e, The return
value of setTimeout() function is stored in a variable
and it’s passed into the clearTimeout() function to
clear the timer.

For example, the below setTimeout method is used

to display the message after 3 seconds. This
timeout can be cleared by the clearTimeout()
method.

<script>

var msg;

function greeting() {

alert('Good morning');

function start() {

msg =setTimeout(greeting, 3000);

function stop() {

clearTimeout(msg);
}

</script>

What is the purpose of clearInterval

method
The clearInterval() function is used in javascript to
clear the interval which has been set by
setInterval() function. i.e, The return value returned
by setInterval() function is stored in a variable and
it’s passed into the clearInterval() function to clear
the interval.

For example, the below setInterval method is used

to display the message for every 3 seconds. This
interval can be cleared by the clearInterval()
method.

<script>

var msg;

function greeting() {

alert('Good morning');

function start() {
 msg = setInterval(greeting, 3000);

function stop() {

clearInterval(msg);

</script>

How do you redirect new page in

javascript
In vanilla javascript, you can redirect to a new page
using the location property of window object. The
syntax would be as follows,

function redirect() {

window.location.href = 'newPage.html';

}
How do you check whether a string
contains a substring
There are 3 possible ways to check whether a
string contains a substring or not,

i. Using includes: ES6 provided

String.prototype.includes method to test a
string contains a substring
var mainString = "hello", subString = "hell";

mainString.includes(subString)

i. Using indexOf: In an ES5 or older

environment, you can use
String.prototype.indexOf which returns the
index of a substring. If the index value is not
equal to -1 then it means the substring exists
in the main string.
var mainString = "hello", subString = "hell";

mainString.indexOf(subString) !== -1

i. Using RegEx: The advanced solution is

using Regular expression's test
method(RegExp.test), which allows for testing
for against regular expressions
var mainString = "hello", regex = /hell/;
regex.test(mainString)

How do you get the current url with

javascript
You can use window.location.href expression to get
the current url path and you can use the same
expression for updating the URL too. You can also
use document.URL for read-only purposes but this
solution has issues in FF.

console.log('location.href', window.location.href);
// Returns full URL

What are the various url properties

of location object
The below Location object properties can be used
to access URL components of the page,

i. href - The entire URL

ii. protocol - The protocol of the URL
iii. host - The hostname and port of the URL
iv. hostname - The hostname of the URL
v. port - The port number in the URL
vi. pathname - The path name of the URL
vii. search - The query portion of the URL
 viii.hash - The anchor portion of the URL

How do get query string values in

javascript
You can use URLSearchParams to get query string
values in javascript. Let's see an example to get the
client code value from URL query string,

const urlParams = new

URLSearchParams(window.location.search);

const clientCode = urlParams.get('clientCode');

How do you check if a key exists in

an object
You can check whether a key exists in an object or
not using three approaches,

i. Using in operator: You can use the in

operator whether a key exists in an object or
not
"key" in obj
and If you want to check if a key doesn't exist,
remember to use parenthesis,

!("key" in obj)

i. Using hasOwnProperty method: You can use

hasOwnProperty to particularly test for
properties of the object instance (and not
inherited properties)
obj.hasOwnProperty("key") // true

i. Using undefined comparison: If you access a

non-existing property from an object, the
result is undefined. Let’s compare the
properties against undefined to determine
the existence of the property.
const user = {

name: 'John'

};

console.log(user.name !== undefined); // true

console.log(user.nickName !== undefined); // false

How do you loop through or
enumerate javascript object
You can use the for-in loop to loop through
javascript object. You can also make sure that the
key you get is an actual property of an object, and
doesn't come from the prototype using
hasOwnProperty method.

var object = {

"k1": "value1",

"k2": "value2",

"k3": "value3"

};

for (var key in object) {

if (object.hasOwnProperty(key)) {

console.log(key + " -> " + object[key]); //

k1 -> value1 ...

}
How do you test for an empty
object
There are different solutions based on ECMAScript
versions

i. Using Object entries(ECMA 7+): You can

use object entries length along with
constructor type.
Object.entries(obj).length === 0 && obj.constructor
=== Object // Since date object length is 0, you
need to check constructor check as well

i. Using Object keys(ECMA 5+): You can use

object keys length along with constructor
type.
Object.keys(obj).length === 0 && obj.constructor
=== Object // Since date object length is 0, you
need to check constructor check as well

i. Using for-in with

hasOwnProperty(Pre-ECMA 5): You can use
a for-in loop along with hasOwnProperty.
function isEmpty(obj) {

for(var prop in obj) {

if(obj.hasOwnProperty(prop)) {
 return false;

return JSON.stringify(obj) ===

JSON.stringify({});

What is an arguments object

The arguments object is an Array-like object
accessible inside functions that contains the values
of the arguments passed to that function. For
example, let's see how to use arguments object
inside sum function,

function sum() {

var total = 0;

for (var i = 0, len = arguments.length; i <

len; ++i) {

total += arguments[i];
 }

return total;

sum(1, 2, 3) // returns 6

Note: You can't apply array methods on arguments

object. But you can convert into a regular array as
below.

var argsArray =
Array.prototype.slice.call(arguments);

What are the pros and cons of for

loop
The for-loop is a commonly used iteration syntax in
javascript. It has both pros and cons

Pros

i. Works on every environment

ii. You can use break and continue flow control
statements
Cons

i. Too verbose
ii. Imperative
iii. You might face one-by-off errors

How do you display the current

date in javascript
You can use new Date() to generate a new Date
object containing the current date and time.

How do you compare two date

objects
You need to use date.getTime() method to compare
date values instead of comparison operators (==,
!=, ===, and !== operators)

var d1 = new Date();

var d2 = new Date(d1);
console.log(d1.getTime() === d2.getTime()); //True
console.log(d1 === d2); // False

How do you check if a string starts

with another string
You can use ECMAScript 6's
String.prototype.startsWith() method to check if a
string starts with another string or not. But it is not
yet supported in all browsers. Let's see an example
to see this usage,

"Good morning".startsWith("Good"); // true

"Good morning".startsWith("morning"); // false

How do you trim a string in

javascript
JavaScript provided a trim method on string types
to trim any whitespaces present at the beginning or
ending of the string.

" Hello World ".trim(); //Hello World

If your browser(<IE9) doesn't support this method

then you can use below polyfill.

if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim =
/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
 return this.replace(rtrim, '');
};
})();
}

How do you add a key value pair in

javascript
There are two possible solutions to add new
properties to an object. Let's take a simple object to
explain these solutions.

var object = {
key1: value1,
key2: value2
};

i. Using dot notation: This solution is useful

when you know the name of the property
object.key3 = "value3";

i. Using square bracket notation: This solution

is useful when the name of the property is
dynamically determined.
obj["key3"] = "value3";
Explain arrays in javascript
An array is an object that holds values (of any type)
not particularly in named properties/keys, but rather
in numerically indexed positions:

var arr = [
"hello world",
42,
true
];

arr[0]; // "hello world"

arr[1]; // 42
arr[2]; // true
arr.length; // 3

typeof arr; // "object"

Is there anyway to force using strict mode in

Node.js?

you can place

"use strict";
at the top of your file in node >= 0.10.7, but if you
want your whole app to run in strict (including
external modules) you can do this

node --use_strict

Why would you use something like the load

event? Does this event have disadvantages? Do
you know any alternatives, and why would you
use those?

The load event fires at the end of the document

loading process. At this point, all of the objects in
the document are in the DOM, and all the images,
scripts, links and sub-frames have finished loading.

The DOM event DOMContentLoaded will fire after

the DOM for the page has been constructed, but do
not wait for other resources to finish loading. This is
preferred in certain cases when you do not need
the full page to be loaded before initializing.
What's the difference between Host objects and
Native objects?

Native objects are objects that are part of the

JavaScript language defined by the ECMAScript
specification, such as String, Math, RegExp,
Object, Function, etc.

Host objects are provided by the runtime

environment (browser or Node), such as window,
XMLHTTPRequest, etc.

Explain event bubbling and how one may

prevent it

Event bubbling is the concept in which an event

triggers at the deepest possible element, and
triggers on parent elements in nesting order. As a
result, when clicking on a child element one may
exhibit the handler of the parent activating.

One way to prevent event bubbling is using

event.stopPropagation() or event.cancelBubble on
IE < 9.
What does use strict do?

The use strict literal is entered at the top of a

JavaScript program or at the top of a function and it
helps you write safer JavaScript code by throwing
an error if a global variable is created by mistake.
For example, the following program will throw an
error:

function doSomething(val) {

"use strict";

x = val + 10;

}`

It will throw an error because x was not defined and

it is being set to some value in the global scope,
which isn't allowed with use strict The small change
below fixes the error being thrown:

function doSomething(val) {

"use strict";
 var x = val + 10;

What is a Polyfill?

A polyfill is essentially the specific code (or plugin)

that would allow you to have some specific
functionality that you expect in current or “modern”
browsers to also work in other browsers that do not
have the support for that functionality built in.

Polyfills are not part of the HTML5 standard

Polyfilling is not limited to Javascript

What are the escape characters in

JavaScript?
In JavaScript, we use escape characters,
typically backslash (\ \) while working with special
characters, such as ampersands (&),
apostrophes (‘), double quotes (“ “), and single
quotes (‘ ‘). Whatever enclosed within the
escape, characters get displayed by the
JavaScript.

Six additional escape characters are also

available in JavaScript:

● \b – Backspace
● \f – Form feed
● \n – Newline
● \r – Carriage return
● \t – Horizontal tabulator
● \v – Vertical tabulator

What are some advantages of using

JavaScript?
Enhanced interactivity – JavaScript allows creating
interfaces that react when the user activates them via the
keyboard or merely hovers the cursor over the same.

Immediate feedback – Visitors need not wait for a page

reload to see if they had forgotten to enter some important
details.
Low server interaction – JS allows validating user input
before sending the webpage to the server. It means less
server traffic and hence, less load on the server.

Rich interfaces – JS has items like drag-and-drop

components and sliders to present a richer interface to the
website visitors.

Explain ceil() method in JavaScript

The Math.ceil() function always rounds a number
up to the next largest integer.
console.log(Math.ceil(.95));
// expected output: 1
console.log(Math.ceil(-7.004));
// expected output: -7

Explain concat() method in

JavaScript
Combines two strings and returns the newer
string. This method also concatenates (joins) two
or more arrays
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const children = arr1.concat(arr2);
// Cecilie,Lone,Emil,Tobias,Linus

let hello = 'Hello, '

console.log(hello.concat('Kevin', '. Have a
nice day.'))
// Hello, Kevin. Have a nice day.

Explain constructor() method in

JavaScript
Returns the function that created the
corresponding instance of the object

Explain Date() method in

JavaScript
When called as a function, returns a string
representation of the current date and time,
exactly as new Date().toString() does.

Date.now()
Returns the numeric value corresponding
to the current time
Explain Date.parse() method in
JavaScript
Parses a string representation of a date and
returns the number of milliseconds since 1
January, 1970, 00:00:00 UTC, with leap seconds
ignored.

Explain exec() method in

JavaScript
The exec() method executes a search for a
match in a specified string. Returns a result array,
or null.

const regex1 = RegExp('foo*', 'g');

const str1 = 'table football, foosball';
let array1;

while ((array1 = regex1.exec(str1)) !==

null) {
console.log(`Found ${array1[0]}. Next
starts at ${regex1.lastIndex}.`);
// expected output: "Found foo. Next
starts at 9."
// expected output: "Found foo. Next
starts at 19."
}

Explain filter() method in

JavaScript
The filter() method creates a new array with
all elements that pass the test implemented by
the provided function.

const words = ['spray', 'limit', 'elite',

'exuberant', 'destruction', 'present'];

const result = words.filter(word =>

word.length > 6);

console.log(result);
// expected output: Array ["exuberant",
"destruction", "present"]
Explain localeCompare() method
in JavaScript
The localeCompare() method returns a number
indicating whether a reference string comes
before, or after, or is the same as the given string
in sort order
EXAMPLE 1

const a = 'réservé'; // with accents,

lowercase - reference string
const b = 'RESERVE'; // no accents,
uppercase - compare string

console.log(a.localeCompare(b));
// expected output: 1
console.log(a.localeCompare(b, 'en', {
sensitivity: 'base' }));
// expected output: 0

EXAMPLE 2

// The letter "a" is before "c" yielding a

negative value
'a'.localeCompare('c'); // -2 or -1 (or
some other negative value)
// Alphabetically the word "check" comes
after "against" yielding a positive value
'check'.localeCompare('against'); // 2 or 1
(or some other positive value)

// "a" and "a" are equivalent yielding a

neutral value of zero
'a'.localeCompare('a'); // 0

Syntax: localeCompare(compareString,
locales, options)

● Negative when the referenceStr occurs

before compareString
● Positive when the referenceStr occurs
after compareString
● Returns 0 if they are equivalent

Explain match() method in

JavaScript
match() is Used for matching a regular
expression against a string
Syntax: regexp:match(targetString,
regExpString[, flagsString])

Explain pop() method in

JavaScript
pop() is an array method that is used to remove
last element of the array.
let arr = [1,2,3,4,5];
arr.pop(); //5
console.log(arr); // [1,2,3,4]

Explain reduce() method in

JavaScript
The reduce() method executes a reducer function
for each value of an array.

array.reduce(function(total, currentValue,
currentIndex, arr), initialValue)

Learn more about how to use reduce function

here:
https://developer.mozilla.org/en-US/docs/We
b/JavaScript/Reference/Global_Objects/Array
/reduce

Explain some() method in

JavaScript
The some() method tests whether at least one
element in the array passes the test implemented
by the provided function. It returns true if, in the
array, it finds an element for which the provided
function returns true; otherwise it returns false. It
doesn't modify the array.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even

const even = (element) => element % 2 ===
0;

console.log(array.some(even));
// expected output: true

Explain toLocaleString() method in

JavaScript
 Return a string value of the current number in a
format that depends on the browser’s locale
settings

Explain toUpperCase() method in

JavaScript
toUpperCase() converts text to uppercase.

const str = "random";

str.toUpperCase(); //'RANDOM'

Explain valueOf() method in

JavaScript
valueOf() returns the primitive value of the
specified object.

How can you convert string to

Number using unary plus?
+"5" // 5 (string to number)
+"" // 0 (string to number)
+"1 + 2" // NaN (doesn't evaluate)
+{} //NaN
Explain various types of error
constructors supported by
JavaScript
1. Generic error constructor: The Error
constructor is responsible for creating an
error object. Instances of the error objects
are thrown when runtime errors occur.
2. EvalError: Creates an error instance
regarding the global function eval().
3. InternalError: Creates an error instance
regarding an internal error in the JS engine
4. RangeError: Creates an error instance
regarding a numeric variable or parameter
that is outside of its valid range.
5. ReferenceError: Creates an error
instance regarding de-referencing an
invalid reference
6. SyntaxError: Creates an error instance
regarding a syntax error occurring while
parsing code in eval().
7. TypeError: Creates an error instance
regarding a parameter or variable not of a
valid type.
8. URIError: Creates an error instance
regarding when invalid parameters are
 passed to the decode URI() or
encodeURI()

Explain the difference between

function declaration and function
expression

What will be the output of the JS

code below? Please explain.
var y = 1;
if (function F(){})
{
y += typeof F;
}

console.log(y);

The output of the aforementioned JavaScript

code will be 1undefined. The if condition
statement in the code evaluates using eval.
Hence, eval(function F(){}) will return function
F(){}.

Inside the if statement, executing typeof F returns

undefined because if the statement code
executes at run time, the statement inside the
condition is evaluated.

What do you understand by

Closures in JavaScript?
What do you mean by Event
Bubbling and Event Capturing?
There are two ways for accomplishing event
propagation and the order in which an event is
received in the HTML DOM API.

These are Event Bubbling and Event Capturing.

The event is directed towards its intended target
in the former, whereas the event goes down to
the latter element.
 ● Event Capturing – Also known as

trickling, Event Capturing is rarely used.

The process starts with the outermost

element capturing the event and then

propagating it to the innermost element.

● Event Bubbling – In this process, the

event gets handled by the innermost

element first and then propagated to the

outermost element.

How can you iterate an object ?

Could you explain escape() and

unescape() functions?
The escape() function allows for converting a
string into a coded form in JavaScript. It is used
for securely transferring information from one
system to another over some network. For
instance, consider the following code snippet:
This%20string%20is%20encoded%21

The output of the aforementioned code snipped

will be something like this:

This%3F%20string%20is%20encoded%21

The unescape() function does the exact opposite

of the escape() function, i.e., it decodes a coded
string into the original string. Therefore, the
following code snippet:

This? string is encoded!

Will yield the following output:

This string is encoded!

What are Generator functions ?

Generator functions are certain type of functions
whose execution is not continuous. They are
written with function* syntax.
When called, they do not initially execute their
code. Instead they return a special type of iterator
called a Generator. When a value is consumed
,the function executes until it encounters the
yield keyword.

The function can be called as many times and

each time a new generator is returned.

function* makeRangeIterator(start = 0, end

= 100, step = 1) {

let iterationCount = 0;

for (let i = start; i < end; i += step)

{

iterationCount++;

yield i;

return iterationCount;

}
What is prototypal Inheritance?
Every object has a property called a prototype,
where we can add methods to it and when you
create another object from these the newly
created object will automatically inherit its
parent’s property

Explain sort() method

sort() is a built-in array method provided by
javascript that sorts the elements of array.

const arr = [1,2,44,-23,32,11];

arr.sort(); //[-23, 1, 11, 2, 32, 44]

Explain reverse() method

sort() is a built in array method provided by
javascript that reverses the elements of array.
const arr = [1,2,44,-23,32,11];

arr.reverse(); //[11, 32, -23, 44, 2, 1]

Answer if the following

expressions result in true or false.
"0" == 0 // true or false ?
"" == 0 // true or false ?
"" == "0" // true or false ?
The result will be True for 1st and 2nd case and
False for the 3rd case.
What is the syntax of ‘Self
Invoking Function’ ?

(function () {

return ();

}();

What is an Iterator
An iterator is an object which defines a sequence
and a return value upon its termination. It
implements the Iterator protocol with a next()
method which returns an object with two properties:
value (the next value in the sequence) and done
(which is true if the last value in the sequence has
been consumed).
How does synchronous iteration
works
Synchronous iteration was introduced in ES6 and it
works with below set of components,

Iterable: It is an object which can be iterated over

via a method whose key is Symbol.iterator. Iterator:
It is an object returned by invoking
[Symbol.iterator]() on an iterable. This iterator
object wraps each iterated element in an object and
returns it via next() method one by one.
IteratorResult: It is an object returned by next()
method. The object contains two properties; the
value property contains an iterated element and the
done property determines whether the element is
the last element or not.

Let's demonstrate synchronous iteration with an

array as below,

const iterable = ['one', 'two', 'three'];

const iterator =
iterable[Symbol.iterator]();
 console.log(iterator.next()); // { value:
'one', done: false }

console.log(iterator.next()); // { value:
'two', done: false }

console.log(iterator.next()); // { value:
'three', done: false }

console.log(iterator.next()); // { value:
'undefined, done: true }

What is an event loop

The Event Loop is a queue of callback functions.
When an async function executes, the callback
function is pushed into the queue. The JavaScript
engine doesn't start processing the event loop until
the async function has finished executing the code.
Note: It allows Node.js to perform non-blocking I/O
operations even though JavaScript is
single-threaded.
What is call stack
Call Stack is a data structure for javascript
interpreters to keep track of function calls in the
program. It has two major actions,

i. Whenever you call a function for its

execution, you are pushing it to the stack.
ii. Whenever the execution is completed, the
function is popped out of the stack.

Let's take an example and it's state representation

in a diagram format

function hungry() {

eatFruits(); }

function eatFruits() {

return "I'm eating fruits";}

// Invoke the `hungry` function

hungry();
The above code processed in a call stack as below,

i. Add the hungry() function to the call stack list

and execute the code.
ii. Add the eatFruits() function to the call stack
list and execute the code.
iii. Delete the eatFruits() function from our call
stack list.
iv. Delete the hungry() function from the call
stack list since there are no items anymore.

What is an Unary operator

The unary(+) operator is used to convert a variable
to a number.If the variable cannot be converted, it
will still become a number but with the value NaN.
Let's see this behavior in an action.
 var x = "100";

var y = + x;

console.log(typeof x, typeof y); // string,

number

var a = "Hello";

var b = + a;

console.log(typeof a, typeof b, b); //

string, number, NaN

What is a decorator
A decorator is an expression that evaluates to a
function and that takes the target, name, and
decorator descriptor as arguments. Also, it
optionally returns a decorator descriptor to install on
the target object. Let's define admin decorator for
user class at design time,
function admin(isAdmin) {

return function(target) {

target.isAdmin = isAdmin;

@admin(true)

class User() {

console.log(User.isAdmin); //true

@admin(false)

class User() {

console.log(User.isAdmin); //false
What is the purpose of
compareFunction while sorting
arrays
The compareFunction is used to define the sort
order. If omitted, the array elements are converted
to strings, then sorted according to each character's
Unicode code point value. Let's take an example to
see the usage of compareFunction,

let numbers = [1, 2, 5, 3, 4];

numbers.sort((a, b) => b - a);

console.log(numbers); // [5, 4, 3, 2, 1]

How do you find min and max

value in an array
You can use Math.min and Math.max methods on
array variables to find the minimum and maximum
elements within an array. Let's create two functions
to find the min and max value with in an array,

var marks = [50, 20, 70, 60, 45, 30];

function findMin(arr) {

return Math.min.apply(null, arr);

function findMax(arr) {

return Math.max.apply(null, arr);

console.log(findMin(marks));

console.log(findMax(marks));
What is an empty statement and
purpose of it
The empty statement is a semicolon (;) indicating
that no statement will be executed, even if
JavaScript syntax requires one. Since there is no
action with an empty statement you might think that
it's usage is quite less, but the empty statement is
occasionally useful when you want to create a loop
that has an empty body. For example, you can
initialize an array with zero values as below,
// Initialize an array a

for(int i=0; i < a.length; a[i++] = 0) ;

How do you get metadata of a

module
You can use the import.meta object which is a
meta-property exposing context-specific meta data
to a JavaScript module. It contains information
about the current module, such as the module's
URL. In browsers, you might get different meta data
than NodeJS.
<script type="module"
src="welcome-module.js"></script>
console.log(import.meta); // { url:
"file:///home/user/welcome-module.js" }

What is a comma operator

The comma operator is used to evaluate each of its
operands from left to right and returns the value of
the last operand. This is totally different from
comma usage within arrays, objects, and function
arguments and parameters. For example, the
usage for numeric expressions would be as below,
var x = 1;

x = (x++, x);

console.log(x); // 2

What is the advantage of a

comma operator
It is normally used to include multiple expressions
in a location that requires a single expression. One
of the common usages of this comma operator is to
supply multiple parameters in a for loop. For
example, the below for loop uses multiple
expressions in a single location using comma
operator,
for (var a = 0, b =10; a <= 10; a++, b--)
You can also use the comma operator in a return
statement where it processes before returning.
function myFunction() {

var a = 1;

return (a += 10, a); // 11

What is typescript
TypeScript is a typed superset of JavaScript
created by Microsoft that adds optional types,
classes, async/await, and many other features, and
compiles to plain JavaScript. Angular built entirely
in TypeScript and used as a primary language. You
can install it globally as
npm install -g typescript
Let's see a simple example of TypeScript usage,
function greeting(name: string): string {

return "Hello, " + name;

let user = "Kiyo";

onsole.log(greeting(user));
The greeting method allows only string type as
argument.

What are the differences

between javascript and
typescript

feature typescript javascript

Language Object oriented Scripting

paradigm programming language
language

Typing Supports static It has dynamic

support typing typing

Modules Supported Not Supported

Interface It has interfaces Doesn't support

concept interfaces

Optional Functions No support of

parameter support optional optional
s parameters parameters for
functions
What are the advantages of
typescript over javascript
Below are some of the advantages of typescript
over javascript,

i. TypeScript is able to find compile time

errors at the development time only
and it makes sures less runtime
errors. Whereas javascript is an
interpreted language.
ii. TypeScript is strongly-typed or
supports static typing which allows for
checking type correctness at compile
time. This is not available in
javascript.
iii. TypeScript compiler can compile the
.ts files into ES3,ES4 and ES5 unlike
ES6 features of javascript which may
not be supported in some browsers.

What is an object initializer

An object initializer is an expression that describes
the initialization of an Object. The syntax for this
expression is represented as a comma-delimited
list of zero or more pairs of property names and
associated values of an object, enclosed in curly
braces ({}). This is also known as literal notation. It
is one of the ways to create an object.
var initObject = {a: 'John', b: 50, c: {}};

console.log(initObject.a); // John

What is a constructor method

The constructor method is a special method for
creating and initializing an object created within a
class. If you do not specify a constructor method, a
default constructor is used. The example usage of
constructor would be as below,
class Employee {

constructor() {

this.name = "John";

var employeeObject = new Employee();

console.log(employeeObject.name); // John
What happens if you write
constructor more than once in a
class
The "constructor" in a class is a special method and
it should be defined only once in a class. i.e, If you
write a constructor method more than once in a
class it will throw a SyntaxError error.
class Employee {

constructor() {

this.name = "John";

constructor() { // Uncaught SyntaxError: A

class may only have one constructor

this.age = 30;

}
 var employeeObject = new Employee();

console.log(employeeObject.name);

How do you call the constructor

of a parent class
You can use the super keyword to call the
constructor of a parent class. Remember that
super() must be called before using 'this' reference.
Otherwise it will cause a reference error. Let's the
usage of it,
class Square extends Rectangle {

constructor(length) {

super(length, length);

this.name = 'Square';

get area() {

return this.width * this.height;

}
 set area(value) {

this.area = value;

How do you get the prototype of

an object
You can use the Object.getPrototypeOf(obj) method
to return the prototype of the specified object. i.e.
The value of the internal prototype property. If there
are no inherited properties then null value is
returned.
const newPrototype = {};

const newObject = Object.create(newPrototype);

console.log(Object.getPrototypeOf(newObject) ===
newPrototype); // true

What happens If I pass string

type for getPrototype method
In ES5, it will throw a TypeError exception if the obj
parameter isn't an object. Whereas in ES2015, the
parameter will be coerced to an Object.
// ES5

Object.getPrototypeOf('James'); // TypeError:
"James" is not an object

// ES2015

Object.getPrototypeOf('James'); //
String.prototype

How do you set prototype of one

object to another
You can use the Object.setPrototypeOf() method
that sets the prototype (i.e., the internal Prototype
property) of a specified object to another object or
null. For example, if you want to set prototype of a
square object to rectangle object would be as
follows,
Object.setPrototypeOf(Square.prototype,
Rectangle.prototype);

Object.setPrototypeOf({}, null)
How do you check whether an
object can be extendable or not
The Object.isExtensible() method is used to
determine if an object is extendable or not. i.e,
Whether it can have new properties added to it or
not.
const newObject = {};

console.log(Object.isExtensible(newObject));
//true
Note: By default, all the objects are extendable. i.e,
The new properties can be added or modified.

How do you prevent an object to

extend
The Object.preventExtensions() method is used to
prevent new properties from ever being added to an
object. In other words, it prevents future extensions
to the object. Let's see the usage of this property,
const newObject = {};

Object.preventExtensions(newObject); // NOT
extendable
try {

Object.defineProperty(newObject, 'newProperty',
{ // Adding new property

value: 100

});

} catch (e) {

console.log(e); // TypeError: Cannot define

property newProperty, object is not extensible

What are the different ways to

make an object non-extensible
You can mark an object non-extensible in 3 ways,

iv. Object.preventExtensions
v. Object.seal
vi. Object.freeze

var newObject = {};

Object.preventExtensions(newObject); // Prevent
objects are non-extensible

Object.isExtensible(newObject); // false

var sealedObject = Object.seal({}); // Sealed

objects are non-extensible

Object.isExtensible(sealedObject); // false

var frozenObject = Object.freeze({}); // Frozen

objects are non-extensible

Object.isExtensible(frozenObject); // false

How do you define multiple

properties on an object
The Object.defineProperties() method is used to
define new or modify existing properties directly on
an object and returning the object. Let's define
multiple properties on an empty object,
const newObject = {};
Object.defineProperties(newObject, {

newProperty1: {

value: 'John',

writable: true

},

newProperty2: {}

})

What is MEAN in javascript

The MEAN (MongoDB, Express, AngularJS, and
Node.js) stack is the most popular open-source
JavaScript software tech stack available for building
dynamic web apps where you can write both the
server-side and client-side halves of the web
project entirely in JavaScript.

What Is Obfuscation in
javascript
Obfuscation is the deliberate act of creating
obfuscated javascript code(i.e, source or machine
code) that is difficult for humans to understand. It is
something similar to encryption, but a machine can
understand the code and execute it. Let's see the
below function before Obfuscation,
function greeting() {

console.log('Hello, welcome to JS world');

And after the code Obfuscation, it would be

appeared as below,

eval(function(p,a,c,k,e,d){e=function(c){re
turn
c};if(!''.replace(/^/,String)){while(c--){d
[c]=k[c]||c}k=[function(e){return
d[e]}];e=function(){return'\\w+'};c=1};whil
e(c--){if(k[c]){p=p.replace(new
RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return
p}('2 1(){0.3(\'4, 7 6 5
8\')}',9,9,'console|greeting|function|log|H
ello|JS|to|welcome|world'.split('|'),0,{}))
Why do you need Obfuscation
Below are the few reasons for Obfuscation,

vii. The Code size will be reduced. So

data transfers between server and
client will be fast.
viii.It hides the business logic from
outside world and protects the code
from others
ix. Reverse engineering is highly difficult
x. The download time will be reduced

What is Minification
Minification is the process of removing all
unnecessary characters(empty spaces are
removed) and variables will be renamed without
changing it's functionality. It is also a type of
obfuscation .

What are the advantages of

minification
Normally it is recommended to use minification for
heavy traffic and intensive requirements of
resources. It reduces file sizes with below benefits,

1. Decreases loading times of a web page

2. Saves bandwidth usages

What are the differences

between Obfuscation and
Encryption
Below are the main differences between
Obfuscation and Encryption,

Feature Obfuscation Encryption

Definition Changing the form Changing the

of any data in any form of
other form information to
an unreadable
format by using
a key

A key to It can be decoded It is required

decode without any key

Target data It will be converted Converted into

format to a complex form an unreadable
format
What are the common tools used
for minification
There are many online/offline tools to minify the
javascript files,

1. Google's Closure Compiler

2. UglifyJS2
3. jsmin
4. javascript-minifier.com/
5. prettydiff.com

How do you perform form

validation using javascript
JavaScript can be used to perform HTML form
validation. For example, if the form field is empty,
the function needs to notify, and return false, to
prevent the form being submitted. Lets' perform
user login in an html form,
<form name="myForm" onsubmit="return
validateForm()" method="post">

User name: <input type="text" name="uname">

<input type="submit" value="Submit">

</form>
And the validation on user login is below,
function validateForm() {

var x = document.forms["myForm"]["uname"].value;

if (x == "") {

alert("The username shouldn't be empty");

return false;

How do you perform form

validation without javascript
You can perform HTML form validation
automatically without using javascript. The
validation enabled by applying the required attribute
to prevent form submission when the input is
empty.
<form method="post">
 <input type="text" name="uname" required>

<input type="submit" value="Submit">

</form>
Note: Automatic form validation does not work in
Internet Explorer 9 or earlier.

What are the DOM methods

available for constraint
validation
The below DOM methods are available for
constraint validation on an invalid input,

1. checkValidity(): It returns true if an input

element contains valid data.
2. setCustomValidity(): It is used to set the
validationMessage property of an input
element. Let's take an user login form with
DOM validations

function myFunction() {

var userName = document.getElementById("uname");

if (!userName.checkValidity()) {
 document.getElementById("message").innerHTML =
userName.validationMessage;

} else {

document.getElementById("message").innerHTML =
"Entered a valid username";

What are the available constraint

validation DOM properties
Below are the list of some of the constraint
validation DOM properties available,

1. validity: It provides a list of boolean

properties related to the validity of an input
element.
2. validationMessage: It displays the message
when the validity is false.
3. willValidate: It indicates if an input element
will be validated or not.
What are the list of validity
properties
The validity property of an input element provides a
set of properties related to the validity of data.

i. customError: It returns true, if a custom

validity message is set.
ii. patternMismatch: It returns true, if an
element's value does not match its pattern
attribute.
iii. rangeOverflow: It returns true, if an
element's value is greater than its max
attribute.
iv. rangeUnderflow: It returns true, if an
element's value is less than its min attribute.
v. stepMismatch: It returns true, if an element's
value is invalid according to step attribute.
vi. tooLong: It returns true, if an element's value
exceeds its maxLength attribute.
vii. typeMismatch: It returns true, if an element's
value is invalid according to type attribute.
viii.valueMissing: It returns true, if an element
with a required attribute has no value.
ix. valid: It returns true, if an element's value is
valid.
Give an example usage of
rangeOverflow property
If an element's value is greater than its max
attribute then rangeOverflow property returns true.
For example, the below form submission throws an
error if the value is more than 100,

<input id="age" type="number" max="100">

<button
onclick="myOverflowFunction()">OK</button>

function myOverflowFunction() {

if
(document.getElementById("age").validity.ra
ngeOverflow) {

alert("The mentioned age is not

allowed");
 }

Is enums feature available in

javascript
No, javascript does not natively support enums. But
there are different kinds of solutions to simulate
them even though they may not provide exact
equivalents. For example, you can use freeze or
seal on object,
var DaysEnum = Object.freeze({"monday":1,
"tuesday":2, "wednesday":3, ...})

What is an enum
An enum is a type restricting variables to one value
from a predefined set of constants. JavaScript has
no enums but typescript provides built-in enum
support.
enum Color {
RED, GREEN, BLUE
}
How do you list all properties of
an object
You can use the Object.getOwnPropertyNames()
method which returns an array of all properties
found directly in a given object. Let's the usage of it
in an example,
const newObject = {
a: 1,
b: 2,
c: 3
};

console.log(Object.getOwnPropertyNames(newObject))
; ["a", "b", "c"]

How do you get property

descriptors of an object
You can use the
Object.getOwnPropertyDescriptors() method which
returns all own property descriptors of a given
object. The example usage of this method is below,
const newObject = {
a: 1,
b: 2,
c: 3
};
const descriptorsObject =
Object.getOwnPropertyDescriptors(newObject);
console.log(descriptorsObject.a.writable); //true
console.log(descriptorsObject.a.configurable);
//true
console.log(descriptorsObject.a.enumerable);
//true
console.log(descriptorsObject.a.value); // 1

What are the attributes provided

by a property descriptor
A property descriptor is a record which has the
following attributes

i. value: The value associated with the

property
ii. writable: Determines whether the
value associated with the property
can be changed or not
iii. configurable: Returns true if the type
of this property descriptor can be
changed and if the property can be
deleted from the corresponding
object.
iv. enumerable: Determines whether the
property appears during enumeration
of the properties on the corresponding
object or not.
v. set: A function which serves as a
setter for the property
 vi. get: A function which serves as a
getter for the property

How do you extend classes

The extends keyword is used in class
declarations/expressions to create a class which is
a child of another class. It can be used to subclass
custom classes as well as built-in objects. The
syntax would be as below,
class ChildClass extends ParentClass { ... }
Let's take an example of Square subclass from
Polygon parent class,
class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = 'Square';
}

get area() {
return this.width * this.height;
}

set area(value) {
this.area = value;
}
}

How do I modify the url without

reloading the page
The window.location.url property will be helpful to
modify the url but it reloads the page. HTML5
introduced the history.pushState() and
history.replaceState() methods, which allow you to
add and modify history entries, respectively. For
example, you can use pushState as below,
window.history.pushState('page2', 'Title',
'/page2.html');

How do you check whether an

array includes a particular value
or not
The Array#includes() method is used to determine
whether an array includes a particular value among
its entries by returning either true or false. Let's see
an example to find an element(numeric and string)
within an array.
var numericArray = [1, 2, 3, 4];
console.log(numericArray.includes(3)); // true

var stringArray = ['green', 'yellow', 'blue'];

console.log(stringArray.includes('blue')); //true

How do you compare scalar

arrays
You can use length and every method of arrays to
compare two scalar(compared directly using ===)
arrays. The combination of these expressions can
give the expected result,
const arrayFirst = [1,2,3,4,5];
const arraySecond = [1,2,3,4,5];
console.log(arrayFirst.length ===
arraySecond.length && arrayFirst.every((value,
index) => value === arraySecond[index])); // true
If you would like to compare arrays irrespective of
order then you should sort them before,
const arrayFirst = [2,3,1,4,5];
const arraySecond = [1,2,3,4,5];
console.log(arrayFirst.length ===
arraySecond.length &&
arrayFirst.sort().every((value, index) => value
=== arraySecond[index])); //true

How to get the value from get

parameters
The new URL() object accepts the url string and
searchParams property of this object can be used to
access the get parameters. Remember that you
may need to use polyfill or window.location to
access the URL in older browsers(including IE).
let urlString =
"http://www.some-domain.com/about.html?x=1&y=2&z=3
"; //window.location.href
let url = new URL(urlString);
let parameterZ = url.searchParams.get("z");
console.log(parameterZ); // 3
How do you print numbers with
commas as thousand separators
You can use the Number.prototype.toLocaleString()
method which returns a string with a
language-sensitive representation such as
thousand separator,currency etc of this number.
function convertToThousandFormat(x){
return x.toLocaleString(); // 12,345.679
}

console.log(convertToThousandFormat(12345.6789));

What is the difference between

java and javascript
Both are totally unrelated programming languages
and no relation between them. Java is statically
typed, compiled, runs on its own VM. Whereas
Javascript is dynamically typed, interpreted, and
runs in a browser and nodejs environments. Let's
see the major differences in a tabular format,

feature Java Javascript

Typed It's a strongly It's a dynamic

typed language typed language

Paradigm Object oriented Prototype based

 programming programming

Scoping Block scoped Function-scoped

Concurren Thread based event based

cy

Memory Uses more Uses less memory.

memory Hence it will be
used for web
pages

Does JavaScript supports

namespace
JavaScript doesn’t support namespace by default.
So if you create any element(function, method,
object, variable) then it becomes global and
pollutes the global namespace. Let's take an
example of defining two functions without any
namespace,
function func1() {
console.log("This is a first definition");

}
function func1() {
console.log("This is a second definition");
}
func1(); // This is a second definition
It always calls the second function definition. In this
case, namespace will solve the name collision
problem.

How do you declare namespace

Even though JavaScript lacks namespaces, we can
use Objects , IIFE to create namespaces.

vii. Using Object Literal Notation: Let's

wrap variables and functions inside an
Object literal which acts as a
namespace. After that you can access
them using object notation

var namespaceOne = {
function func1() {
console.log("This is a first definition");
}
}
var namespaceTwo = {
function func1() {
console.log("This is a second
definition");
}
}
namespaceOne.func1(); // This is a first
definition
namespaceTwo.func1(); // This is a second
definition

viii.Using IIFE (Immediately invoked

function expression): The outer pair
 of parentheses of IIFE creates a local
scope for all the code inside of it and
makes the anonymous function a
function expression. Due to that, you
can create the same function in two
different function expressions to act
as a namespace.

(function() {
function fun1(){
console.log("This is a first definition");
} fun1();
}());

(function() {
function fun1(){
console.log("This is a second definition");
} fun1();
}());

ix. Using a block and a let/const

declaration: In ECMAScript 6, you
can simply use a block and a let
declaration to restrict the scope of a
variable to a block.

{
let myFunction= function fun1(){
console.log("This is a first definition");
}
myFunction();
 }
//myFunction(): ReferenceError: myFunction is
not defined.

{
let myFunction= function fun1(){
console.log("This is a second definition");
}
myFunction();
}
//myFunction(): ReferenceError: myFunction is not
defined

How do you invoke javascript

code in an iframe from parent
page
Initially iFrame needs to be accessed using either
document.getElementBy or window.frames. After that
contentWindow property of iFrame gives the access
for targetFunction
document.getElementById('targetFrame').contentWind
ow.targetFunction();
window.frames[0].frameElement.contentWindow.target
Function(); // Accessing iframe this way may not
work in latest versions chrome and firefox

How do get the timezone offset

from date
You can use the getTimezoneOffset method of the
date object. This method returns the time zone
difference, in minutes, from current locale (host
system settings) to UTC
var offset = new Date().getTimezoneOffset();
console.log(offset); // -480

How do you load CSS and JS

files dynamically
You can create both link and script elements in the
DOM and append them as child to head tag. Let's
create a function to add script and style resources
as below,
function loadAssets(filename, filetype) {
if (filetype == "css") { // External CSS file
var fileReference =
document.createElement("link")
fileReference.setAttribute("rel",
"stylesheet");
fileReference.setAttribute("type",
"text/css");
fileReference.setAttribute("href",
filename);
} else if (filetype == "js") { // External
JavaScript file
var fileReference =
document.createElement('script');
fileReference.setAttribute("type",
"text/javascript");
 fileReference.setAttribute("src",
filename);
}
if (typeof fileReference != "undefined")

document.getElementsByTagName("head")[0].appendChi
ld(fileReference)
}

What are the different methods

to find HTML elements in DOM
If you want to access any element in an HTML
page, you need to start with accessing the
document object. Later you can use any of the
below methods to find the HTML element,

x. document.getElementById(id): It finds
an element by Id
xi. document.getElementsByTagName(n
ame): It finds an element by tag name
xii. document.getElementsByClassName(
name): It finds an element by class
name

What is jQuery
jQuery is a popular cross-browser JavaScript library
that provides Document Object Model (DOM)
traversal, event handling, animations and AJAX
interactions by minimizing the discrepancies across
browsers. It is widely famous with its philosophy of
“Write less, do more”. For example, you can display
welcome message on the page load using jQuery
as below,
$(document).ready(function(){ // It selects the
document and apply the function on page load
alert('Welcome to jQuery world');
});
Note: You can download it from jquery's official site
or install it from CDNs, like google.

What is V8 JavaScript engine

V8 is an open source high-performance JavaScript
engine used by the Google Chrome browser,
written in C++. It is also being used in the node.js
project. It implements ECMAScript and
WebAssembly, and runs on Windows 7 or later,
macOS 10.12+, and Linux systems that use x64,
IA-32, ARM, or MIPS processors. Note: It can run
standalone, or can be embedded into any C++
application.

Why do we call javascript as

dynamic language
JavaScript is a loosely typed or a dynamic
language because variables in JavaScript are not
directly associated with any particular value type,
and any variable can be assigned/reassigned with
values of all types.
let age = 50; // age is a number now
age = 'old'; // age is a string now
age = true; // age is a boolean

What is a void operator

The void operator evaluates the given expression
and then returns undefined(i.e, without returning
value). The syntax would be as below,
void (expression)
void expression
Let's display a message without any redirection or
reload
<a href="javascript:void(alert('Welcome to JS
world'))">Click here to see a message</a>
Note: This operator is often used to obtain the
undefined primitive value, using "void(0)"

How to set the cursor to wait

The cursor can be set to wait in JavaScript by using
the property "cursor". Let's perform this behavior on
page load using the below function.
function myFunction() {
window.document.body.style.cursor = "wait";
}
and this function invoked on page load
<body onload="myFunction()">
How do you create an infinite
loop
You can create infinite loops using for and while
loops without using any expressions. The for loop
construct or syntax is better approach in terms of
ESLint and code optimizer tools,
for (;;) {}

while(true) {
}

What is the output of below for

loops
for (var i = 0; i < 4; i++) { // global scope

setTimeout(() => console.log(i));

for (let i = 0; i < 4; i++) { // block scope

setTimeout(() => console.log(i));

}
The output of the above for loops is 4 4 4 4 and 0 1
23
Explanation: Due to the event queue/loop of
javascript, the setTimeout callback function is called
after the loop has been executed. Since the
variable i is declared with the var keyword it
became a global variable and the value was equal
to 4 using iteration when the time setTimeout
function is invoked. Hence, the output of the first
loop is 4 4 4 4.
Whereas in the second loop, the variable i is
declared as the let keyword it becomes a block
scoped variable and it holds a new value(0, 1 ,2 3)
for each iteration. Hence, the output of the first loop
is 0 1 2 3.

List down some of the features

of ES6
Below are the list of some new features of ES6,

i. Support for constants or immutable

variables
ii. Block-scope support for variables,
constants and functions
iii. Arrow functions
iv. Default parameters
 v. Rest and Spread Parameters
vi. Template Literals
vii. Multi-line Strings
viii.Destructuring Assignment
ix. Enhanced Object Literals
x. Promises
xi. Classes
xii. Modules

What is ES6
ES6 is the sixth edition of the javascript language
and it was released in June 2015. It was initially
known as ECMAScript 6 (ES6) and later renamed
to ECMAScript 2015. Almost all the modern
browsers support ES6 but for the old browsers
there are many transpilers, like Babel.js etc.

Can I redeclare let and const

variables
No, you cannot redeclare let and const variables. If
you do, it throws below error
Uncaught SyntaxError: Identifier 'someVariable'
has already been declared
Explanation: The variable declaration with var
keyword refers to a function scope and the variable
is treated as if it were declared at the top of the
enclosing scope due to hoisting feature. So all the
multiple declarations contributing to the same
hoisted variable without any error. Let's take an
example of re-declaring variables in the same
scope for both var and let/const variables.
var name = 'John';

function myFunc() {

var name = 'Nick';

var name = 'Abraham'; // Re-assigned in the

same function block

alert(name); // Abraham

myFunc();

alert(name); // John
The block-scoped multi-declaration throws syntax
error,
let name = 'John';

function myFunc() {
 let name = 'Nick';

let name = 'Abraham'; // Uncaught SyntaxError:

Identifier 'name' has already been declared

alert(name);

myFunc();

alert(name);

Is const variable makes the

value immutable
No, the const variable doesn't make the value
immutable. But it disallows subsequent
assignments(i.e, You can declare with assignment
but can't assign another value later)
const userList = [];

userList.push('John'); // Can mutate even though

it can't re-assign
console.log(userList); // ['John']

What are default parameters

In E5, we need to depend on logical OR operators
to handle default values of function parameters.
Whereas in ES6, Default function parameters
feature allows parameters to be initialized with
default values if no value or undefined is passed.
Let's compare the behavior with an examples,
//ES5

var calculateArea = function(height, width) {

height = height || 50;

width = width || 60;

return width * height;

console.log(calculateArea()); //300
The default parameters makes the initialization
more simpler,
//ES6

var calculateArea = function(height = 50, width =

60) {

return width * height;

console.log(calculateArea()); //300

What are template literals

Template literals or template strings are string
literals allowing embedded expressions. These are
enclosed by the back-tick (`) character instead of
double or single quotes. In E6, this feature enables
using dynamic expressions as below,
var greeting = `Welcome to JS World, Mr.
${firstName} ${lastName}.`
In ES5, you need break string like below,
var greeting = 'Welcome to JS World, Mr. ' +
firstName + ' ' + lastName.`
Note: You can use multi-line strings and string
interpolation features with template literals.
How do you write multi-line
strings in template literals
In ES5, you would have to use newline escape
characters('\n') and concatenation symbols(+) in
order to get multi-line strings.
console.log('This is string sentence 1\n' +

'This is string sentence 2');

Whereas in ES6, You don't need to mention any
newline sequence character,
console.log(`This is string sentence

'This is string sentence 2`);

What are nesting templates

The nesting template is a feature supported within
template literals syntax to allow inner backticks
inside a placeholder ${ } within the template. For
example, the below nesting template is used to
display the icons based on user permissions
whereas outer template checks for platform type,
const iconStyles = `icon ${ isMobilePlatform() ?
'' :

`icon-${user.isAuthorized ? 'submit' :
'disabled'}` }`;
You can write the above use case without nesting
template features as well. However, the nesting
template feature is more compact and readable.
//Without nesting templates

const iconStyles = `icon ${ isMobilePlatform() ?

'' : (user.isAuthorized ? 'icon-submit' :
'icon-disabled'}`;

What are tagged templates

Tagged templates are the advanced form of
templates in which tags allow you to parse template
literals with a function. The tag function accepts the
first parameter as an array of strings and remaining
parameters as expressions. This function can also
return manipulated strings based on parameters.
Let's see the usage of this tagged template
behavior of an IT professional skill set in an
organization,
var user1 = 'John';

var skill1 = 'JavaScript';

var experience1 = 15;

var user2 = 'Kane';

var skill2 = 'JavaScript';

var experience2 = 5;

function myInfoTag(strings, userExp,

experienceExp, skillExp) {

var str0 = strings[0]; // "Mr/Ms. "

var str1 = strings[1]; // " is a/an "

var str2 = strings[2]; // "in"

var expertiseStr;

if (experienceExp > 10){

expertiseStr = 'expert developer';

 } else if(skillExp > 5 && skillExp <= 10) {

expertiseStr = 'senior developer';

} else {

expertiseStr = 'junior developer';

return
`${str0}${userExp}${str1}${expertiseStr}${str2}${s
killExp}`;

var output1 = myInfoTag`Mr/Ms. ${ user1 } is a/an

${ experience1 } in ${skill1}`;

var output2 = myInfoTag`Mr/Ms. ${ user2 } is a/an

${ experience2 } in ${skill2}`;
console.log(output1);// Mr/Ms. John is a/an expert
developer in JavaScript

console.log(output2);// Mr/Ms. Kane is a/an junior

developer in JavaScript

What are raw strings

ES6 provides a raw strings feature using the
String.raw() method which is used to get the raw
string form of template strings. This feature allows
you to access the raw strings as they were entered,
without processing escape sequences. For
example, the usage would be as below,
var calculationString = String.raw `The sum of
numbers is \n${1+2+3+4}!`;

console.log(calculationString); // The sum of

numbers is 10
If you don't use raw strings, the newline character
sequence will be processed by displaying the
output in multiple lines
var calculationString = `The sum of numbers is
\n${1+2+3+4}!`;

console.log(calculationString);
// The sum of numbers is

// 10
Also, the raw property is available on the first
argument to the tag function
function tag(strings) {

console.log(strings.raw[0]);

What is destructuring
assignment
The destructuring assignment is a JavaScript
expression that makes it possible to unpack values
from arrays or properties from objects into distinct
variables. Let's get the month values from an array
using destructuring assignment
var [one, two, three] = ['JAN', 'FEB', 'MARCH'];

console.log(one); // "JAN"

console.log(two); // "FEB"
console.log(three); // "MARCH"
and you can get user properties of an object using
destructuring assignment,
var {name, age} = {name: 'John', age: 32};

console.log(name); // John

console.log(age); // 3

What are default values in

destructuring assignment
A variable can be assigned a default value when
the value unpacked from the array or object is
undefined during destructuring assignment. It helps
to avoid setting default values separately for each
assignment. Let's take an example for both arrays
and object use cases,
Arrays destructuring:
var x, y, z;

[x=2, y=4, z=6] = [10];

console.log(x); // 10
console.log(y); // 4

console.log(z); // 6
Objects destructuring:
var {x=2, y=4, z=6} = {x: 10};

console.log(x); // 10

console.log(y); // 4

console.log(z); // 6

How do you swap variables in

destructuring assignment
If you don't use destructuring assignment,
swapping two values requires a temporary variable.
Whereas using a destructuring feature, two variable
values can be swapped in one destructuring
expression. Let's swap two number variables in
array destructuring assignment,
var x = 10, y = 20;
[x, y] = [y, x];

console.log(x); // 20

console.log(y); // 10

What are enhanced object

literals
Object literals make it easy to quickly create objects
with properties inside the curly braces. For
example, it provides shorter syntax for common
object property definition as below.
//ES6

var x = 10, y = 20

obj = { x, y }

console.log(obj); // {x: 10, y:20}

//ES5

var x = 10, y = 20

obj = { x : x, y : y}
console.log(obj); // {x: 10, y:20}

What are dynamic imports

The dynamic imports using import() function syntax
allows us to load modules on demand by using
promises or the async/await syntax. Currently this
feature is in stage4 proposal. The main advantage
of dynamic imports is reduction of our bundle's
sizes, the size/payload response of our requests
and overall improvements in the user experience.
The syntax of dynamic imports would be as below,
import('./Module').then(Module =>
Module.method());

What are the use cases for

dynamic imports
Below are some of the use cases of using dynamic
imports over static imports,

xiii.Import a module on-demand or

conditionally. For example, if you want
to load a polyfill on legacy browser

if (isLegacyBrowser()) {

import(···)
 .then(···);

xiv.Compute the module specifier at

runtime. For example, you can use it
for internationalization.

import(`messages_${getLocale()}.js`).then(···);

xv. Import a module from within a regular

script instead a module.

What are typed arrays

Typed arrays are array-like objects from
ECMAScript 6 API for handling binary data.
JavaScript provides 8 Typed array types,

1. Int8Array: An array of 8-bit signed integers

2. Int16Array: An array of 16-bit signed integers
3. Int32Array: An array of 32-bit signed integers
4. Uint8Array: An array of 8-bit unsigned
integers
5. Uint16Array: An array of 16-bit unsigned
integers
6. Uint32Array: An array of 32-bit unsigned
integers
7. Float32Array: An array of 32-bit floating point
numbers
 8. Float64Array: An array of 64-bit floating point
numbers

For example, you can create an array of 8-bit

signed integers as below
const a = new Int8Array();

// You can pre-allocate n bytes

const bytes = 1024

const a = new Int8Array(bytes)

What is a freeze method

The freeze() method is used to freeze an object.
Freezing an object does not allow adding new
properties to an object,prevents from removing and
prevents changing the enumerability, configurability,
or writability of existing properties. i.e, It returns the
passed object and does not create a frozen copy.
const obj = {

prop: 100

};
Object.freeze(obj);

obj.prop = 200; // Throws an error in strict mode

console.log(obj.prop); //100
Note: It causes a TypeError if the argument passed
is not an object.

What is the purpose of freeze

method
Below are the main benefits of using freeze
method,

i. It is used for freezing objects and

arrays.
ii. It is used to make an object
immutable.

Why do I need to use freeze

method
In the Object-oriented paradigm, an existing API
contains certain elements that are not intended to
be extended, modified, or re-used outside of their
current context. Hence it works as the final
keyword which is used in various languages.
How do you detect a browser
language preference
You can use navigator object to detect a browser
language preference as below,
var language = navigator.languages &&
navigator.languages[0] || // Chrome / Firefox

navigator.language || // All browsers

navigator.userLanguage; // IE <= 10

console.log(language);

How to convert string to title

case with javascript
Title case means that the first letter of each word is
capitalized. You can convert a string to title case
using the below function,
function toTitleCase(str) {

return str.replace(

/\w\S*/g,

function(txt) {

return txt.charAt(0).toUpperCase()
+ txt.substr(1).toLowerCase();
 }

);

toTitleCase("good morning john"); // Good Morning

John

How do you detect javascript

disabled in the page
You can use the <noscript> tag to detect javascript
disabled or not. The code block inside <noscript>
gets executed when JavaScript is disabled, and is
typically used to display alternative content when
the page generated in JavaScript.
<script type="javascript">

// JS related code goes here

</script>

<noscript>

<a href="next_page.html?noJS=true">JavaScript
is disabled in the page. Please click Next
Page</a>

</noscript>
What are various operators
supported by javascript
An operator is capable of
manipulating(mathematical and logical
computations) a certain value or operand. There
are various operators supported by JavaScript as
below,

2. Arithmetic Operators: Includes + (Addition),–

(Subtraction), * (Multiplication), / (Division),
% (Modulus), + + (Increment) and – –
(Decrement)
3. Comparison Operators: Includes =
=(Equal),!= (Not Equal), ===(Equal with
type), > (Greater than),> = (Greater than or
Equal to),< (Less than),<= (Less than or
Equal to)
4. Logical Operators: Includes &&(Logical
AND),||(Logical OR),!(Logical NOT)
5. Assignment Operators: Includes =
(Assignment Operator), += (Add and
Assignment Operator), – = (Subtract and
Assignment Operator), *= (Multiply and
Assignment), /= (Divide and Assignment),
%= (Modules and Assignment)
6. Ternary Operators: It includes conditional(: ?)
Operator
 7. typeof Operator: It uses to find type of
variable. The syntax looks like typeof
variable

What is a rest parameter

Rest parameter is an improved way to handle
function parameters which allows us to represent
an indefinite number of arguments as an array. The
syntax would be as below,
function f(a, b, ...theArgs) {

// ...

}
For example, let's take a sum example to calculate
on dynamic number of parameters,
function total(…args){

let sum = 0;

for(let i of args){

sum+=i;

return sum;

console.log(fun(1,2)); //3
console.log(fun(1,2,3)); //6

console.log(fun(1,2,3,4)); //13

console.log(fun(1,2,3,4,5)); //15
Note: Rest parameter is added in ES2015 or ES6

What happens if you do not use

rest parameter as a last
argument
The rest parameter should be the last argument, as
its job is to collect all the remaining arguments into
an array. For example, if you define a function like
below it doesn’t make any sense and will throw an
error.
function someFunc(a,…b,c){

//You code goes here

return;

What are the bitwise operators

available in javascript
Below are the list of bitwise logical operators used
in JavaScript
 i. Bitwise AND ( & )
ii. Bitwise OR ( | )
iii. Bitwise XOR ( ^ )
iv. Bitwise NOT ( ~ )
v. Left Shift ( << )
vi. Sign Propagating Right Shift ( >> )
vii. Zero fill Right Shift ( >>> )

What is a spread operator

Spread operator allows iterables( arrays / objects /
strings ) to be expanded into single
arguments/elements. Let's take an example to see
this behavior,
function calculateSum(x, y, z) {

return x + y + z;

const numbers = [1, 2, 3];

console.log(calculateSum(...numbers)); // 6

How do you determine whether

object is frozen or not
Object.isFrozen() method is used to determine if an
object is frozen or not.An object is frozen if all of the
below conditions hold true,

1. If it is not extensible.
2. If all of its properties are
non-configurable.
3. If all its data properties are
non-writable. The usage is going to be
as follows,

const object = {

property: 'Welcome JS world'

};

Object.freeze(object);

console.log(Object.isFrozen(object));

How do you determine two

values same or not using object
The Object.is() method determines whether two
values are the same value. For example, the usage
with different types of values would be,
Object.is('hello', 'hello'); // true

Object.is(window, window); // true

Object.is([], []) // false
Two values are the same if one of the following
holds:

1. both undefined
2. both null
3. both true or both false
4. both strings of the same length with
the same characters in the same
order
5. both the same object (means both
object have same reference)
6. both numbers and both +0 both -0
both NaN both non-zero and both not
NaN and both have the same value.

What is the purpose of using

object is method
Some of the applications of Object's is method are
follows,

1. It is used for comparison of two strings.

2. It is used for comparison of two numbers.
3. It is used for comparing the polarity of two
numbers.
4. It is used for comparison of two objects.
How do you copy properties
from one object to other
You can use the Object.assign() method which is
used to copy the values and properties from one or
more source objects to a target object. It returns the
target object which has properties and values
copied from the target object. The syntax would be
as below,
Object.assign(target, ...sources)
Let's take example with one source and one target
object,
const target = { a: 1, b: 2 };

const source = { b: 3, c: 4 };

const returnedTarget = Object.assign(target,

source);

console.log(target); // { a: 1, b: 3, c: 4 }

console.log(returnedTarget); // { a: 1, b: 3, c: 4
}
As observed in the above code, there is a common
property(b) from source to target so it's value has
been overwritten.
What are the applications of
assign method
Below are the some of main applications of
Object.assign() method,

1. It is used for cloning an object.

2. It is used to merge objects with the
same properties.

What is a proxy object

The Proxy object is used to define custom behavior
for fundamental operations such as property
lookup, assignment, enumeration, function
invocation, etc. The syntax would be as follows,
var p = new Proxy(target, handler);
Let's take an example of proxy object,
var handler = {

get: function(obj, prop) {

return prop in obj ?

obj[prop] :

100;

};
var p = new Proxy({}, handler);

p.a = 10;

p.b = null;

console.log(p.a, p.b); // 10, null

console.log('c' in p, p.c); // false, 100

In the above code, it uses get handler which define
the behavior of the proxy when an operation is
performed on it

What is the purpose of seal

method
The Object.seal() method is used to seal an object,
by preventing new properties from being added to it
and marking all existing properties as
non-configurable. But values of present properties
can still be changed as long as they are writable.
Let's see the below example to understand more
about seal() method
const object = {

property: 'Welcome JS world'

};

Object.seal(object);
 object.property = 'Welcome to object world';

console.log(Object.isSealed(object)); // true

delete object.property; // You cannot delete when

sealed

console.log(object.property); //Welcome to object

world

What are the applications of seal

method
Below are the main applications of Object.seal()
method,

1. It is used for sealing objects and arrays.

2. It is used to make an object immutable.

What are the differences

between freeze and seal
methods
If an object is frozen using the Object.freeze()
method then its properties become immutable and
no changes can be made in them whereas if an
object is sealed using the Object.seal() method
then the changes can be made in the existing
properties of the object.

How do you determine if an

object is sealed or not
The Object.isSealed() method is used to determine
if an object is sealed or not. An object is sealed if all
of the below conditions hold true

1. If it is not extensible.
2. If all of its properties are non-configurable.
3. If it is not removable (but not necessarily
non-writable). Let's see it in the action

const object = {

property: 'Hello, Good morning'

};

Object.seal(object); // Using seal() method to

seal the object

console.log(Object.isSealed(object)); //
checking whether the object is sealed or not
How do you get enumerable key
and value pairs
The Object.entries() method is used to return an
array of a given object's own enumerable
string-keyed property [key, value] pairs, in the same
order as that provided by a for...in loop. Let's see
the functionality of object.entries() method in an
example,
const object = {

a: 'Good morning',

b: 100

};

for (let [key, value] of Object.entries(object)) {

console.log(`${key}: ${value}`); // a: 'Good

morning'

// b: 100

}
Note: The order is not guaranteed as object
defined.
What is the main difference
between Object.values and
Object.entries method
The Object.values() method's behavior is similar to
Object.entries() method but it returns an array of
values instead [key,value] pairs.
const object = {

a: 'Good morning',

b: 100

};

for (let value of Object.values(object)) {

console.log(`${value}`); // 'Good morning'

100}

How can you get the list of keys

of any object
You can use the Object.keys() method which is
used to return an array of a given object's own
property names, in the same order as we get with a
normal loop. For example, you can get the keys of
a user object,
const user = {

name: 'John',

gender: 'male',

age: 40

};

console.log(Object.keys(user)); //['name',
'gender', 'age']

How do you create an object

with prototype
The Object.create() method is used to create a new
object with the specified prototype object and
properties. i.e, It uses an existing object as the
prototype of the newly created object. It returns a
new object with the specified prototype object and
properties.
const user = {

name: 'John',

printInfo: function () {

console.log(`My name is ${this.name}.`);

 }

};

const admin = Object.create(user);

admin.name = "Nick"; // Remember that "name" is a

property set on "admin" but not on "user" object

admin.printInfo(); // My name is Nick

What is a WeakSet
WeakSet is used to store a collection of
weakly(weak references) held objects. The syntax
would be as follows,
new WeakSet([iterable]);
Let's see the below example to explain it's behavior,
var ws = new WeakSet();

var user = {};

ws.add(user);

ws.has(user); // true

ws.delete(user); // removes user from the set

ws.has(user); // false, user has been removed

What are the differences

between WeakSet and Set
The main difference is that references to objects in
Set are strong while references to objects in
WeakSet are weak. i.e, An object in WeakSet can
be garbage collected if there is no other reference
to it. Other differences are,

1. Sets can store any value Whereas

WeakSets can store only collections of
objects
2. WeakSet does not have size property unlike
Set
3. WeakSet does not have methods such as
clear, keys, values, entries, forEach.
4. WeakSet is not iterable.

List down the collection of

methods available on WeakSet
Below are the list of methods available on
WeakSet,
 1. add(value): A new object is appended with
the given value to the weakset
2. delete(value): Deletes the value from the
WeakSet collection.
3. has(value): It returns true if the value is
present in the WeakSet Collection, otherwise
it returns false.

Let's see the functionality of all the above methods

in an example,
var weakSetObject = new WeakSet();

var firstObject = {};

var secondObject = {};

// add(value)

weakSetObject.add(firstObject);

weakSetObject.add(secondObject);

console.log(weakSetObject.has(firstObject));
//true

weakSetObject.delete(secondObject);
What is a WeakMap
The WeakMap object is a collection of key/value
pairs in which the keys are weakly referenced. In
this case, keys must be objects and the values can
be arbitrary values. The syntax is looking like as
below,
new WeakMap([iterable])
Let's see the below example to explain it's behavior,
var ws = new WeakMap();

var user = {};

ws.set(user);

ws.has(user); // true

ws.delete(user); // removes user from the map

ws.has(user); // false, user has been removed

What are the differences

between WeakMap and Map
The main difference is that references to key
objects in Map are strong while references to key
objects in WeakMap are weak. i.e, A key object in
WeakMap can be garbage collected if there is no
other reference to it. Other differences are,
 1. Maps can store any key type Whereas
WeakMaps can store only collections of key
objects
2. WeakMap does not have size property unlike
Map
3. WeakMap does not have methods such as
clear, keys, values, entries, forEach.
4. WeakMap is not iterable.

List down the collection of

methods available on WeakMap
Below are the list of methods available on
WeakMap,

1. set(key, value): Sets the value for the key in

the WeakMap object. Returns the WeakMap
object.
2. delete(key): Removes any value associated
to the key.
3. has(key): Returns a Boolean asserting
whether a value has been associated to the
key in the WeakMap object or not.
4. get(key): Returns the value associated to the
key, or undefined if there is none. Let's see
the functionality of all the above methods in
an example,
var weakMapObject = new WeakMap();

var firstObject = {};

var secondObject = {};

// set(key, value)

weakMapObject.set(firstObject, 'John');

weakMapObject.set(secondObject, 100);

console.log(weakMapObject.has(firstObject));
//true

console.log(weakMapObject.get(firstObject)); //
John

weakMapObject.delete(secondObject);

What is the purpose of uneval

The uneval() is an inbuilt function which is used to
create a string representation of the source code of
an Object. It is a top-level function and is not
associated with any object. Let's see the below
example to know more about it's functionality,
var a = 1;

uneval(a); // returns a String containing 1

uneval(function user() {}); // returns "(function
user(){})"

How do you encode an URL

The encodeURI() function is used to encode
complete URI which has special characters except
(, / ? : @ & = + $ #) characters.
var uri = 'https://mozilla.org/?x=шеллы';

var encoded = encodeURI(uri);

console.log(encoded); //
https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1
%8B

How do you decode an URL

The decodeURI() function is used to decode a
Uniform Resource Identifier (URI) previously
created by encodeURI().
var uri = 'https://mozilla.org/?x=шеллы';

var encoded = encodeURI(uri);

console.log(encoded); //
https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1
%8B

try {
 console.log(decodeURI(encoded)); //
"https://mozilla.org/?x=шеллы"

} catch(e) { // catches a malformed URI

console.error(e);

How do you print the contents of

web page
The window object provided a print() method which
is used to print the contents of the current window.
It opens a Print dialog box which lets you choose
between various printing options. Let's see the
usage of print method in an example,
<input type="button" value="Print"
onclick="window.print()" />
Note: In most browsers, it will block while the print
dialog is open.

What is the difference between

uneval and eval
The uneval function returns the source of a given
object; whereas the eval function does the
opposite, by evaluating that source code in a
different memory area. Let's see an example to
clarify the difference,
var msg = uneval(function greeting() { return
'Hello, Good morning'; });

var greeting = eval(msg);

greeting(); // returns "Hello, Good morning"

What is an anonymous function

An anonymous function is a function without a
name! Anonymous functions are commonly
assigned to a variable name or used as a callback
function. The syntax would be as below,
function (optionalParameters) {

//do something

const myFunction = function(){ //Anonymous

function assigned to a variable

//do something

};

[1, 2, 3].map(function(element){ //Anonymous

function used as a callback function
 //do something

});
Let's see the above anonymous function in an
example,
var x = function (a, b) {return a * b};

var z = x(5, 10);

console.log(z); // 50

What is the precedence order

between local and global
variables
A local variable takes precedence over a global
variable with the same name. Let's see this
behavior in an example.
var msg = "Good morning";

function greeting() {

msg = "Good Evening";

console.log(msg);

greeting();
What are javascript accessors
ECMAScript 5 introduced javascript object
accessors or computed properties through getters
and setters. Getters uses the get keyword whereas
Setters uses the set keyword.
var user = {

firstName: "John",

lastName : "Abraham",

language : "en",

get lang() {

return this.language;

set lang(lang) {

this.language = lang;

};

console.log(user.lang); // getter access lang as

en

user.lang = 'fr';
console.log(user.lang); // setter used to set lang
as fr

How do you define property on

Object constructor
The Object.defineProperty() static method is used
to define a new property directly on an object, or
modify an existing property on an object, and
returns the object. Let's see an example to know
how to define property,
const newObject = {};

Object.defineProperty(newObject, 'newProperty', {

value: 100,

writable: false

});

console.log(newObject.newProperty); // 100

newObject.newProperty = 200; // It throws an error

in strict mode due to writable setting
What is the difference between
get and defineProperty
Both have similar results until unless you use
classes. If you use get the property will be defined
on the prototype of the object whereas using
Object.defineProperty() the property will be defined
on the instance it is applied to.

What are the advantages of

Getters and Setters
Below are the list of benefits of Getters and Setters,

1. They provide simpler syntax

2. They are used for defining computed
properties, or accessors in JS.
3. Useful to provide equivalence relation
between properties and methods
4. They can provide better data quality
5. Useful for doing things behind the scenes
with the encapsulated logic.
Can I add getters and setters
using defineProperty method
Yes, You can use the Object.defineProperty()
method to add Getters and Setters. For example,
the below counter object uses increment,
decrement, add and subtract properties,
var obj = {counter : 0};

// Define getters

Object.defineProperty(obj, "increment", {

get : function () {this.counter++;}

});

Object.defineProperty(obj, "decrement", {

get : function () {this.counter--;}

});

// Define setters

Object.defineProperty(obj, "add", {

set : function (value) {this.counter += value;}

});

Object.defineProperty(obj, "subtract", {

set : function (value) {this.counter -= value;}

});

obj.add = 10;

obj.subtract = 5;

console.log(obj.increment); //6

console.log(obj.decrement); //5

What is the purpose of

switch-case
The switch case statement in JavaScript is used for
decision making purposes. In a few cases, using
the switch case statement is going to be more
convenient than if-else statements. The syntax
would be as below,
switch (expression)

case value1:
 statement1;

break;

case value2:

statement2;

break;

case valueN:

statementN;

break;

default:

statementDefault;

}
The above multi-way branch statement provides an
easy way to dispatch execution to different parts of
code based on the value of the expression.

What are the conventions to be

followed for the usage of switch
case
Below are the list of conventions should be taken
care,

1. The expression can be of type either

number or string.
2. Duplicate values are not allowed for
the expression.
3. The default statement is optional. If
the expression passed to switch does
not match with any case value then
the statement within default case will
be executed.
4. The break statement is used inside
the switch to terminate a statement
sequence.
5. The break statement is optional. But if
it is omitted, the execution will
continue on into the next case.

What are all the types of Pop up boxes

available in JavaScript?
● Alert
● Confirm and
● Prompt
What is the difference between an alert
box and a confirmation box?
An alert box displays only one button, which
is the OK button.
But a Confirmation box displays two buttons,
namely OK and cancel.

What are escape characters?

Escape characters (Backslash) is used when

working with special characters like single
quotes, double quotes, apostrophes, and
ampersands. Place backslash before the
characters to make it display.
Example:
document. write "I m a "good" boy."

document. write "I m a \"good\" boy."

What are the disadvantages of using

innerHTML in JavaScript?
If you use innerHTML in JavaScript, the
disadvantage is
● Content is replaced everywhere
 ● We cannot use it like “appending to
innerHTML
● Even if you use +=like “innerHTML =
innerHTML + ‘html'” still the old content
is replaced by html
● The entire innerHTML content is
re-parsed and builds into elements.
Therefore, it’s much slower
● The innerHTML does not provide
validation, and therefore we can
potentially insert valid and broken
HTML in the document and break it

What is break and continue statements?

Break statement exits from the current loop.
Continue statement continues with next
statement of the loop.

Which keywords are used to handle

exceptions?
Try… Catch—finally is used to handle
exceptions in the JavaScript
Try{
 Code

Catch(exp){

Code to throw an exception.

Finally{

Code runs either it finishes successfully

or after catch

What is the use of the blur function?

Blur function is used to remove the focus from
the specified object.

What is the unshift method in JavaScript?

Unshift method is like the push method, which
works at the beginning of the array. This
method is used to prepend one or more
elements to the beginning of the array.

How are object properties assigned?

Properties are assigned to objects in the
following way –

obj ["class"] = 12;

or
obj.class = 12;

What is the way to get the status of a

CheckBox?
The status can be acquired as follows –
alert(document.getElementById('checkbox1').chec
ked);

If the CheckBox is checked, this alert will

return TRUE.

What is a window.onload and

onDocumentReady?
The onload function is not run until all the
information on the page is loaded. This leads
to a substantial delay before any code is
executed.
onDocumentReady loads the code just after
the DOM is loaded. This allows early
manipulation of the code.

How can a particular frame be targeted,

from a hyperlink, in JavaScript?
This can be done by including the name of
the required frame in the hyperlink using the
‘target’ attribute.
<a href="/newpage.htm" target="newframe">>New
Page</a>

How are DOM utilized in JavaScript?

DOM stands for Document Object Model and
is responsible for how various objects in a
document interact with each other. DOM is
required for developing web pages, which
includes objects like paragraphs, links, etc.
These objects can be operated to include
actions like add or delete. DOM is also
required to add extra capabilities to a web
page. On top of that, the use of API gives an
advantage over other existing models.
What is the role of deferred scripts in
JavaScript?
The HTML code’s parsing during page
loading is paused by default until the script
has not stopped executing. If the server is
slow or the script is particularly heavy, then
the web page is delayed.
While using Deferred, scripts delays
execution of the script till the time the HTML
parser is running. This reduces the loading
time of web pages, and they get displayed
faster.

What are Screen objects?

Screen objects are used to read the
information from the client’s screen. The
properties of screen objects are –
● AvailHeight: Gives the height of the
client’s screen
● AvailWidth: Gives the width of the
client’s screen
● ColorDepth: Gives the bit depth of
images on the client’s screen
● Height: Gives the total height of the
client’s screen, including the taskbar
 ● Width: Gives the total width of the
client’s screen, including the taskba

How to use Loops in Javascript?

There are mainly four types of loops in
JavaScript.
1. for loop
2. for/in a loop (explained later)
3. while loop
4. do…while loop

for loop
Syntax:
for(statement1; statement2; statment3)

lines of code to be executed

}

1. Statement1 is executed first, even

before executing the looping code. So,
this statement is normally used to
assign values to variables used inside
the loop.
2. The statement2 is the condition to
execute the loop.
3. The statement3 is executed every time
after the looping code is executed.

for/in a loop
The for/in a loop is usually used to loop
through the properties of an object. You can
give any name for the variable, but the
object’s name should be the same as an
already existing object you need to loop
through.
Syntax:
for (variablename in objectname)
{

lines of code to be executed

while loop
Syntax:
while(condition)

lines of code to be executed

}

The “while loop” is executed as long as the

specified condition is true. Inside the while
loop, you should include the statement that
will end the loop at some point in time.
Otherwise, your loop will never end, and your
browser may crash.

do…while loop
Syntax:
<pre>

do

block of code to be executed

} while (condition)

The do…while loop is very similar to the while

loop. The only difference is that in do…while
loop, the block of code gets executed once
even before checking the condition.

What are the important JavaScript Array

Method explain with example?

The Array object has many properties and

methods which help developers to handle
arrays easily and efficiently. You can get the
value of a property by specifying
arrayname.property and the output of a
method by specifying arrayname.method().
● length property –> If you want to know
the number of elements in an array, you
can use the length property.
 ● prototype property –> If you want to
add new properties and methods, you
can use the prototype property.
● reverse method –> You can reverse
the order of items in an array using a
reverse method.
● sort method –> You can sort the items
in an array using sort method.
● pop method –> You can remove the
last item of an array using a pop
method.
● shift method –> You can remove the
first item of an array using shift method.
● push method –> You can add a value
as the last item of the array.

What is JavaScript Unit Testing, and what

are the challenges in JavaScript Unit
Testing?
JavaScript Unit Testing is a testing method in
which JavaScript tests code written for a web
page or web application module. It is
combined with HTML as an inline event
handler and executed in the browser to test if
all functionalities work fine. These unit tests
are then organized in the test suite.
Every suite contains several tests designed to
be executed for a separate module. Most
importantly, they don’t conflict with any other
module and run with fewer dependencies on
each other (some critical situations may
cause dependencies).
Challenges of JavaScript Unit Testing:
Here are important challenges of JavaScript
Unit Testing:
● Many other languages support unit
testing in browsers, in the stable as well
as in runtime environment, but
JavaScript can not
● You can understand some system
actions with other languages, but this is
not the case with JavaScript
● Some JavaScript are written for a web
application that may have multiple
dependencies.
● JavaScript is good to use in
combination with HTML and CSS rather
than on the web
 ● Difficulties with page rendering and
DOM manipulation
● Sometimes you find an error message
on your screen regarding ‘Unable to
load example.js’ or any other JavaScript
error regarding version control. These
vulnerabilities come under Unit Testing
JavaScript
Solutions of JavaScript Unit Testing:
To avoid such issues, what you can do is;
● Do not use global variables.
● Do not manipulate predefined objects.
● Design core functionalities based on the
library.
● Try to create small pieces of
functionalities with lesser
dependencies.

What are some important JavaScript Unit

Testing Frameworks?
Following is a curated list of popular
JavaScript Unit Testing Frameworks and
Tools that are widely used :
Unit.js: It is known as an open-source
assertion library running on browser and
Node.js. It is extremely compatible with other
JavaScript Unit Testing frameworks like
Mocha, Karma, Jasmine, QUnit, Protractor,
etc. Provides the full documented API of
assertion list.
QUnit: It is used for both client-side and
server-side JavaScript Unit Testing. This Free
JavaScript testing framework is used for
jQuery projects. It follows Common JS unit
testing Specification for unit testing in
JavaScript. It supports the Node Long-term
Support Schedule.
Jasmine: Jasmine is the behavior-driven
development framework to unit test
JavaScript. It is used for testing both
synchronous and asynchronous JavaScript
codes. It does not require DOM and comes
with an easy syntax that can be written for
any test.
Karma: Karma is an open-source productive
testing environment. Easy workflow control
running on the command line. Offers the
freedom to write the tests with Jasmine,
Mocha, and QUnit. You can run the test on
real devices with easy debugging.
Mocha: Mocha runs on Node.js and in the
browser. Mocha performs asynchronous
testing more simply. Provides accuracy and
flexibility in reporting. Provides tremendous
support of rich features such as test-specific
timeouts, JavaScript APIs.
Jest: Facebook uses jest so far to test all the
JavaScript code. It provides the
‘zero-configuration testing experience.
Supports independent and non-interrupting
running tests without any conflict. Do not
require any other setup configuration and
libraries.
AVA: AVA is a simple JavaScript Unit Testing
Framework. Tests are being run in parallel
and serially. Parallel tests run without
interrupting each other. This testing
framework supports asynchronous testing as
well. AVA uses subprocesses to run the unit
test JavaScript.

What is a potential pitfall with

using typeof bar === "object" to determine if
bar is an object? How can this pitfall
be avoided?
typeof bar === "object" is a reliable way to check if

bar is an object, but surprisingly type of null is

also an object.

var bar = null;

console.log(typeof bar === "object"); //

logs true!

This problem can easily be avoided my checking

if bar is null:
console.log((bar !== null) && ((typeof bar === "object") ||
(typeof bar === "function")));

Second, the above solution will return true if bar

is an array (e.g., if var bar = [];). In most cases,
this is the desired behavior, since arrays are
indeed objects, but in situations where you want
to also false for arrays, you could amend the
above solution to be:
console.log((bar !== null) && (typeof bar === "object") &&
(toString.call(bar) !== "[object Array]"));

However, there’s one other alternative that

returns false for nulls, arrays, and functions, but
true for objects:

console.log((bar !== null) && (bar.constructor === Object));

What will the code below output

to the console and why?
1)

(function () {

var a = (b = 3);

})();

console.log("a defined? " + (typeof a !==

"undefined"));
 console.log("b defined? " + (typeof b !==
"undefined"));

Since both a and b are defined within the

enclosing scope of the function, and since the
line they are on begins with the var keyword,
most JavaScript developers would expect typeof
a and typeof b to both be undefined in the above
example.

However, that is not the case. The issue here is

that most developers incorrectly understand the
statement var a = b = 3; to be shorthand for:

var b = 3;

var a = b;

But in fact, var a = b = 3; is actually shorthand for:

b = 3;

var a = b;

As a result (if you are not using strict mode), the

output of the code snippet would be:
a defined? false

b defined? true

But how can b be defined outside of the scope of

the enclosing function? Well, since the statement
var a = b = 3; is shorthand for the statements b =
3; and var a = b;, b ends up being a global
variable (since it is not preceded by the var
keyword) and is therefore still in scope even
outside of the enclosing function.

Note that, in strict mode (i.e., with use strict), the

statement var a = b = 3; will generate a runtime
error of ReferenceError: b is not defined, thereby
avoiding any headfakes/bugs that might othewise
result.

2)

(myObject = {
 foo: "bar",

func: function () {

var self = this;

console.log("outer func: this.foo = " +

this.foo);

console.log("outer func: self.foo = " +

self.foo);

(function () {

console.log("inner func: this.foo = "

+ this.foo);

console.log("inner func: self.foo = "

+ self.foo);

})();

},

};

myObject.func();
The above code will output the following to the
console:

outer func: this.foo = bar

outer func: self.foo = bar

inner func: this.foo = undefined

inner func: self.foo = bar

In the outer function, both this and self refer to

myObject and therefore both can properly
reference and access foo.

In the inner function, though, this no longer refers

to myObject. As a result, this.foo is undefined in
the inner function, whereas the reference to the
local variable self remains in scope and is
accessible there.

What is the significance of, and

reason for, wrapping the entire
content of a JavaScript source file
in a function block?
This is an increasingly common practice,
employed by many popular JavaScript libraries
(jQuery, Node.js, etc.). This technique creates a
closure around the entire contents of the file
which, perhaps most importantly, creates a
private namespace and thereby helps avoid
potential name clashes between different
JavaScript modules and libraries.

Another feature of this technique is to allow for an

easily referenceable (presumably shorter) alias
for a global variable. This is often used, for
example, in jQuery plugins. jQuery allows you to
disable the $ reference to the jQuery namespace,
using jQuery.noConflict().

What is the significance, and what

are the benefits, of including 'use
strict' at the beginning of a
JavaScript source file?

The short and most important answer here is that

use strict is a way to voluntarily enforce stricter
parsing and error handling on your JavaScript
code at runtime. Code errors that would otherwise
have been ignored or would have failed silently
will now generate errors or throw exceptions. In
general, it is a good practice.

Some of the key benefits of strict mode include:

● Makes debugging easier. Code errors

that would otherwise have been ignored
or would have failed silently will now
generate errors or throw exceptions,
alerting you sooner to problems in your
code and directing you more quickly to
their source.
● Prevents accidental globals. Without
strict mode, assigning a value to an
undeclared variable automatically
creates a global variable with that name.
This is one of the most common errors in
JavaScript. In strict mode, attempting to
do so throws an error.
● Eliminates this coercion. Without strict
mode, a reference to a this value of null
or undefined is automatically coerced to
the global. This can cause many
headfakes and pull-out-your-hair kind of
bugs. In strict mode, referencing a a this
value of null or undefined throws an
error.
● Disallows duplicate parameter values.
Strict mode throws an error when it
detects a duplicate named argument for
a function (e.g., function foo(val1, val2,
val1){}), thereby catching what is almost
certainly a bug in your code that you
might otherwise have wasted lots of time
tracking down.
 ○ Note: It used to be (in
ECMAScript 5) that strict mode
would disallow duplicate
property names (e.g. var object
= {foo: "bar", foo: "baz"};) but as
of ECMAScript 2015 this is no
longer the case.
● Makes eval() safer. There are some
differences in the way eval() behaves in
strict mode and in non-strict mode. Most
significantly, in strict mode, variables and
functions declared inside of an eval()
statement are not created in the
containing scope (they are created in the
containing scope in non-strict mode,
which can also be a common source of
problems).
● Throws error on invalid usage of delete.
The delete operator (used to remove
properties from objects) cannot be used
on non-configurable properties of the
object. Non-strict code will fail silently
when an attempt is made to delete a
 non-configurable property, whereas strict
mode will throw an error in such a case.

Consider the two functions below.

Will they both return the same
thing? Why or why not?

function foo1() {

return { bar: "hello" };

function foo2() {

return

{ bar: "hello" };

foo1() will return Object {bar : “Hello”}

foo2() will return undefined
The reason for this has to do with the fact that
semicolons are technically optional in JavaScript
(although omitting them is generally really bad
form). As a result, when the line containing the
return statement (with nothing else on the line) is
encountered in foo2(), a semicolon is
automatically inserted immediately after the
return statement.

No error is thrown since the remainder of the

code is perfectly valid, even though it doesn’t
ever get invoked or do anything (it is simply an
unused code block that defines a property bar
which is equal to the string "hello").

What will the code below output?

Explain your answer.

console.log(0.1 + 0.2); console.log(0.1 +

0.2 == 0.3);
An educated answer to this question would
simply be: “You can’t be sure. it might print
out 0.3 and true, or it might not. Numbers in
JavaScript are all treated with floating point
precision, and as such, may not always
yield the expected results.”

The example provided above is classic case

that demonstrates this issue. Surprisingly, it
will print out:
0.30000000000000004

False

A typical solution is to compare the absolute difference

between two numbers with the special constant
Number.EPSILON:

function areTheNumbersAlmostEqual(num1,
num2) {
return Math.abs( num1 - num2 ) <
Number.EPSILON;
}
console.log(areTheNumbersAlmostEqual(0.1 +
0.2, 0.3));
In what order will the numbers 1-4
be logged to the console when the
code below is executed? Why?

(function () {

console.log(1);

setTimeout(function () {

console.log(2);

}, 1000);

setTimeout(function () {

console.log(3);

}, 0);

console.log(4);

})();
The values will be printed in the order:
1
4
3
2

So, since 1 is the first console.log() encountered ,

without any delay, it it printed first on the console.

Now we move on to next line, there is a

settimeout function with the delay of 1000
seconds. Javascript being asynchronous in the
code execution, it wont wait for 1000ms to
complete.

Now here is the confusing part, if the

console.log(3) has time delay of 0 seconds, why
is 4 printed before 3?
Answer to that is, browser has an event loop
which checks for the event queue and pending
processes. For example, if an event happens in
the background (e.g., a script onload event) while
the browser is busy (e.g., processing an onclick),
the event gets appended to the queue.
As soon as the event is complete and the call
stack is empty , the event loop checks for the
queue and then pushes the event on stack to be
handled.
Similarly in setTimeout() , the referenced function
is put into the event queue. When 0 is sent as
second argument in setTimeout, it attempts to
execute it as soon as possible. That is
immediately when the call stack is empty.
Therefore the function is executed at the next tick
and not immediately and 4 gets printed before 3.

Write a sum method which will

work properly when invoked using
either syntax below.
console.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5
METHOD 1

function sum(x) {
if (arguments.length == 2) {
return arguments[0] + arguments[1];
} else {
return function(y) { return x + y; };
}
}
In JavaScript, functions provide access to an
arguments object which provides access to the
actual arguments passed to a function. This
enables us to use the length property to
determine at runtime the number of arguments
passed to the function.

If two arguments are passed, we simply add them

together and return.

Otherwise, we assume it was called in the form

sum(2)(3), so we return an anonymous function
that adds together the argument passed to sum()
(in this case 2) and the argument passed to the
anonymous function (in this case 3).

METHOD 2

function sum(x, y) {
if (y !== undefined) {
return x + y;
} else {
return function(y) { return x + y; };
}
}
When a function is invoked, JavaScript does not
require the number of arguments to match the
number of arguments in the function definition. If
the number of arguments passed exceeds the
number of arguments in the function definition,
the excess arguments will simply be ignored. On
the other hand, if the number of arguments
passed is less than the number of arguments in
the function definition, the missing arguments will
have a value of undefined when referenced within
the function. So, in the above example, by simply
checking if the 2nd argument is undefined, we
can determine which way the function was
invoked and proceed accordingly.

Discuss possible ways to write a

function isInteger(x) that
determines if x is an integer.

This may sound trivial and, in fact, it is trivial with

ECMAscript 6 which introduces a new
Number.isInteger() function for precisely this
purpose. However, prior to ECMAScript 6, this is
a bit more complicated, since no equivalent of the
Number.isInteger() method is provided.

The issue is that, in the ECMAScript

specification, integers only exist conceptually;
i.e., numeric values are always stored as floating
point values.
With that in mind, the simplest and cleanest
pre-ECMAScript-6 solution (which is also
sufficiently robust to return false even if a
non-numeric value such as a string or null is
passed to the function) would be the following
use of the bitwise XOR operator:

function isInteger(x) { return (x ^ 0) ===

x; }
The following solution would also work, although
not as elegant as the one above:

function isInteger(x) { return (typeof x

=== 'number') && (x % 1 === 0); }

The following function (or with Math.ceil() or

Math.floor() in place of Math.round()) might also
seem useful, but the results are not exactly the
same as with the above two functions:

function isInteger(x) { return

Math.round(x) === x; }

The difference is, these Math-based solutions

return true for Infinity and -Infinity, whereas the
others (and notably ES6’s Number.isInteger())
return false.
Another fairly common incorrect solution is the
following:

function isInteger(x) { return parseInt(x,

10) === x; }

While this parseInt-based approach will work well

for many values of x, once x becomes quite large,
it will fail to work properly. The problem is that
parseInt() coerces its first parameter to a string
before parsing digits. Therefore, once the number
becomes sufficiently large, its string
representation will be presented in exponential
form (e.g., 1e+21). Accordingly, parseInt() will
then try to parse 1e+21, but will stop parsing
when it reaches the e character and will therefore
return a value of 1. Observe:

> String(1000000000000000000000)
'1e+21'
> parseInt(1000000000000000000000, 10)
1
> parseInt(1000000000000000000000, 10) ===
1000000000000000000000
false
What will the following code
output and why?

var b = 1;

function outer(){

var b = 2

function inner(){

b++;

var b = 3;

console.log(b)

inner();

outer();
Output to the console will be “3”.
There are three closures in the example, each
with it’s own var b declaration. When a variable is
invoked closures will be checked in order from
local to global until an instance is found. Since
the inner closure has a b variable of its own, that
is what will be output.

Furthermore, due to hoisting the code in inner will

be interpreted as follows:
function inner () {
var b; // b is undefined
b++; // b is NaN
b = 3; // b is 3
console.log(b); // output "3"
}

What would following code return?

1) console.log(typeof typeof 1);string

typeof 1 will return "number" and typeof "number"

will return string.
2)

for (var i = 0; i < 5; i++) {

setTimeout(function () {

console.log(i);

}, i * 1000);}

The output of the above function is 5,5,5,5,5

The reason for this is that each function executed

within the loop will be executed after the entire
loop has completed and all will therefore
reference the last value stored in i, which was 5.

Closures can be used to prevent this problem by

creating a unique scope for each iteration, storing
each unique value of the variable within its scope,
as follows:
for (var i = 0; i < 5; i++) {
(function(x) {
setTimeout(function() {
console.log(x); }, x * 1000 );
})(i);
}
In an ES2015 context, you can simply use let
instead of var in the original code:
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); }, i * 1000 );
}

3) typeof undefined == typeof NULL

The expression will be evaluated to true, since

NULL will be treated as any other undefined
variable.

Note: JavaScript is case-sensitive and here we

are using NULL instead of null.

4)

var x = 21;

var girl = function () {

 console.log(x);

var x = 20;

};

girl();

Neither 21, nor 20, the result is undefined

It’s because JavaScript initialization is not

hoisted.

(Why doesn’t it show the global value of 21? The

reason is that when the function is executed, it
checks that there’s a local x variable present but
doesn’t yet declare it, so it won’t look for global
one.)
5)

console.log(false == "0");

console.log(false === "0");

true
false

In JavaScript, there are two sets of equality operators.

The triple-equal operator === behaves like any
traditional equality operator would: evaluates to true if
the two expressions on either of its sides have the same
type and the same value. The double-equal operator,
however, tries to coerce the values before comparing
them. It is therefore generally good practice to use the
=== rather than ==. The same holds true for !== vs !=.

6)

var a = {},

b = { key: "b" },

c = { key: "c" };
a[b] = 123;

a[c] = 456;

console.log(a[b]);

456 (and not 123)

On line 4, when we do a[b] = 123, b is converted
to "[object Object]". We are actually doing
a[object Object] = 123;
Similarly with c, a[object Object] = 456;
Therefore when we print a[b] its 456.

7)

console.log(

(function f(n) {

return n > 1 ? n * f(n - 1) : n;

})(10)

);
The code will output the value of 10 factorial (i.e.,
10!, or 3,628,800).

Here’s why:

The named function f() calls itself recursively, until

it gets down to calling f(1) which simply returns 1.
Here, therefore, is what this does:
f(1): returns n, which is 1
f(2): returns 2 * f(1), which is 2
f(3): returns 3 * f(2), which is 6
f(4): returns 4 * f(3), which is 24
f(5): returns 5 * f(4), which is 120
f(6): returns 6 * f(5), which is 720
f(7): returns 7 * f(6), which is 5040
f(8): returns 8 * f(7), which is 40320
f(9): returns 9 * f(8), which is 362880
f(10): returns 10 * f(9), which is 3628800

8)

(function (x) {

return (function (y) {

console.log(x);

})(2);
})(1);

The output will be 1, even though the value of x is

never set in the inner function. Here’s why:

As explained in our JavaScript Hiring Guide, a

closure is a function, along with all variables or
functions that were in-scope at the time that the
closure was created. In JavaScript, a closure is
implemented as an “inner function”; i.e., a
function defined within the body of another
function. An important feature of closures is that
an inner function still has access to the outer
function’s variables.

Therefore, in this example, since x is not defined

in the inner function, the scope of the outer
function is searched for a defined variable x,
which is found to have a value of 1.

9)
var hero = {

_name: "John Doe",

getSecretIdentity: function () {

return this._name;

},

};

var stoleSecretIdentity =
hero.getSecretIdentity;

console.log(stoleSecretIdentity());

console.log(hero.getSecretIdentity());

undefined
John Doe

The first console.log prints undefined because we

are extracting the method from the hero object,
so stoleSecretIdentity() is being invoked in the
global context (i.e., the window object) where the
_name property does not exist.

One way to fix the stoleSecretIdentity() function is

as follows:
var stoleSecretIdentity =
hero.getSecretIdentity.bind(hero);

Imagine you have this code:

var a = [1, 2, 3];
a) Will this result in a crash ?
a[10] = 99;
b) What will this output?
console.log(a[6]);

a) It will not crash.The JavaScript engine will

make array slots 3 through 9 be “empty
slots.”
b) Here, a[6] will output undefined, but the
slot still remains empty rather than filled
with undefined. This may be an important
nuance in some cases.
How do you add an element at the
beginning of an array? How do
you add one at the end?

var myArray = ['a', 'b', 'c', 'd'];

myArray.push('end');
myArray.unshift('start');
console.log(myArray); // ["start", "a",
"b", "c", "d", "end"]

ES6 Way
myArray = ['start', ...myArray];
myArray = [...myArray, 'end'];

What are the various statements

in error handling
Below are the list of statements used in an error
handling,

i. try: This statement is used to test a

block of code for errors
ii. catch: This statement is used to
handle the error
iii. throw: This statement is used to
create custom errors.
 iv. finally: This statement is used to
execute code after try and catch
regardless of the result.

What are the two types of loops

in javascript
1. Entry Controlled loops: In this kind of loop
type, the test condition is tested before
entering the loop body. For example, For
Loop and While Loop comes under this
category.
2. Exit Controlled Loops: In this kind of loop
type, the test condition is tested or evaluated
at the end of the loop body. i.e, the loop body
will execute at least once irrespective of test
condition true or false. For example, do-while
loop comes under this category

What is nodejs
Node.js is a server-side platform built on Chrome's
JavaScript runtime for easily building fast and
scalable network applications. It is an event-based,
non-blocking, asynchronous I/O runtime that uses
Google's V8 JavaScript engine and libuv library.
What is an Intl object
The Intl object is the namespace for the
ECMAScript Internationalization API, which
provides language sensitive string comparison,
number formatting, and date and time formatting. It
provides access to several constructors and
language sensitive functions.

How do you perform language

specific date and time formatting
You can use the Intl.DateTimeFormat object which is
a constructor for objects that enable
language-sensitive date and time formatting. Let's
see this behavior with an example,
var date = new Date(Date.UTC(2019, 07, 07, 3, 0,
0));
console.log(new
Intl.DateTimeFormat('en-GB').format(date)); //
07/08/2019
console.log(new
Intl.DateTimeFormat('en-AU').format(date)); //
07/08/2019

Is it possible to add CSS to

console messages
Yes, you can apply CSS styles to console
messages similar to html text on the web page.
console.log('%c The text has blue color, with
large font and red background', 'color: blue;
font-size: x-large; background: red');
The text will be displayed as below,

Note: All CSS styles can be applied to console

messages.

What is the purpose of dir

method of console object
The console.dir() is used to display an interactive
list of the properties of the specified JavaScript
object as JSON.
const user = { "name":"John", "id": 1, "city":
"Delhi"};
console.dir(user);
The user object displayed in JSON representation
Is it possible to debug HTML
elements in console
Yes, it is possible to get and debug HTML elements
in the console just like inspecting elements.
const element =
document.getElementsByTagName("body")[0];
console.log(element);
It prints the HTML element in the console,

How do you display data in a

tabular format using console
object
The console.table() is used to display data in the
console in a tabular format to visualize complex
arrays or objects.
const users = [{ "name":"John", "id": 1, "city":
"Delhi"}, { "name":"Max", "id": 2, "city":
"London"}, { "name":"Rod", "id": 3, "city":
"Paris"} ];
console.table(users);
The data visualized in a table format,
Not: Remember that console.table() is not
supported in IE.

What is the shortcut to get

timestamp
You can use new Date().getTime() to get the current
timestamp. There is an alternative shortcut to get
the value.
console.log(+new Date());
console.log(Date.now());

How do you flattening multi

dimensional arrays
Flattening bi-dimensional arrays is trivial with
Spread operator.
const biDimensionalArr = [11, [22, 33], [44, 55],
[66, 77], 88, 99];
const flattenArr = [].concat(...biDimensionalArr);
// [11, 22, 33, 44, 55, 66, 77, 88, 99]
But you can make it work with multi-dimensional
arrays by recursive calls,
function flattenMultiArray(arr) {
const flattened = [].concat(...arr);
return flattened.some(item =>
Array.isArray(item)) ?
flattenMultiArray(flattened) : flattened;
}
const multiDimensionalArr = [11, [22, 33], [44,
[55, 66, [77, [88]], 99]]];
const flatArr =
flattenMultiArray(multiDimensionalArr); // [11,
22, 33, 44, 55, 66, 77, 88, 99]

What is the easiest multi

condition checking
You can use indexOf to compare input with multiple
values instead of checking each value as one
condition.
// Verbose approach
if (input === 'first' || input === 1 || input ===
'second' || input === 2) {
someFunction();
}
// Shortcut
if (['first', 1, 'second', 2].indexOf(input) !==
-1) {
someFunction();
}
How do you capture browser
back button
The window.onbeforeunload method is used to
capture browser back button events. This is helpful
to warn users about losing the current data.
window.onbeforeunload = function() {
alert("You work will be lost");
};

How do you disable right click in

the web page
The right click on the page can be disabled by
returning false from the oncontextmenu attribute on
the body element.
<body oncontextmenu="return false;">

What are wrapper objects

Primitive Values like string,number and boolean
don't have properties and methods but they are
temporarily converted or coerced to an
object(Wrapper object) when you try to perform
actions on them. For example, if you apply
toUpperCase() method on a primitive string value, it
does not throw an error but returns uppercase of
the string.
let name = "john";
console.log(name.toUpperCase()); // Behind the
scenes treated as console.log(new
String(name).toUpperCase());

i.e, Every primitive except null and undefined have

Wrapper Objects and the list of wrapper objects are
String,Number,Boolean,Symbol and BigInt.

What are the different ways to

deal with Asynchronous Code
Below are the list of different ways to deal with
Asynchronous code.

i. Callbacks
ii. Promises
iii. Async/await
iv. Third-party libraries such as
async.js,bluebird etc

How to cancel a fetch request

Until a few days back, One shortcoming of native
promises is no direct way to cancel a fetch request.
But the new AbortController from js specification
allows you to use a signal to abort one or multiple
fetch calls. The basic flow of cancelling a fetch
request would be as below,

1. Create an AbortController instance

2. Get the signal property of an instance and
pass the signal as a fetch option for signal
3. Call the AbortController's abort property to
cancel all fetches that use that signal For
example, let's pass the same signal to
multiple fetch calls will cancel all requests
with that signal,

const controller = new AbortController();

const { signal } = controller;

fetch("http://localhost:8000", { signal
}).then(response => {
console.log(`Request 1 is complete!`);
}).catch(e => {
if(e.name === "AbortError") {
// We know it's been canceled!
}
});

fetch("http://localhost:8000", { signal
}).then(response => {
console.log(`Request 2 is complete!`);
}).catch(e => {
if(e.name === "AbortError") {
// We know it's been canceled!
}
});
// Wait 2 seconds to abort both requests
setTimeout(() => controller.abort(), 2000);

What is web speech API

Web speech API is used to enable modern
browsers recognize and synthesize speech(i.e,
voice data into web apps). This API has been
introduced by W3C Community in the year 2012. It
has two main parts,

SpeechRecognition (Asynchronous Speech

Recognition or Speech-to-Text): It provides the
ability to recognize voice context from an audio
input and respond accordingly. This is accessed by
the SpeechRecognition interface. The below example
shows on how to use this API to get text from
speech,

window.SpeechRecognition =
window.webkitSpeechRecognition ||
window.SpeechRecognition; //
webkitSpeechRecognition for Chrome and
SpeechRecognition for FF
const recognition = new
window.SpeechRecognition();
recognition.onresult = (event) => { //
SpeechRecognitionEvent type
const speechToText =
event.results[0][0].transcript;
console.log(speechToText);
}
recognition.start();
In this API, browser is going to ask you for
permission to use your microphone

SpeechSynthesis (Text-to-Speech): It provides the

ability to recognize voice context from an audio
input and respond. This is accessed by the
SpeechSynthesis interface. For example, the below
code is used to get voice/speech from text,

if('speechSynthesis' in window){
var speech = new
SpeechSynthesisUtterance('Hello World!');
speech.lang = 'en-US';
window.speechSynthesis.speak(speech);
}
The above examples can be tested on chrome(33+)
browser's developer console. Note: This API is still
a working draft and only available in Chrome and
Firefox browsers(ofcourse Chrome only
implemented the specification)
What is minimum timeout
throttling
Both browser and NodeJS javascript environments
throttles with a minimum delay that is greater than
0ms. That means even though setting a delay of
0ms will not happen instantaneously. Browsers:
They have a minimum delay of 4ms. This throttle
occurs when successive calls are triggered due to
callback nesting(certain depth) or after a certain
number of successive intervals. Note: The older
browsers have a minimum delay of 10ms. Nodejs:
They have a minimum delay of 1ms. This throttle
happens when the delay is larger than 2147483647
or less than 1. The best example to explain this
timeout throttling behavior is the order of below
code snippet.
function runMeFirst() {
console.log('My script is initialized');
}
setTimeout(runMeFirst, 0);
console.log('Script loaded');
and the output would be in
Script loaded
My script is initialized
If you don't use setTimeout, the order of logs will be
sequential.
function runMeFirst() {
console.log('My script is initialized');
}
runMeFirst();
console.log('Script loaded');
and the output is,
My script is initialized
Script loaded

How do you implement zero

timeout in modern browsers
You can't use setTimeout(fn, 0) to execute the code
immediately due to minimum delay of greater than
0ms. But you can use window.postMessage() to
achieve this behavior.

What are tasks in event loop

A task is any javascript code/program which is
scheduled to be run by the standard mechanisms
such as initially starting to run a program, run an
event callback, or an interval or timeout being fired.
All these tasks are scheduled on a task queue.
Below are the list of use cases to add tasks to the
task queue,

1. When a new javascript program is executed

directly from console or running by the
<script> element, the task will be added to
the task queue.
 2. When an event fires, the event callback
added to task queue
3. When a setTimeout or setInterval is reached,
the corresponding callback added to task
queue

What is microtask
Microtask is the javascript code which needs to be
executed immediately after the currently executing
task/microtask is completed. They are kind of
blocking in nature. i.e, The main thread will be
blocked until the microtask queue is empty. The
main sources of microtasks are Promise.resolve,
Promise.reject, MutationObservers,
IntersectionObservers etc
Note: All of these microtasks are processed in the
same turn of the event loop.

What are the differences

between promises and
observables
Some of the major difference in a tabular form
Promises Observables

Emits only a single Emits multiple values

value at a time over a period of
time(stream of values
ranging from 0 to
multiple)

Eager in nature; they Lazy in nature; they

are going to be called require subscription to
immediately be invoked

Promise is always Observable can be

asynchronous even either synchronous or
though it resolved asynchronous
immediately

Doesn't provide any Provides operators

operators such as map, forEach,
filter, reduce, retry, and
retryWhen etc

Cannot be canceled Canceled by using

unsubscribe() method

What is heap
Heap(Or memory heap) is the memory location
where objects are stored when we define variables.
i.e, This is the place where all the memory
allocations and de-allocation take place. Both heap
and call-stack are two containers of JS runtime.
Whenever runtime comes across variables and
function declarations in the code it stores them in
the Heap.

What is an event table

Event Table is a data structure that stores and
keeps track of all the events which will be executed
asynchronously like after some time interval or after
the resolution of some API requests. i.e Whenever
you call a setTimeout function or invoke async
operation, it is added to the Event Table. It doesn't
not execute functions on it’s own. The main
purpose of the event table is to keep track of events
and send them to the Event Queue as shown in the
below diagram.

What is a microTask queue

Microtask Queue is the new queue where all the
tasks initiated by promise objects get processed
before the callback queue. The microtasks queue
are processed before the next rendering and
painting jobs. But if these microtasks are running
for a long time then it leads to visual degradation.

What is the difference between

shim and polyfill
A shim is a library that brings a new API to an older
environment, using only the means of that
environment. It isn't necessarily restricted to a web
application. For example, es5-shim.js is used to
emulate ES5 features on older browsers (mainly
pre IE9). Whereas polyfill is a piece of code (or
plugin) that provides the technology that you, the
developer, expect the browser to provide natively.
In a simple sentence, A polyfill is a shim for a
browser API.

How do you detect primitive or

non primitive value type
In JavaScript, primitive types include boolean,
string, number, BigInt, null, Symbol and undefined.
Whereas non-primitive types include the Objects.
But you can easily identify them with the below
function,
var myPrimitive = 30;
var myNonPrimitive = {};
function isPrimitive(val) {
return Object(val) !== val;
}

isPrimitive(myPrimitive);
isPrimitive(myNonPrimitive);
If the value is a primitive data type, the Object
constructor creates a new wrapper object for the
value. But If the value is a non-primitive data type
(an object), the Object constructor will give the
same object.

What is babel
Babel is a JavaScript transpiler to convert
ECMAScript 2015+ code into a backwards
compatible version of JavaScript in current and
older browsers or environments. Some of the main
features are listed below,

i. Transform syntax
ii. Polyfill features that are missing in
your target environment (using
@babel/polyfill)
iii. Source code transformations (or
codemods)
Is Node.js completely single
threaded
Node is a single thread, but some of the functions
included in the Node.js standard library(e.g, fs
module functions) are not single threaded. i.e, Their
logic runs outside of the Node.js single thread to
improve the speed and performance of a program.

What are the common use cases

of observables
Some of the most common use cases of
observables are web sockets with push
notifications, user input changes, repeating
intervals, etc

What is RxJS
RxJS (Reactive Extensions for JavaScript) is a
library for implementing reactive programming
using observables that makes it easier to compose
asynchronous or callback-based code. It also
provides utility functions for creating and working
with observables.
What is the difference between
Function constructor and
function declaration
The functions which are created with Function
constructor do not create closures to their creation
contexts but they are always created in the global
scope. i.e, the function can access its own local
variables and global scope variables only. Whereas
function declarations can access outer function
variables(closures) too.
Let's see this difference with an example,
Function Constructor:
var a = 100;
function createFunction() {
var a = 200;
return new Function('return a;');
}
console.log(createFunction()()); // 100
Function declaration:
var a = 100;
function createFunction() {
var a = 200;
return function func() {
return a;
}
}
console.log(createFunction()()); // 200
What is a Short circuit condition
Short circuit conditions are meant for condensed
way of writing simple if statements. Let's
demonstrate the scenario using an example. If you
would like to login to a portal with an authentication
condition, the expression would be as below,
if (authenticate) {
loginToPorta();
}
Since the javascript logical operators evaluated
from left to right, the above expression can be
simplified using && logical operator
authenticate && loginToPorta();

What is the easiest way to resize

an array
The length property of an array is useful to resize or
empty an array quickly. Let's apply length property
on number array to resize the number of elements
from 5 to 2,
var array = [1, 2, 3, 4, 5];
console.log(array.length); // 5

array.length = 2;
console.log(array.length); // 2
console.log(array); // [1,2]
and the array can be emptied too
var array = [1, 2, 3, 4, 5];
array.length = 0;
console.log(array.length); // 0
console.log(array); // []

What is an observable
An Observable is basically a function that can
return a stream of values either synchronously or
asynchronously to an observer over time. The
consumer can get the value by calling subscribe()
method. Let's look at a simple example of an
Observable
import { Observable } from 'rxjs';

const observable = new Observable(observer => {

setTimeout(() => {
observer.next('Message from a Observable!');
}, 3000);
});
observable.subscribe(value => console.log(value));

Note: Observables are not part of the JavaScript

language yet but they are being proposed to be
added to the language
What is the difference between
function and class declarations
The main difference between function declarations
and class declarations is hoisting. The function
declarations are hoisted but not class declarations.
Classes:
const user = new User(); // ReferenceError

class User {}
Constructor Function:
const user = new User(); // No error

function User() {
}

What is an async function

An async function is a function declared with the
async keyword which enables asynchronous,
promise-based behavior to be written in a cleaner
style by avoiding promise chains. These functions
can contain zero or more await expressions.
Let's take a below async function example,
async function logger() {

let data = await

fetch('http://someapi.com/users'); // pause until
fetch returns
console.log(data)
}
logger();
It is basically syntax sugar over ES2015 promises
and generators.

How do you prevent promises

swallowing errors
While using asynchronous code, JavaScript’s ES6
promises can make your life a lot easier without
having callback pyramids and error handling on
every second line. But Promises have some pitfalls
and the biggest one is swallowing errors by default.
Let's say you expect to print an error to the console
for all the below cases,
Promise.resolve('promised value').then(function()
{
throw new Error('error');
});

Promise.reject('error value').catch(function() {
throw new Error('error');
});

new Promise(function(resolve, reject) {

throw new Error('error');
});
But there are many modern JavaScript
environments that won't print any errors. You can fix
this problem in different ways,
Add catch block at the end of each chain: You can
add catch block to the end of each of your promise
chains
Promise.resolve('promised value').then(function()
{
throw new Error('error');
}).catch(function(error) {
console.error(error.stack);
});
But it is quite difficult to type for each promise chain
and verbose too.

Add done method: You can replace first solution's

then and catch blocks with done method
Promise.resolve('promised value').done(function()
{
throw new Error('error');
});
Let's say you want to fetch data using HTTP and
later perform processing on the resulting data
asynchronously. You can write done block as below,
getDataFromHttp()
.then(function(result) {
return processDataAsync(result);
})
.done(function(processed) {
displayData(processed);
});
In future, if the processing library API changed to
synchronous then you can remove done block as
below,
getDataFromHttp()
.then(function(result) {
return displayData(processDataAsync(result));
})
and then you forgot to add done block to then block
leads to silent errors.

Extend ES6 Promises by Bluebird: Bluebird

extends the ES6 Promises API to avoid the issue in
the second solution. This library has a “default”
onRejection handler which will print all errors from
rejected Promises to stderr. After installation, you
can process unhandled rejections
Promise.onPossiblyUnhandledRejection(function(erro
r){
throw error;
});
and discard a rejection, just handle it with an empty
catch
Promise.reject('error value').catch(function()
{});

What are the differences

between spread operator and
rest parameter
Rest parameter collects all remaining elements into
an array. Whereas Spread operator allows
iterables( arrays / objects / strings ) to be expanded
into single arguments/elements. i.e, Rest parameter
is opposite to the spread operator.

What are the different kinds of

generators
There are five kinds of generators,

Generator function declaration:

function* myGenFunc() {
yield 1;
yield 2;
yield 3;
}
const genObj = myGenFunc();

Generator function expressions:

const myGenFunc = function* () {
yield 1;
yield 2;
yield 3;
};
const genObj = myGenFunc();

Generator method definitions in object literals:

const myObj = {
* myGeneratorMethod() {
yield 1;
 yield 2;
yield 3;
}
};
const genObj = myObj.myGeneratorMethod();

Generator method definitions in class:

class MyClass {
* myGeneratorMethod() {
yield 1;
yield 2;
yield 3;
}
}
const myObject = new MyClass();
const genObj = myObject.myGeneratorMethod();

Generator as a computed property:

const SomeObj = {
*[Symbol.iterator] () {
yield 1;
yield 2;
yield 3;
}
}

console.log(Array.from(SomeObj)); // [ 1, 2, 3 ]

What are the built-in iterables

Below are the list of built-in iterables in javascript,
 1. Arrays and TypedArrays
2. Strings: Iterate over each character or
Unicode code-points
3. Maps: iterate over its key-value pairs
4. Sets: iterates over their elements
5. arguments: An array-like special variable in
functions
6. DOM collection such as NodeList

What are the differences

between for...of and for...in
statements
Both for...in and for...of statements iterate over js
data structures. The only difference is over what
they iterate:

1. for..in iterates over all enumerable property

keys of an object
2. for..of iterates over the values of an iterable
object.

Let's explain this difference with an example,

let arr = ['a', 'b', 'c'];

arr.newProp = 'newVlue';
// key are the property keys
for (let key in arr) {
console.log(key);
}

// value are the property values

for (let value of arr) {
console.log(value);
}
Since for..in loop iterates over the keys of the
object, the first loop logs 0, 1, 2 and
newProp while iterating over the array
object. The for..of loop iterates over the
values of a arr data structure and logs a, b, c
in the console.

How do you define instance and

non-instance properties
The Instance properties must be defined inside of
class methods. For example, name and age
properties defined insider constructor as below,
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
But Static(class) and prototype data properties
must be defined outside of the ClassBody
declaration. Let's assign the age value for Person
class as below,
Person.staticAge = 30;
Person.prototype.prototypeAge = 40;

What is the difference between

isNaN and Number.isNaN?
1. isNaN: The global function isNaN converts
the argument to a Number and returns true if
the resulting value is NaN.
2. Number.isNaN: This method does not
convert the argument. But it returns true
when the type is a Number and value is
NaN.

Let's see the difference with an example,

isNaN(‘hello’); // true
Number.isNaN('hello'); // false

What is the easiest way to ignore

promise errors?
The easiest and safest way to ignore promise
errors is void that error. This approach is ESLint
friendly too.

await promise.catch(e => void e);