JavaScript Interview Questions

Question 1

To know the type of a JavaScript variable you use…

Answer 1

we can use the typeof operator.

Question 2

What are the Primative Types

Answer 2

1. String
2. Number
3. BigInt
4. Boolean
5. Undefined
   6.Null
   7.Symbol

Primitive data types can store only a single value.

Question 3

String

Answer 3

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

var str = “Vivek Singh Bisht”; //using double quotes
var str2 = ‘John Doe’; //using single quotes

Question 4

Number

Answer 4

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

var x = 3; //without decimal
var y = 3.6; //with decimal

Question 5

BigInt

Answer 5

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

var bigInteger = 234567890123456789012345678901234567890;

Question 6

Boolean

Answer 6

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

var a = 2;
var b = 3;
var c = 2;
(a == b) // returns false
(a == c) //returns true

Question 7

Undefined

Answer 7

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

var x; // value of x is undefined
var y = undefined; // we can also set the value of a variable as undefined

Question 8

Null

Answer 8

It represents a non-existent or a invalid value.

var z = null;

Question 9

Symbol

Answer 9

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

Question 10

Non-primitive Types

Answer 10

To store multiple and complex values, non-primitive data types are used.

1. Object

Note- It is important to remember that any data type that is not a primitive data type, is of Object type in javascript.

Question 11

Object

Answer 11

// Collection of data in key-value pairs

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

// Collection of data as an ordered list

var array1 = [5, “Hello”, true, 4.1];

Question 12

Explain Hoisting in javascript.

Answer 12

Hoisting is the default behaviour of javascript where all the variable and function declarations are moved on top.

This means that irrespective of where the variables and functions are declared, they are moved on top of the scope. The scope can be both local and global.

ex.1
hoistedVariable = 3;
console.log(hoistedVariable); // outputs 3 even when the variable is declared after it is initialized
var hoistedVariable;

ex.2
hoistedFunction(); // Outputs “ Hello world! “ even when the function is declared after calling

function hoistedFunction(){
console.log(“ Hello world! “);
}

ex.3
// Hoisting takes place in the local scope as well
function doSomething(){
x = 33;
console.log(x);
var x;
}

doSomething(); // Outputs 33 since the local variable “x” is hoisted inside the local scope

Note - Variable initializations are not hoisted, only variable declarations are hoisted:

var x;
console.log(x); // Outputs “undefined” since the initialization of “x” is not hoisted
x = 23;

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

“use strict”;
x = 23; // Gives an error since ‘x’ is not declared
var x;

Question 13

How do you avoid hoisting in javascript?

Answer 13

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

Question 14

whats the difference between variable initializations vs declarations?

Answer 14

Variable initializations are not hoisted, only variable declarations are hoisted:

Question 15

Why do we use the word “debugger” in javascript?

Answer 15

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

Question 16

Difference between “ == “ and “ === “ operators.

Answer 16

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

var x = 2;
var y = “2”;
(x == y) // Returns true since the value of both x and y is the same
(x === y) // Returns false since the typeof x is “number” and typeof y is “string”

Question 17

Difference between var and let keyword in javascript.

Answer 17

Some differences are:

1. From the very beginning, the ‘var’ keyword was used in JavaScript programming whereas the keyword ‘let’ was just added in 2015.
2. The keyword ‘Var’ has a function scope. Anywhere in the function, the variable specified using var is accessible but in ‘let’ the scope of a variable declared with the ‘let’ keyword is limited to the block in which it is declared. Let’s start with a Block Scope.
3. In ECMAScript 2015, let and const are hoisted but not initialized. Referencing the variable in the block before the variable declaration results in a ReferenceError because the variable is in a “temporal dead zone” from the start of the block until the declaration is processed.

Question 18

Explain Implicit Type Coercion in javascript.

Answer 18

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

Question 19

String coercion

Answer 19

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

ex.1
var x = 3;
var y = “3”;
x + y // Returns “33”

ex.2
var x = 24;
var y = “Hello”;
x + y // Returns “24Hello”;

Note - ‘ + ‘ operator when used to add two numbers, outputs a number. The same ‘ + ‘ operator when used to add two strings, outputs the concatenated string:

var name = “Vivek”;
var surname = “ Bisht”;
name + surname // Returns “Vivek Bisht”

Let’s understand both the examples where we have added a number to a string,

When JavaScript sees that the operands of the expression x + y are of different types ( one being a number type and the other being a string type ), it converts the number type to the string type and then performs the operation. Since after conversion, both the variables are of string type, the ‘ + ‘ operator outputs the concatenated string “33” in the first example and “24Hello” in the second example.

Note - Type coercion also takes place when using the ‘ - ‘ operator, but the difference while using ‘ - ‘ operator is that, a string is converted to a number and then subtraction takes place.

var x = 3;
Var y = “3”;
x - y //Returns 0 since the variable y (string type) is converted to a number type

Question 20

Boolean Coercion

Answer 20

Boolean coercion takes place when using logical operators, ternary operators, if statements, and loop checks. To understand boolean coercion in if statements and operators, we need to understand truthy and falsy values.

Truthy values are those which will be converted (coerced) to true. Falsy values are those which will be converted to false.

All values except false, 0, 0n, -0, “”, null, undefined, and NaN are truthy values.

Question 21

If statements:

Answer 21

var x = 0;
var y = 23;

if(x) { console.log(x) } // The code inside this block will not run since the value of x is 0(Falsy)

if(y) { console.log(y) } // The code inside this block will run since the value of y is 23 (Truthy)

Question 22

Logical operators:

Answer 22

Logical operators in javascript, unlike operators in other programming languages, do not return true or false. They always return one of the operands.

Question 23

OR ( | | ) operator

Answer 23

If the first value is truthy, then the first value is returned. Otherwise, always the second value gets returned.

var x = 220;
var y = “Hello”;
var z = undefined;

x | | y // Returns 220 since the first value is truthy

x | | z // Returns 220 since the first value is truthy

if( x || z ){
console.log(“Code runs”); // This block runs because x || y returns 220(Truthy)
}

Question 24

AND ( && ) operator

Answer 24

If both the values are truthy, always the second value is returned. If the first value is falsy then the first value is returned or if the second value is falsy then the second value is returned.

var x = 220;
var y = “Hello”;
var z = undefined;

x && y // Returns “Hello” since both the values are truthy

y && z // Returns undefined since the second value is falsy

if( x && y ){
console.log(“Code runs” ); // This block runs because x && y returns “Hello” (Truthy)
}

Question 25

Equality Coercion

Answer 25

Equality coercion takes place when using ‘ == ‘ operator. As we have stated before

The ‘ == ‘ operator compares values and not types.

While the above statement is a simple way to explain == operator, it’s not completely true

The reality is that while using the ‘==’ operator, coercion takes place.

The ‘==’ operator, converts both the operands to the same type and then compares them.

var a = 12;
var b = “12”;
a == b // Returns true because both ‘a’ and ‘b’ are converted to the same type and then compared. Hence the operands are equal.

Coercion does not take place when using the ‘===’ operator. Both operands are not converted to the same type in the case of ‘===’ operator.

var a = 226;
var b = “226”;

a === b // Returns false because coercion does not take place and the operands are of different types. Hence they are not equal.

Question 26

Is javascript a statically typed or a dynamically typed language?

Answer 26

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

Since javascript is a loosely(dynamically) typed language, variables in JS are not associated with any type. A variable can hold the value of any data type.

For example, a variable that is assigned a number type can be converted to a string type:

var a = 23;
var a = “Hello World!”;

Question 27

What is NaN property in JavaScript?

Answer 27

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

typeof of NaN will return a Number.

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

Note- isNaN() function converts the given value to a Number type, and then equates to NaN.

isNaN(“Hello”) // Returns true
isNaN(345) // Returns false
isNaN(‘1’) // Returns false, since ‘1’ is converted to Number type which results in 0 ( a number)
isNaN(true) // Returns false, since true converted to Number type results in 1 ( a number)
isNaN(false) // Returns false
isNaN(undefined) // Returns true

Question 28

Explain passed by value and passed by reference.

Answer 28

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

Question 29

what happens when we create a variable and assign a value to it?

Answer 29

var x = 2;

In the above example, we created a variable x and assigned it a value of “2”. In the background, the “=” (assign operator) allocates some space in the memory, stores the value “2” and returns the location of the allocated memory space. Therefore, the variable x in the above code points to the location of the memory space instead of pointing to the value 2 directly.

Question 30

how does the assignment operator (=) behave with primitive types

Answer 30

primitive data types when passed to another variable, are passed by value. Instead of just assigning the same address to another variable, the value is passed and new space of memory is created

var y = 234;
var z = y;
—-
var y = #8454; // y pointing to address of the value 234

var z = y;

var z = #5411; // z pointing to a completely new address of the value 234

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

Question 31

how does the assignment operator (=) behave with non-primitive types?

Answer 31

Non-primitive data types are always passed by reference.

var obj = { name: “Vivek”, surname: “Bisht” };
var obj2 = obj;

In the above example, the assign operator directly passes the location of the variable obj to the variable obj2. In other words, the reference of the variable obj is passed to the variable obj2.

var obj = #8711; // obj pointing to address of { name: “Vivek”, surname: “Bisht” }
var obj2 = obj;

var obj2 = #8711; // obj2 pointing to the same address

// changing the value of obj1

obj.name = “Akki”;
console.log(obj2);

// Returns {name:”Akki”, surname:”Bisht”} since both the variables are pointing to the same address.

From the above example, we can see that while passing non-primitive data types, the assigned operator directly passes the address (reference).

Question 32

What is an Immediately Invoked Function in JavaScript?

Answer 32

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

Syntax of IIFE :

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

To understand IIFE, we need to understand the two sets of parentheses that are added while creating an IIFE :

1. The first set of parenthesis:

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

While executing javascript code, whenever the compiler sees the word “function”, it assumes that we are declaring a function in the code. Therefore, if we do not use the first set of parentheses, the compiler throws an error because it thinks we are declaring a function, and by the syntax of declaring a function, a function should always have a name.

function() {
//Do something;
}
// Compiler gives an error since the syntax of declaring a function is wrong in the code above.

2. The second set of parenthesis:

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

From the definition of an IIFE, we know that our code should run as soon as it is defined. A function runs only when it is invoked. If we do not invoke the function, the function declaration is returned:

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

// Returns the function declaration
Therefore to invoke the function, we use the second set of parenthesis.

Question 33

What do you mean by strict mode in javascript and characteristics of javascript strict-mode?

Answer 33

In ECMAScript 5, a new feature called JavaScript Strict Mode allows you to write a code or a function in a “strict” operational environment. In most cases, this language is ‘not particularly severe’ when it comes to throwing errors. In ‘Strict mode,’ however, all forms of errors, including silent errors, will be thrown. As a result, debugging becomes a lot simpler. Thus programmer’s chances of making an error are lowered.

Characteristics of strict mode in javascript

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

Question 34

Explain Higher Order Functions in javascript.

Answer 34

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

Higher-order functions are a result of functions being first-class citizens in javascript.

Examples of higher-order functions:

function higherOrder(fn) {
fn();
}

higherOrder(function() { console.log(“Hello world”) });
function higherOrder2() {
return function() {
return “Do something”;
}
}
var x = higherOrder2();
x() // Returns “Do something”

Question 35

Explain “this” keyword.

Answer 35

The “this” keyword refers to the object that the function is a property of.

The value of the “this” keyword will always depend on the object that is invoking the function.

The silly way to understand the “this” keyword is, whenever the function is invoked, check the object before the dot. The value of this . keyword will always be the object before the dot.

If there is no object before the dot-like in example1, the value of this keyword will be the global object.

Question 36

What do you mean by Self Invoking Functions?

Answer 36

Without being requested, a self-invoking expression is automatically invoked (initiated). If a function expression is followed by (), it will execute automatically. A function declaration cannot be invoked by itself.

Normally, we declare a function and call it, however, anonymous functions may be used to run a function automatically when it is described and will not be called again. And there is no name for these kinds of functions.

Question 37

call()

Answer 37

It’s a predefined method in javascript.
This method invokes a method (function) by specifying the owner object.

Question 38

apply()

Answer 38

The apply method is similar to the call() method. The only difference is that,

call() method takes arguments separately whereas, apply() method takes arguments as an array.

Question 39

bind():

Answer 39

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

Question 40

What is the difference between exec () and test () methods in javascript?

Answer 40

1. test () and exec () are RegExp expression methods used in javascript.
2. We’ll use exec () to search a string for a specific pattern, and if it finds it, it’ll return the pattern directly; else, it’ll return an ‘empty’ result.
3. We will use a test () to find a string for a specific pattern. It will return the Boolean value ‘true’ on finding the given text otherwise, it will return ‘false’.

Question 41

What is currying in JavaScript?

Answer 41

Currying is an advanced technique to transform a function of arguments n, to n functions of one or fewer arguments.

Example of a curried function:

function add (a) {
return function(b){
return a + b;
}
}
add(3)(4)

By using the currying technique, we do not change the functionality of a function, we just change the way it is invoked.

Question 42

What are some advantages of using External JavaScript?

Answer 42

External JavaScript is the JavaScript Code (script) written in a separate file with the extension.js, and then we link that file inside the <head> or <body> element of the HTML file where the code is to be placed.

Some advantages of external javascript are:

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

Question 43

Global Scope

Answer 43

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

Question 44

Function Scope:

Answer 44

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

Question 45

Block Scope:

Answer 45

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

Question 46

Scope Chain

Answer 46

JavaScript engine also uses Scope to find variables. Let’s understand that using an example:

As you can see in the code, if the javascript engine does not find the variable in local scope, it tries to check for the variable in the outer scope. If the variable does not exist in the outer scope, it tries to find the variable in the global scope.

If the variable is not found in the global space as well, a reference error is thrown.

Question 47

Explain Closures in JavaScript.

Answer 47

Closures are an ability of a function to remember the variables and functions that are declared in its outer scope.
—– example
function randomFunc(){
var obj1 = {name:”Vivian”, age:45};

return function(){
console.log(obj1.name + “ is “+ “awesome”); // Has access to obj1 even when the randomFunc function is executed

}
}

var initialiseClosure = randomFunc(); // Returns a function
initialiseClosure();
——
randomFunc(), instead of destroying the value of obj1 after execution, saves the value in the memory for further reference. This is the reason why the returning function is able to use the variable declared in the outer scope even after the function is already executed.

This ability of a function to store a variable for further reference even after it is executed is called Closure.

Question 48

Mention some advantages of javascript.

Answer 48

There are many advantages of javascript. Some of them are:

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

Question 49

What are object prototypes?

Answer 49

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

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

The javascript engine sees that the method push does not exist on the current array object and therefore, looks for the method push inside the Array prototype and it finds the method.

Whenever the property or method is not found on the current object, the javascript engine will always try to look in its prototype and if it still does not exist, it looks inside the prototype’s prototype and so on.

Question 50

What are callbacks?

Answer 50

A callback is a function that will be executed after another function gets executed. In javascript, functions are treated as first-class citizens, they can be used as an argument of another function, can be returned by another function, and can be used as a property of an object.

Functions that are used as an argument to another function are called callback functions.

——— example
function divideByHalf(sum){
console.log(Math.floor(sum / 2));
}

function multiplyBy2(sum){
console.log(sum * 2);
}

function operationOnSum(num1,num2,operation){
var sum = num1 + num2;
operation(sum);
}

operationOnSum(3, 3, divideByHalf); // Outputs 3

• In the code above, we are performing mathematical operations on the sum of two numbers. The operationOnSum function takes 3 arguments, the first number, the second number, and the operation that is to be performed on their sum (callback).
• Both divideByHalf and multiplyBy2 functions are used as callback functions in the code above.
• These callback functions will be executed only after the function operationOnSum is executed.
• Therefore, a callback is a function that will be executed after another function gets executed.

Question 51

What are the types of errors in javascript?

Answer 51

There are two types of errors in javascript.

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

Question 52

What is memoization?

Answer 52

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

Note- Although using memoization saves time, it results in larger consumption of memory since we are storing all the computed results.

Question 53

What is recursion in a programming language?

Answer 53

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

Example of a recursive function:

The following function calculates the sum of all the elements in an array by using recursion:

function computeSum(arr){
if(arr.length === 1){
return arr[0];
}
else{
return arr.pop() + computeSum(arr);
}
}
computeSum([7, 8, 9, 99]); // Returns 123

Question 54

What is the use of a constructor function in javascript?

Answer 54

Constructor functions are used to create objects in javascript.

When do we use constructor functions?

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

Note- The name of a constructor function should always be written in Pascal Notation: every word should start with a capital letter.

Question 55

What is DOM?

Answer 55

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

Question 56

Which method is used to retrieve a character from a certain index?

Answer 56

The charAt() function of the JavaScript string finds a char element at the supplied index. The index number begins at 0 and continues up to n-1, Here n is the string length. The index value must be positive, higher than, or the same as the string length.

Question 57

What do you mean by BOM?

Answer 57

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

Question 58

What is the distinction between client-side and server-side JavaScript?

Answer 58

Client-side JavaScript is made up of two parts, a fundamental language and predefined objects for performing JavaScript in a browser. JavaScript for the client is automatically included in the HTML pages. At runtime, the browser understands this script.

Server-side JavaScript, involves the execution of JavaScript code on a server in response to client requests. It handles these requests and delivers the relevant response to the client, which may include client-side JavaScript for subsequent execution within the browser.

Question 59

What is the biggest difference between arrow functions and the traditional function expression?

Answer 59

The biggest difference between the traditional function expression and the arrow function is the handling of this keyword. By general definition, this keyword always refers to the object that is calling the function.

—- example
var obj1 = {
valueOfThis: function(){
return this;
}
}
var obj2 = {
valueOfThis: ()=>{
return this;
}
}

obj1.valueOfThis(); // Will return the object obj1
obj2.valueOfThis(); // Will return window/global object
———

As you can see in the code above, obj1.valueOfThis() returns obj1 since this keyword refers to the object calling the function.

In the arrow functions, there is no binding of this keyword. This keyword inside an arrow function does not refer to the object calling it. It rather inherits its value from the parent scope which is the window object in this case. Therefore, in the code above, obj2.valueOfThis() returns the window object.

Question 60

What are arrow functions?

Answer 60

Arrow functions were introduced in the ES6 version of javascript. They provide us with a new and shorter syntax for declaring functions. Arrow functions can only be used as a function expression.

Arrow functions are declared without the function keyword. If there is only one returning expression then we don’t need to use the return keyword as well in an arrow function as shown in the example above. Also, for functions having just one line of code, curly braces { } can be omitted.

If the function takes in only one argument, then the parenthesis () around the parameter can be omitted as shown in the code above.

Question 61

What do mean by prototype design pattern?

Answer 61

The Prototype Pattern produces different objects, but instead of returning uninitialized objects, it produces objects that have values replicated from a template – or sample – object. Also known as the Properties pattern, the Prototype pattern is used to create prototypes.

The introduction of business objects with parameters that match the database’s default settings is a good example of where the Prototype pattern comes in handy. The default settings for a newly generated business object are stored in the prototype object.

The Prototype pattern is hardly used in traditional languages, however, it is used in the development of new objects and templates in JavaScript, which is a prototypal language.

Question 62

Differences between declaring variables using var, let and const.

Answer 62

• The variables declared with the let keyword in the global scope behave just like the variable declared with the var keyword in the global scope.
• Variables declared in the global scope with var and let keywords can be accessed from anywhere in the code.
• But, there is one difference! Variables that are declared with the var keyword in the global scope are added to the window/global object. Therefore, they can be accessed using window.variableName.
• Whereas, the variables declared with the let keyword are not added to the global object, therefore, trying to access such variables using window.variableName results in an error.

Question 63

var vs let in functional scope

Answer 63

Variables are declared in a functional/local scope using var and let keywords behave exactly the same, meaning, they cannot be accessed from outside of the scope.

——- example
function varVsLetFunction(){
let awesomeCar1 = “Audi”;
var awesomeCar2 = “Mercedes”;
}

console.log(awesomeCar1); // Throws an error
console.log(awesomeCar2); // Throws an error

{
var variable3 = [1, 2, 3, 4];
}
console.log(variable3); // Outputs [1,2,3,4]

{
let variable4 = [6, 55, -1, 2];
}
console.log(variable4); // Throws error

for(let i = 0; i < 2; i++){
//Do something
}
console.log(i); // Throws error

for(var j = 0; j < 2; i++){
// Do something
}
console.log(j) // Outputs 2
——

• Variables declared with var keyword do not have block scope. It means a variable declared in block scope {} with the var keyword is the same as declaring the variable in the global scope.
• Variables declared with let keyword inside the block scope cannot be accessed from outside of the block.

Question 64

What is a block in JavaScript?

Answer 64

In javascript, a block means the code written inside the curly braces {}.

Question 65

var vs let in block scope

Answer 65

• Variables declared with var keyword do not have block scope. It means a variable declared in block scope {} with the var keyword is the same as declaring the variable in the global scope.
• Variables declared with let keyword inside the block scope cannot be accessed from outside of the block.

Question 66

Const keyword

Answer 66

Variables with the const keyword behave exactly like a variable declared with the let keyword with only one difference, any variable declared with the const keyword cannot be reassigned.

——– example
const x = {name:”Vivek”};

x = {address: “India”}; // Throws an error
x.name = “Nikhil”; // No error is thrown

const y = 23;
y = 44; // Throws an error

In the code above, although we can change the value of a property inside the variable declared with const keyword, we cannot completely reassign the variable itself.

Question 67

What is the rest parameter?

Answer 67

• It provides an improved way of handling the parameters of a function.
• Using the rest parameter syntax, we can create functions that can take a variable number of arguments.
• Any number of arguments will be converted into an array using the rest parameter.
• It also helps in extracting all or some parts of the arguments.
• Rest parameters can be used by applying three dots (…) before the parameters.

**Note- Rest parameter should always be used at the last parameter of a function:

Question 68

Spread operator (…):

Answer 68

Although the syntax of the spread operator is exactly the same as the rest parameter, the spread operator is used to spreading an array, and object literals. We also use spread operators where one or more arguments are expected in a function call.

——— example
function addFourNumbers(num1,num2,num3,num4){
return num1 + num2 + num3 + num4;
}

let fourNumbers = [5, 6, 7, 8];
addFourNumbers(…fourNumbers);
// Spreads [5,6,7,8] as 5,6,7,8

let array1 = [3, 4, 5, 6];
let clonedArray1 = […array1];
// Spreads the array into 3,4,5,6
console.log(clonedArray1); // Outputs [3,4,5,6]

let obj1 = {x:’Hello’, y:’Bye’};
let clonedObj1 = {…obj1}; // Spreads and clones obj1
console.log(obj1);

let obj2 = {z:’Yes’, a:’No’};
let mergedObj = {…obj1, …obj2}; // Spreads both the objects and merges it
console.log(mergedObj);
// Outputs {x:’Hello’, y:’Bye’,z:’Yes’,a:’No’};

Question 69

What are the key differences between rest parameter and spread operator?

Answer 69

• Rest parameter is used to take a variable number of arguments and turns them into an array while the spread operator takes an array or an object and spreads it
• Rest parameter is used in function declaration whereas the spread operator is used in function calls.

Question 70

In JavaScript, how many different methods can you make an object?

Answer 70

In JavaScript, there are several ways to declare or construct an object.

1. Object.
2. using Class.
3. create Method.
4. Object Literals.
5. using Function.
6. Object Constructor.

Question 71

What is the use of promises in javascript?

Answer 71

Promises are used to handle asynchronous operations in javascript.

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

Promises are used to handle asynchronous operations like server requests, for ease of understanding, we are using an operation to calculate the sum of three elements.

Question 72

How many states does a Promise object have?

Answer 72

Promise object has four states -

1. Pending - Initial state of promise. This state represents that the promise has neither been fulfilled nor been rejected, it is in the pending state.
2. Fulfilled - This state represents that the promise has been fulfilled, meaning the async operation is completed.
3. Rejected - This state represents that the promise has been rejected for some reason, meaning the async operation has failed.
4. Settled - This state represents that the promise has been either rejected or fulfilled.

Question 73

How is a promise created?

Answer 73

A promise is created using the Promise constructor which takes in a callback function with two parameters, resolve and reject respectively.

resolve is a function that will be called when the async operation has been successfully completed.

reject is a function that will be called, when the async operation fails or if some error occurs.

Question 74

How do you consume a promise?

Answer 74

We can consume any promise by attaching then() and catch() methods to the consumer.

then() method is used to access the result when the promise is fulfilled.

catch() method is used to access the result/error when the promise is rejected. In the code below, we are consuming the promise:

—– example
sumOfThreeElements(4, 5, 6)
.then(result=> console.log(result))
.catch(error=> console.log(error));
// In the code above, the promise is fulfilled so the then() method gets executed

sumOfThreeElements(7, 0, 33, 41)
.then(result => console.log(result))
.catch(error=> console.log(error));
// In the code above, the promise is rejected hence the catch() method gets executed

Question 75

What are classes in javascript?

Answer 75

Introduced in the ES6 version, classes are nothing but syntactic sugars for constructor functions. They provide a new way of declaring constructor functions in javascript. Below are the examples of how classes are declared and used:

Key points to remember about classes:

• Unlike functions, classes are not hoisted. A class cannot be used before it is declared.
• A class can inherit properties and methods from other classes by using the extend keyword.
• All the syntaxes inside the class must follow the strict mode(‘use strict’) of javascript. An error will be thrown if the strict mode rules are not followed.

Question 76

What are generator functions?

Answer 76

Introduced in the ES6 version, generator functions are a special class of functions.

They can be stopped midway and then continue from where they had stopped.

Generator functions are declared with the function* keyword instead of the normal function keyword:

function normalFunc(){
return 22;
console.log(2); // This line of code does not get executed
}
—–
In the case of generator functions, when called, they do not execute the code, instead, they return a generator object. This generator object handles the execution.
——
function* genFunc(){
yield 3;
yield 4;
}
genFunc(); // Returns Object [Generator] {}
——
The generator object consists of a method called next(), this method when called, executes the code until the nearest yield statement, and returns the yield value.

genFunc().next(); // Returns {value: 3, done:false}
—-
As one can see the next method returns an object consisting of a value and done properties. Value property represents the yielded value. Done property tells us whether the function code is finished or not. (Returns true if finished).

function* iteratorFunc() {
let count = 0;
for (let i = 0; i < 2; i++) {
count++;
yield i;
}
return count;
}

let iterator = iteratorFunc();
console.log(iterator.next()); // {value:0,done:false}
console.log(iterator.next()); // {value:1,done:false}
console.log(iterator.next()); // {value:2,done:true}
—-
As you can see in the code above, the last line returns done:true, since the code reaches the return statement.

Question 77

Explain WeakSet in javascript.

Answer 77

In javascript, a Set is a collection of unique and ordered elements. Just like Set, WeakSet is also a collection of unique and ordered elements with some key differences:

• Weakset contains only objects and no other type.
• An object inside the weakset is referenced weakly. This means, that if the object inside the weakset does not have a reference, it will be garbage collected.
• ## Unlike Set, WeakSet only has three methods, add() , delete() and has() .const newSet = new Set([4, 5, 6, 7]);
  console.log(newSet);// Outputs Set {4,5,6,7}

const newSet2 = new WeakSet([3, 4, 5]); //Throws an error

let obj1 = {message:”Hello world”};
const newSet3 = new WeakSet([obj1]);
console.log(newSet3.has(obj1)); // true

Question 78

Why do we use callbacks?

Answer 78

A callback function is a method that is sent as an input to another function (now let us name this other function “thisFunction”), and it is performed inside the thisFunction after the function has completed execution.

JavaScript is a scripting language that is based on events. Instead of waiting for a reply before continuing, JavaScript will continue to run while monitoring for additional events. Callbacks are a technique of ensuring that a particular code does not run until another code has completed its execution.

Question 79

Explain WeakMap in javascript.

Answer 79

In javascript, Map is used to store key-value pairs. The key-value pairs can be of both primitive and non-primitive types. WeakMap is similar to Map with key differences:

• The keys and values in weakmap should always be an object.
• If there are no references to the object, the object will be garbage collected.

const map1 = new Map();
map1.set(‘Value’, 1);

const map2 = new WeakMap();
map2.set(‘Value’, 2.3); // Throws an error

let obj = {name:”Vivek”};
const map3 = new WeakMap();
map3.set(obj, {age:23});

Question 80

What is Object Destructuring?

Answer 80

BEFORE:
const classDetails = {
strength: 78,
benches: 39,
blackBoard:1
}

const classStrength = classDetails.strength;
const classBenches = classDetails.benches;
const classBlackBoard = classDetails.blackBoard;
—-
AFTER intro of Object Destructuring in ES6

const classDetails = {
strength: 78,
benches: 39,
blackBoard:1
}

const {strength:classStrength, benches:classBenches,blackBoard:classBlackBoard} = classDetails;

console.log(classStrength); // Outputs 78
console.log(classBenches); // Outputs 39
console.log(classBlackBoard); // Outputs 1
—–
As one can see, using object destructuring we have extracted all the elements inside an object in one line of code. If we want our new variable to have the same name as the property of an object we can remove the colon:

const {strength:strength} = classDetails;
// The above line of code can be written as:
const {strength} = classDetails;
—-
Array destructuring: Before ES6 version:
const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];
const third = arr[2];
const fourth = arr[3];

The same example using object destructuring:
const arr = [1, 2, 3, 4];
const [first,second,third,fourth] = arr;
console.log(first); // Outputs 1
console.log(second); // Outputs 2
console.log(third); // Outputs 3
console.log(fourth); // Outputs 4

Question 81

Difference between prototypal and classical inheritance

Answer 81

Programers build objects, which are representations of real-time entities, in traditional OO programming. Classes and objects are the two sorts of abstractions. A class is a generalization of an object, whereas an object is an abstraction of an actual thing. A Vehicle, for example, is a specialization of a Car. As a result, automobiles (class) are descended from vehicles (object).

Classical inheritance differs from prototypal inheritance in that classical inheritance is confined to classes that inherit from those remaining classes, but prototypal inheritance allows any object to be cloned via an object linking method. Despite going into too many specifics, a prototype essentially serves as a template for those other objects, whether they extend the parent object or not.

Question 82

What is a Temporal Dead Zone?

Answer 82

Temporal Dead Zone is a behaviour that occurs with variables declared using let and const keywords. It is a behaviour where we try to access a variable before it is initialized. Examples of temporal dead zone:

x = 23; // Gives reference error

let x;

function anotherRandomFunc(){
message = “Hello”; // Throws a reference error

let message;
}
anotherRandomFunc();

In the code above, both in the global scope and functional scope, we are trying to access variables that have not been declared yet. This is called the Temporal Dead Zone.

Question 83

What do you mean by JavaScript Design Patterns?

Answer 83

JavaScript design patterns are repeatable approaches for errors that arise sometimes when building JavaScript browser applications. They truly assist us in making our code more stable.

They are divided mainly into 3 categories

Creational Design Pattern
Structural Design Pattern
Behavioral Design Pattern.

Question 84

Creational Design Pattern:

Answer 84

The object generation mechanism is addressed by the JavaScript Creational Design Pattern. They aim to make items that are appropriate for a certain scenario.

Question 85

Structural Design Pattern:

Answer 85

The JavaScript Structural Design Pattern explains how the classes and objects we’ve generated so far can be combined to construct bigger frameworks. This pattern makes it easier to create relationships between items by defining a straightforward way to do so.

Question 86

Behavioral Design Pattern:

Answer 86

This design pattern highlights typical patterns of communication between objects in JavaScript. As a result, the communication may be carried out with greater freedom.

Question 87

Is JavaScript a pass-by-reference or pass-by-value language?

Answer 87

The variable’s data is always a reference for objects, hence it’s always pass by value. As a result, if you supply an object and alter its members inside the method, the changes continue outside of it. It appears to be pass by reference in this case. However, if you modify the values of the object variable, the change will not last, demonstrating that it is indeed passed by value.

Question 88

Difference between Async/Await and Generators usage to achieve the same functionality.

Answer 88

• Generator functions are run by their generator yield by yield which means one output at a time, whereas Async-await functions are executed sequentially one after another.
• Async/await provides a certain use case for Generators easier to execute.
• The output result of the Generator function is always value: X, done: Boolean, but the return value of the Async function is always an assurance or throws an error.

Question 89

What are the primitive data types in JavaScript?

Answer 89

A primitive is a data type that isn’t composed of other data types. It’s only capable of displaying one value at a time. By definition, every primitive is a built-in data type (the compiler must be knowledgeable of them) nevertheless, not all built-in datasets are primitives. In JavaScript, there are 5 different forms of basic data. The following values are available:

1. Boolean
2. Undefined
3. Null
4. Number
5. String

Question 90

What is the role of deferred scripts in JavaScript?

Answer 90

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

Question 91

What has to be done in order to put Lexical Scoping into practice?

Answer 91

To support lexical scoping, a JavaScript function object’s internal state must include not just the function’s code but also a reference to the current scope chain.

Question 92

What is the purpose of the following JavaScript code?

var scope = “global scope”;
function check()
{
var scope = “local scope”;
function f()
{
return scope;
}
return f;
}

Answer 92

Every executing function, code block, and script as a whole in JavaScript has a related object known as the Lexical Environment. The preceding code line returns the value in scope.

Question 93

Guess the outputs of the following codes:

Answer 93

Answers:

Code 1 - Outputs 2 and 12. Since, even though let variables are not hoisted, due to the async nature of javascript, the complete function code runs before the setTimeout function. Therefore, it has access to both x and y.

Code 2 - Outputs 3, three times since variable declared with var keyword does not have block scope. Also, inside the for loop, the variable i is incremented first and then checked.

Code 3 - Output in the following order:
2
4
3
1 // After two seconds
Even though the second timeout function has a waiting time of zero seconds, the javascript engine always evaluates the setTimeout function using the Web API, and therefore, the complete function executes before the setTimeout function can execute.

Question 94

How do you create an Object using literal syntax?

Answer 94

The object literal syntax (or object initializer), is a comma-separated set of name-value pairs wrapped in curly braces.

var object = {
name: “Sudheer”,
age: 34
};

Object literal property values can be of any data type, including array, function, and nested object.
*Note: This is one of the easiest ways to create an object.

Question 95

How do you create an Object using constructor?

Answer 95

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

var object = new Object();

The Object() is a built-in constructor function so “new” keyword is not required. The above code snippet can be re-written as:

var object = Object();

Question 96

How do you create an Object using the create method?

Answer 96

The create method of Object is used to create a new object by passing the specificied prototype object and properties as arguments, i.e., this pattern is helpful to create new objects based on existing objects. The second argument is optional and it is used to create properties on a newly created object.

The following code creates a new empty object whose prototype is null.

var object = Object.create(null);

The following example creates an object along with additional new properties.

let vehicle = {
wheels: ‘4’,
fuelType: ‘Gasoline’,
color: ‘Green’
}
let carProps = {
type: {
value: ‘Volkswagen’
},
model: {
value: ‘Golf’
}
}

var car = Object.create(vehicle, carProps);
console.log(car);

Question 97

How do you create an Object using the Function constructor?

Answer 97

In this approach, 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(“Sudheer”);

Question 98

How do you create an Object using the Function constructor with prototype?

Answer 98

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

function Person() {}
Person.prototype.name = “Sudheer”;
var object = new Person();

This is equivalent to creating an instance with Object.create method with a function prototype and then calling that function with an instance and parameters as arguments.

function func() {}
new func(x, y, z);

(OR)

// Create a new instance using function prototype.
var newInstance = Object.create(func.prototype)

// Call the function
var result = func.call(newInstance, x, y, z),

// If the result is a non-null object then use it otherwise just use the new instance.
console.log(result && typeof result === ‘object’ ? result : newInstance);

Question 99

How do you create an Object using the Object’s assign method?

Answer 99

The Object.assign method is used to copy all the properties from one or more source objects and stores them into a target object.

The following code creates a new staff object by copying properties of his working company and the car he owns.

const orgObject = { company: ‘XYZ Corp’};
const carObject = { name: ‘Toyota’};
const staff = Object.assign({}, orgObject, carObject);

Question 100

How do you create an Object using ES6 Class syntax?

Answer 100

ES6 introduces class feature to create objects.

class Person {
constructor(name) {
this.name = name;
}
}

var object = new Person(“Sudheer”);

Question 101

How do you create an Object using the Singleton pattern?

Answer 101

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

var object = new (function () {
this.name = “Sudheer”;
})();

Question 102

What is a prototype chain?

Answer 102

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.

Question 103

What is the difference between Call, Apply and Bind?

Answer 103

Call: The call() method invokes a function with a given this value and arguments provided one by one

Apply: Invokes the function with a given this value and allows you to pass in arguments as an array

Bind: returns a new function, allowing you to pass any number of arguments

Call and Apply are pretty much 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.

Bind creates a new function that will have this set to the first parameter passed to bind().

Question 104

An example use of Call()

Answer 104

Call: The call() method invokes a function with a given this value and arguments provided one by one

Question 105

An example use of Apply()

Answer 105

Apply: Invokes the function with a given this value and allows you to pass in arguments as an array

Question 106

An example use of bind()

Answer 106

Bind: returns a new function, allowing you to pass any number of arguments

Question 107

What is JSON and its common operations?

Answer 107

JSON is a text-based data format following JavaScript object syntax, which was popularized by Douglas Crockford. It is useful when you want to transmit data across a network. It is basically just a text file with an extension of .json, and a MIME type of application/json

1. Parsing: Converting a string to a native object
   ex. –> JSON.parse(text);
2. Stringification: Converting a native object to a string so that it can be transmitted across the network
   ex. –> JSON.stringify(object);

Question 108

What is the purpose of the array slice method?

Answer 108

The slice() method returns the selected elements in an array as a new array object. It selects the elements starting at the given start argument, and ends at the given optional end argument without including the last element. If you omit the second argument then it selects till the end of the array.

*Note: Slice method doesn’t mutate the original array but it returns the subset as a new array.

Some of the examples of this method are,

Question 109

What is the purpose of the array splice() method?

Answer 109

The splice() method adds/removes items to/from an array, and then returns the removed item. The first argument specifies the array position/index for insertion or deletion whereas the optional second argument indicates the number of elements to be deleted. Each additional argument is added to the array.

*Note: Splice method modifies the original array and returns the deleted array.

let arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal2 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal3 = [1, 2, 3, 4, 5];

let arrayIntegers1 = arrayIntegersOriginal1.splice(0, 2); // returns [1, 2]; original array: [3, 4, 5]

let arrayIntegers2 = arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array: [1, 2, 3]

let arrayIntegers3 = arrayIntegersOriginal3.splice(3, 1, “a”, “b”, “c”); //returns [4]; original array: [1, 2, 3, “a”, “b”, “c”, 5]

Question 110

What is the difference between slice and splice?

Answer 110

Question 111

How do you compare Object and Map?

Answer 111

Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Due to this reason, Objects have been used as Maps historically. But there are important differences that make using a Map preferable in certain cases:

1. The keys of an Object can be Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and any primitive.
2. The keys in a Map are ordered while keys added to Object are not. Thus, when iterating over it, a Map object returns keys in the order of insertion.
3. You can get the size of a Map easily with the size property, while the number of properties in an Object must be determined manually.
4. A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.
5. An Object has a prototype, so there are default keys in an object that could collide with your keys if you’re not careful. As of ES5 this can be bypassed by creating an object(which can be called a map) using Object.create(null), but this practice is seldom done.
6. A Map may perform better in scenarios involving frequent addition and removal of key pairs.

Question 112

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

Answer 112

JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

1. Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
2. Two numbers are strictly equal when they are numerically equal, i.e., having the same number value. There are two special cases in this,
   - NaN is not equal to anything, including NaN.
   - Positive and negative zeros are equal to one another.
3. Two Boolean operands are strictly equal if both are true or both are false.
4. Two objects are strictly equal if they refer to the same Object.
5. Null and Undefined types are not equal with ===, but equal with == . i.e, null===undefined –> false, but null==undefined –> true
   Some of the example which covers the above cases:

Question 113

What are lambda expressions or arrow functions?

Answer 113

An arrow function is a shorter/concise syntax for a function expression and does not have its own this, arguments, super, or new.target. These functions are best suited for non-method functions, and they cannot be used as constructors.

Some of the examples of arrow functions are listed as below,

Question 114

What is a first class function in JavaScript?

Answer 114

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

Question 115

What is a first order function in JavaScript?

Answer 115

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

const firstOrder = () => console.log(“I am a first order function!”);

Question 116

What is a higher order function in JavaScript?

Answer 116

A higher-order function is a function that accepts another function as an argument or returns a function as a return value or both.

Question 117

What is the currying function in JavaScript?

Answer 117

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. Currying is named after a mathematician Haskell Curry. By applying currying, an n-ary function turns into a unary function.

Curried functions are great to improve code reusability and functional composition.

Let’s take an example of n-ary function and how it turns into a currying function,

Question 118

What is a unary function in JavaScript?

Answer 118

A 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 = (a) => console.log(a + 10); // Add 10 to the given argument and display the value

Question 119

What is a pure function in JavaScript?

Answer 119

A Pure function is a function where the return value is only determined by its arguments without any side effects. i.e, If you call a function with the same arguments ‘n’ number of times and ‘n’ number of places in the application then it will always return the same value.

As per the attached code snippets, the Push function is impure itself by altering the array and returning a push number index independent of the parameter value, whereas Concat on the other hand takes the array and concatenates it with the other array producing a whole new array without side effects. Also, the return value is a concatenation of the previous array.

Remember that Pure functions are important as they simplify unit testing without any side effects and no need for dependency injection. They also avoid tight coupling and make it harder to break your application by not having any side effects. These principles are coming together with the Immutability concept of ES6: giving preference to const over let usage.

Question 120

What is the purpose of the let keyword in JS?

Answer 120

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)

Question 121

What is the difference between let and var? (tabular format)

Answer 121

Question 122

What is the difference between let and var? (code example)

Answer 122

Question 123

What is the reason to choose the name let as a keyword in JS?

Answer 123

let is a mathematical statement that was adopted by early programming languages like Scheme and Basic. It has been borrowed from dozens of other languages that use let already as a traditional keyword as close to var as possible.

Question 124

How do you redeclare variables in a switch block without an error in JS?

Answer 124

Question 125

What is the Temporal Dead Zone in JS?

Answer 125

The Temporal Dead Zone(TDZ) is a specific period or area of a block where a variable is inaccessible until it has been intialized with a value. This 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.

Let’s see this behavior with an example,

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

Question 126

What is an IIFE (Immediately Invoked Function Expression)

Answer 126

Question 127

How do you decode or encode a URL in JavaScript?

Answer 127

Question 128

What is memoization in JavaScript?

Answer 128

Memoization is a functional 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,

Question 129

What is Hoisting in JavaScript?

Answer 129

Hoisting is a JavaScript mechanism where variables, function declarations and classes are moved to the top of their scope before code execution. Remember that JavaScript only hoists declarations, not initialisation.

Question 130

What are classes in ES6?

Answer 130

Question 131

What are closures in JavaScript?

Answer 131

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, functions and other data even after the outer function has finished its execution. The closure has three scope chains.

1. Own scope where variables defined between its curly brackets
2. Outer function’s variables
3. Global variables

Question 132

What are modules in JavaScript?

Answer 132

Modules refer to small units of independent, reusable code and also act as the foundation of many JavaScript design patterns. Most of the JavaScript modules export an object literal, a function, or a constructor

Question 133

Why do you need modules in JavaScript?

Answer 133

Below are the list of benefits using modules in javascript ecosystem

1. Maintainability
2. Reusability
3. Namespacing

Question 134

What is scope in javascript?

Answer 134

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.

Question 135

What is a service worker in javascript?

Answer 135

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.

Question 136

How do you manipulate DOM using a service worker?

Answer 136

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.

Question 137

How do you reuse information across service worker restarts?

Answer 137

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.

Question 138

What is IndexedDB?

Answer 138

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.

Question 139

What is web storage?

Answer 139

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.

Local storage: It stores data for current origin with no expiration date.

Session storage: It stores data for one session and the data is lost when the browser tab is closed.

Question 140

What is a post message?

Answer 140

Post message is a method that enables cross-origin communication between Window objects.(i.e, between a page and a pop-up that it spawned, or between a page and an iframe embedded within it).

Generally, scripts on different pages are allowed to access each other if and only if the pages follow same-origin policy(i.e, pages share the same protocol, port number, and host).

Question 141

What is a Cookie?

Answer 141

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. For example, you can create a cookie named username as below,

Question 142

Why do you need a Cookie?

Answer 142

Cookies are used to remember information about the user profile(such as username). It basically involves two steps,

When a user visits a web page, the user profile can be stored in a cookie.
Next time the user visits the page, the cookie remembers the user profile.

Question 143

What are the options in a cookie?

Answer 143

There are few below options available for a cookie,

1. By default, the cookie is deleted when the browser is closed but you can change this behavior by setting expiry date (in UTC time).
   ex.
   document.cookie = “username=John; expires=Sat, 8 Jun 2019 12:00:00 UTC”;
2. 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.
   ex.
   document.cookie = “username=John; path=/services”;

Question 144

How do you delete a cookie?

Answer 144

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

Question 145

What are the differences between cookie, local storage and session storage?

Answer 145

Question 146

What is the main difference between localStorage and sessionStorage?

Answer 146

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

Question 147

How do you access web storage?

Answer 147

Question 148

What are the methods available on session storage?

Answer 148

Question 149

What is a storage event and its event handler?

Answer 149

Question 150

Why do you need web storage?

Answer 150

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.

Question 151

How do you check web storage browser support?

Answer 151

Question 152

How do you check web workers browser support?

Answer 152

Question 153

Give an example of a web worker.

Answer 153

Question 154

What are the restrictions of web workers on DOM?

Answer 154

WebWorkers don’t have access to below javascript objects since they are defined in an external files

1. Window object
2. Document object
3. Parent object

Question 155

What is a promise?

Answer 155

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

The usage of a promise would be as below,

const promise = new Promise(
(resolve) => {
setTimeout(() => {
resolve(“I’m a Promise!”);
}, 5000);
},
(reject) => {}
);

promise.then((value) => console.log(value));

Question 156

Why do you need a promise?

Answer 156

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

Question 157

What are the three states of promise?

Answer 157

Promises have three states:

1. Pending: This is an initial state of the Promise before an operation begins
2. Fulfilled: This state indicates that the specified operation was completed.
3. Rejected: This state indicates that the operation did not complete. In this case an error value will be thrown.

Question 158

What is a callback function?

Answer 158

Question 159

Why do we need callbacks?

Answer 159

Question 160

What is a callback hell?

Answer 160

Question 161

What are server-sent events?

Answer 161

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.

Question 162

How do you receive server-sent event notifications?

Answer 162

Question 163

How do you check browser support for server-sent events?

Answer 163

Question 164

What are the events available for server sent events?

Answer 164

Question 165

What are the main rules of promise?

Answer 165

A promise must follow a specific set of rules:

1. A promise is an object that supplies a standard-compliant .then() method
2. A pending promise may transition into either fulfilled or rejected state
3. A fulfilled or rejected promise is settled and it must not transition into any other state.
4. Once a promise is settled, the value must not change.

Question 166

What is callback in callback?

Answer 166

Question 167

What is promise chaining?

Answer 167

Question 168

What is promise.all?

Answer 168

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.

*Note: Remember that the order of the promises(output the result) is maintained as per input order.

Promise.all([Promise1, Promise2, Promise3]) .then(result) => { console.log(result) }) .catch(error => console.log(Error in promises ${error}))

Question 169

What is the purpose of the race method in promise?

Answer 169

Question 170

What is a strict mode in javascript?

Answer 170

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.

Question 171

Why do you need strict mode?

Answer 171

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.

Question 172

How do you declare strict mode?

Answer 172

Question 173

What is the purpose of double exclamation?

Answer 173

Question 174

What is the purpose of the delete operator?

Answer 174

Question 175

What is typeof operator in JS?

Answer 175

Question 176

What is undefined property in JS?

Answer 176

Question 177

What is null value in JS?

Answer 177

Question 178

What is the difference between null and undefined?

Answer 178

Question 179

What is eval?

Answer 179

Question 180

What is the difference between window and document in JS?

Answer 180

Question 181

How do you access history in javascript?

Answer 181

Question 182

How do you detect caps lock key turned on or not?

Answer 182

Question 183

What is isNaN?

Answer 183

The isNaN() function is used to determine whether a value is an illegal number (Not-a-Number) or not. i.e, This function returns true if the value equates to NaN. Otherwise it returns false.

isNaN(“Hello”); //true
isNaN(“100”); //false

Question 184

What are the differences between undeclared and undefined variables in JS?

Answer 184

Question 185

What are global variables in JS?

Answer 185

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

Question 186

What are the problems with global variables?

Answer 186

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.

Question 187

What is NaN property in JS?

Answer 187

The NaN property is a global property that represents “Not-a-Number” value. i.e, It indicates that a value is not a legal number. It is very rare to use NaN in a program but it can be used as return value for few cases

Math.sqrt(-1);
parseInt(“Hello”);

Question 188

What is the purpose of isFinite function in JS?

Answer 188

Question 189

What is an event flow in JS?

Answer 189

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

Top to Bottom(Event Capturing)
Bottom to Top (Event Bubbling)

Question 190

What is event bubbling in JS?

Answer 190

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.

Question 191

What is event capturing in JS?

Answer 191

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.

Question 192

How do you submit a form using JavaScript?

Answer 192

Question 193

How do you find operating system details in JS?

Answer 193

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

Question 194

What is the difference between document load and DOMContentLoaded events?

Answer 194

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

Question 195

What is the difference between native, host and user objects in JS?

Answer 195

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.

Question 196

What are the tools or techniques used for debugging JavaScript code?

Answer 196

You can use below tools or techniques for debugging javascript

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

Question 197

What are the pros and cons of promises over callbacks?

Answer 197

Question 198

What is the difference between an attribute and a property?

Answer 198

Question 199

What is same-origin policy?

Answer 199

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

Question 200

What is the purpose of void 0 in JS?

Answer 200

Question 201

Is JavaScript a compiled or interpreted language?

Answer 201

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.

Question 202

Is JavaScript a case-sensitive language?

Answer 202

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.

Question 203

Is there any relation between Java and JavaScript?

Answer 203

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

Question 204

What are events in JS?

Answer 204

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

Question 205

Who created javascript?

Answer 205

JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications. Initially it was developed under the name Mocha, but later the language was officially called LiveScript when it first shipped in beta releases of Netscape.

Question 206

What is the use of preventDefault method in JS?

Answer 206

Question 207

What is the use of stopPropagation method in JS?

Answer 207

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)

Question 208

What are the steps involved in return false usage in JS?

Answer 208

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

1. First it stops the browser’s default action or behaviour.
2. It prevents the event from propagating the DOM
3. Stops callback execution and returns immediately when called.

Question 209

What is BOM?

Answer 209

Question 210

What is the use of setTimeout?

Answer 210

Question 211

What is the use of setInterval?

Answer 211

Question 212

Why is JavaScript treated as Single threaded?

Answer 212

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.

Question 213

What is an event delegation in JS?

Answer 213

Question 214

What is ECMAScript?

Answer 214

ECMAScript is the scripting language that forms the basis of JavaScript. ECMAScript standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications. The first edition of ECMAScript was released in 1997.

Question 215

What is JSON?

Answer 215

JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is based on a subset of JavaScript language in the way objects are built in JavaScript.

Question 216

What are the syntax rules of JSON?

Answer 216

Below are the list of syntax rules of JSON

1. The data is in name/value pairs
2. The data is separated by commas
3. Curly braces hold objects
4. Square brackets hold arrays

Question 217

What is the purpose JSON stringify?

Answer 217

Question 218

How do you parse JSON string?

Answer 218

Question 219

Why do you need JSON?

Answer 219

When exchanging data between a browser and a server, the data can only be text. Since JSON is text only, it can easily be sent to and from a server, and used as a data format by any programming language.

Question 220

What are PWAs?

Answer 220

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.

Question 221

What is the purpose of clearTimeout method?

Answer 221

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.

Question 222

What is the purpose of clearInterval method?

Answer 222

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.

Question 223

How do you redirect new page in javascript?

Answer 223

Question 224

How do you check whether a string contains a substring?

Answer 224

Question 225

How do you validate an email in javascript?

Answer 225

You can validate an email in javascript using regular expressions. It is recommended to do validations on the server side instead of the client side. Because the javascript can be disabled on the client side.

function validateEmail(email) {
var re =
/^(([^<>()[]\.,;:\s@”]+(.[^<>()[]\.,;:\s@”]+)*)|(“.+”))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}

Question 226

How do you get the current url with javascript?

Answer 226

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

Question 227

What are the various url properties of location object?

Answer 227

Question 228

How do get query string values in javascript?

Answer 228

Question 229

How do you check if a key exists in an object in JS?

Answer 229

Question 230

How do you loop through or enumerate javascript object?

Answer 230

Question 231

How do you test for an empty object?

Answer 231

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

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

3. 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({});
}

Question 232

What is an arguments object in JS?

Answer 232

Question 233

How do you make first letter of the string in an uppercase in JS?

Answer 233

Question 234

What are the pros and cons of for loop in JS?

Answer 234

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

Pros
1. Works on every environment
2. You can use break and continue flow control statements

Cons
1. Too verbose
2. Imperative
3. You might face one-by-off errors

Question 235

How do you display the current date in javascript?

Answer 235

Question 236

How do you compare two date objects in JS?

Answer 236

Question 237

How do you check if a string starts with another string in JS?

Answer 237

Question 238

How do you trim a string in javascript?

Answer 238

Question 239

How do you add a key value pair in javascript

Answer 239

Question 240

Is the !– notation represents a special operator in JS?

Answer 240

No,that’s not a special operator. But it is a combination of 2 standard operators one after the other,

1. A logical not (!)
2. A prefix decrement (–)

At first, the value decremented by one and then tested to see if it is equal to zero or not for determining the truthy/falsy value.

Question 241

How do you assign default values to variables?

Answer 241

Question 242

How do you define multiline strings in JS?

Answer 242

Question 243

What is an app shell model?

Answer 243

An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native applications. It is useful for getting some initial HTML to the screen fast without a network.

Question 244

Can we define properties for functions in JS?

Answer 244

Question 245

What is the way to find the number of parameters expected by a function?

Answer 245

Question 246

What is a polyfill?

Answer 246

A polyfill is a piece of JS code used to provide modern functionality on older browsers that do not natively support it. For example, Silverlight plugin polyfill can be used to mimic the functionality of an HTML Canvas element on Microsoft Internet Explorer 7.

Question 247

What are break and continue statements in JS?

Answer 247

Question 248

What are js labels?

Answer 248

Question 249

What are the benefits of keeping declarations at the top in JS?

Answer 249

It is recommended to keep all declarations at the top of each script or function. The benefits of doing this are,

1. Gives cleaner code
2. It provides a single place to look for local variables
3. Easy to avoid unwanted global variables
4. It reduces the possibility of unwanted re-declarations

Question 250

What are the benefits of initializing variables in JS?

Answer 250

It is recommended to initialize variables because of the below benefits,

1. It gives cleaner code
2. It provides a single place to initialize variables
3. Avoid undefined values in the code

Question 251

What are the recommendations to create new object in JS?

Answer 251

It is recommended to avoid creating new objects using new Object(). Instead you can initialize values based on it’s type to create the objects.

1. Assign {} instead of new Object()
2. Assign “” instead of new String()
3. Assign 0 instead of new Number()
4. Assign false instead of new Boolean()
5. Assign [] instead of new Array()
6. Assign /()/ instead of new RegExp()
7. Assign function (){} instead of new Function()

Question 252

How do you define JSON arrays?

Answer 252

Question 253

How do you generate random integers in JS?

Answer 253

You can use Math.random() with Math.floor() to return random integers. For example, if you want generate random integers between 1 to 10, the multiplication factor should be 10,

Math.floor(Math.random() * 10) + 1; // returns a random integer from 1 to 10

Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100

Note: Math.random() returns a random number between 0 (inclusive), and 1 (exclusive)

Question 254

Can you write a random integers function to print integers with in a range in JS?

Answer 254

Question 255

What is tree shaking in JS?

Answer 255

Tree shaking is a form of dead code elimination. It means that unused modules will not be included in the bundle during the build process and for that it relies on the static structure of ES2015 module syntax,( i.e. import and export). Initially this has been popularized by the ES2015 module bundler rollup.

Question 256

What is the need of tree shaking in JS?

Answer 256

Tree Shaking can significantly reduce the code size in any application. i.e, The less code we send over the wire the more performant the application will be. For example, if we just want to create a “Hello World” Application using SPA frameworks then it will take around a few MBs, but by tree shaking it can bring down the size to just a few hundred KBs. Tree shaking is implemented in Rollup and Webpack bundlers.

Question 257

Is it recommended to use eval in JS?

Answer 257

No, it allows arbitrary code to be run which causes a security problem. As we know that the eval() function is used to run text as code. In most of the cases, it should not be necessary to use it.

Question 258

What is a Regular Expression in JS?

Answer 258

Question 259

What are the string methods available in Regular expression in JS?

Answer 259

Question 260

What are modifiers in regular expression in JS?

Answer 260

Question 261

What are regular expression patterns?

Answer 261

Question 262

[abc]:

Answer 262

Used to find any of the characters between the brackets(a,b,c)

Question 263

[0-9]:

Answer 263

Used to find any of the digits between the brackets

Question 264

(a|b):

Answer 264

Used to find any of the alternatives separated with |

Question 265

\d:

Answer 265

Used to find a digit

Question 266

\s:

Answer 266

Used to find a whitespace character

Question 267

\b:

Answer 267

Used to find a match at the beginning or ending of a word

Question 268

n+:

Answer 268

Used to find matches for any string that contains at least one n

Question 269

n*:

Answer 269

Used to find matches for any string that contains zero or more occurrences of n

Question 270

n?:

Answer 270

Used to find matches for any string that contains zero or one occurrences of n

Question 271

What is a RegExp object in JS?

Answer 271

Question 272

How do you search a string for a pattern in JS?

Answer 272

Question 273

What is the purpose of exec method in JS?

Answer 273

The purpose of exec method is similar to test method but it executes a search for a match in a specified string and returns a result array, or null instead of returning true/false.

var pattern = /you/;
console.log(pattern.exec(“How are you?”)); //[“you”, index: 8, input: “How are you?”, groups: undefined]

Question 274

How do you change the style of a HTML element in JS?

Answer 274

Question 275

What would be the result of 1+2+’3’ in JS?

Answer 275

The output is going to be 33. Since 1 and 2 are numeric values, the result of the first two digits is going to be a numeric value 3. The next digit is a string type value because of that the addition of numeric value 3 and string type value 3 is just going to be a concatenation value 33.

Question 276

What is a debugger statement in JS?

Answer 276

The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect. For example, in the below function a debugger statement has been inserted. So execution is paused at the debugger statement just like a breakpoint in the script source.

function getProfile() {
// code goes here
debugger;
// code goes here
}

Question 277

What is the purpose of breakpoints in debugging in JS?

Answer 277

You can set breakpoints in the javascript code once the debugger statement is executed and the debugger window pops up. At each breakpoint, javascript will stop executing, and let you examine the JavaScript values. After examining values, you can resume the execution of code using the play button.

Question 278

Can I use reserved words as identifiers in JS?

Answer 278

No, you cannot use the reserved words as variables, labels, object or function names. Let’s see one simple example,

var else = “hello”; // Uncaught SyntaxError: Unexpected token else

Question 279

How do you detect a mobile browser in JS?

Answer 279

You can use regex which returns a true or false value depending on whether or not the user is browsing with a mobile.

window.mobilecheck = function () {
var mobileCheck = false;
(function (a) {
if (
/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
a
) ||
/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| ||a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
a.substr(0, 4)
)
)
mobileCheck = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return mobileCheck;
};

Question 280

How do you detect a mobile browser without regexp in JS?

Answer 280

You can detect mobile browsers by simply running through a list of devices and checking if the useragent matches anything. This is an alternative solution for RegExp usage,

Question 281

How do you get the image width and height using JS?

Answer 281

You can programmatically get the image and check the dimensions(width and height) using Javascript.

Question 282

How do you make synchronous HTTP request in JS?

Answer 282

Question 283

How do you make asynchronous HTTP request in JS?

Answer 283

Question 284

How do you convert date to another timezone in javascript?

Answer 284

You can use the toLocaleString() method to convert dates in one timezone to another. For example, let’s convert current date to British English timezone as below,

console.log(event.toLocaleString(“en-GB”, { timeZone: “UTC” })); //29/06/2019, 09:56:00

Question 285

What are the properties used to get size of window in JS?

Answer 285

You can use innerWidth, innerHeight, clientWidth, clientHeight properties of windows, document element and document body objects to find the size of a window. Let’s use them combination of these properties to calculate the size of a window or document,

Question 286

What is a conditional operator in javascript?

Answer 286

The conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statements.

var isAuthenticated = false;
console.log(
isAuthenticated ? “Hello, welcome” : “Sorry, you are not authenticated”
); //Sorry, you are not authenticated

Question 287

Can you apply chaining on conditional operator in JS?

Answer 287

Yes, you can apply chaining on conditional operators similar to if … else if … else if … else chain. The syntax is going to be as below,

Question 288

What are the ways to execute javascript after page load?

Answer 288

Question 289

What is the difference between proto and prototype in JS?

Answer 289

The __proto__ object is the actual object that is used in the lookup chain to resolve methods, etc. Whereas prototype is the object that is used to build __proto__ when you create an object with new.

new Employee().__proto__ === Employee.prototype;

new Employee().prototype === undefined;

Question 290

Give an example where do you really need semicolon in JS.

Answer 290

Question 291

What is a freeze method in JS?

Answer 291

Question 292

What is the purpose of freeze method in JS?

Answer 292

Below are the main benefits of using freeze method,

1. It is used for freezing objects and arrays.
2. It is used to make an object immutable.

Question 293

Why do I need to use freeze method in JS?

Answer 293

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.

Question 294

How do you detect a browser language preference in JS?

Answer 294

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

Question 295

How to convert string to title case with javascript?

Answer 295

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.substring(1).toLowerCase();
});
}
toTitleCase(“good morning john”); // Good Morning John

Question 296

How do you detect javascript disabled in the page?

Answer 296

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.</noscript></noscript>

<script>
// JS related code goes here
</script>

<noscript>
<a>JavaScript is disabled in the page. Please click Next Page</a>
</noscript>

Question 297

What are various operators supported by javascript?

Answer 297

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

Question 298

What is a rest parameter in JS?

Answer 298

Question 299

What happens if you do not use rest parameter as a last argument in JS?

Answer 299

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

Question 300

What are the bitwise operators available in javascript?

Answer 300

Question 301

What is a spread operator in JS?

Answer 301

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

Question 302

How do you determine whether object is frozen or not in JS?

Answer 302

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

Question 303

How do you determine two values same or not using object in JS?

Answer 303

Question 304

What is the purpose of using object is method in JS?

Answer 304

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.

Question 305

How do you copy properties from one object to other in JS?

Answer 305

Question 306

What are the applications of Object assign method in JS?

Answer 306

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.

Question 307

What is a proxy object in JS?

Answer 307

Question 308

What is the purpose of Object.seal() method in JS?

Answer 308

Question 309

What are the applications of Object.seal method in JS?

Answer 309

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.

Question 310

What are the differences between freeze and seal methods for Objects in JS?

Answer 310

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.

Question 311

How do you determine if an object is sealed or not?

Answer 311

Question 312

How do you get enumerable key and value pairs from objects in JS?

Answer 312

Question 313

What is the main difference between Object.values and Object.entries method?

Answer 313

Question 314

How can you get the list of keys of any object in JS?

Answer 314

Question 315

How do you create an object with prototype in JS?

Answer 315

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

Question 316

What is a WeakSet in JS?

Answer 316

Question 317

What are the differences between WeakSet and Set?

Answer 317

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.

Question 318

List down the collection of methods available on WeakSet.

Answer 318

Question 319

What is a WeakMap in JS?

Answer 319

Question 320

What are the differences between WeakMap and Map?

Answer 320

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.

Question 321

List down the collection of methods available on WeakMap.

Answer 321

Question 321

What is the purpose of uneval?

Answer 321

Question 322

How do you encode an URL in JS?

Answer 322

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

Question 323

How do you decode an URL in JS?

Answer 323

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

Question 324

How do you print the contents of web page in JS?

Answer 324

Question 325

What is the difference between uneval and eval in JS?

Answer 325

Question 326

What is an anonymous function in JS?

Answer 326

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

Question 327

What is the precedence order between local and global variables in JS?

Answer 327

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); // Good Evening
}
greeting();

Question 328

What are javascript accessors?

Answer 328

ECMAScript 5 introduced javascript object accessors or computed properties through getters and setters. Getters uses the get keyword whereas Setters uses the set keyword.

Question 329

How do you define property on Object constructor in JS?

Answer 329

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

Question 330

What is the difference between get and defineProperty in JS?

Answer 330

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.

Question 331

What are the advantages of Getters and Setters in JS?

Answer 331

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.

Question 332

Can I add getters and setters using defineProperty method in jS?

Answer 332

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,

Question 333

What is the purpose of switch-case in JS?

Answer 333

Question 334

What are the conventions to be followed for the usage of switch case in JS?

Answer 334

Question 335

What are primitive data types in JS?

Answer 335

Question 336

What are the different ways to access object properties in JS?

Answer 336

Question 337

What are the function parameter rules in JS?

Answer 337

Question 338

What is an error object in JS?

Answer 338

Question 339

When you get a syntax error in JS?

Answer 339

A SyntaxError is thrown if you try to evaluate code with a syntax error. For example, the below missing quote for the function parameter throws a syntax error

try {
eval(“greeting(‘welcome)”); // Missing ‘ will produce an error
} catch (err) {
console.log(err.name);
}

Question 340

What are the different error names from error object?

Answer 340

Question 341

What are the various statements in error handling in JS?

Answer 341

Question 342

What are the two types of loops in javascript?

Answer 342

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.

Question 343

What is nodejs?

Answer 343

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.

Question 344

What is an Intl object in JS?

Answer 344

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.

Question 345

How do you perform language specific date and time formatting in JS?

Answer 345

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

Question 346

What is an Iterator in JS?

Answer 346

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

Question 347

How does synchronous iteration work in JS?

Answer 347

Question 348

What is an event loop in JS?

Answer 348

The event loop is a process that continuously monitors both the call stack and the event queue and checks whether or not the call stack is empty. If the call stack is empty and there are pending events in the event queue, the event loop dequeues the event from the event queue and pushes it to the call stack. The call stack executes the event, and any additional events generated during the execution are added to the end of the event queue.

Note: The event loop allows Node.js to perform non-blocking I/O operations, even though JavaScript is single-threaded, by offloading operations to the system kernel whenever possible. Since most modern kernels are multi-threaded, they can handle multiple operations executing in the background.

Question 349

What is call stack in JS?

Answer 349

Call Stack is a data structure for javascript interpreters to keep track of function calls(creates execution context) in the program. It has two major actions,

Whenever you call a function for its execution, you are pushing it to the stack.
Whenever the execution is completed, the function is popped out of the stack.

Question 350

What is an event queue in JS

Answer 350

The event queue follows the queue data structure. It stores async callbacks to be added to the call stack. It is also known as the Callback Queue or Macrotask Queue.

Whenever the call stack receives an async function, it is moved into the Web API. Based on the function, Web API executes it and awaits the result. Once it is finished, it moves the callback into the event queue (the callback of the promise is moved into the microtask queue).

The event loop constantly checks whether or not the call stack is empty. Once the call stack is empty and there is a callback in the event queue, the event loop moves the callback into the call stack. But if there is a callback in the microtask queue as well, it is moved first. The microtask queue has a higher priority than the event queue.

Question 351

What is a decorator in JS?

Answer 351

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,

Question 352

What are the properties of Intl object in JS?

Answer 352

Question 353

What is an Unary operator in JS?

Answer 353

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.

Question 354

How do you sort elements in an array in JS?

Answer 354

The sort() method is used to sort the elements of an array in place and returns the sorted array. The example usage would be as below,

var months = [“Aug”, “Sep”, “Jan”, “June”];
months.sort();
console.log(months); // [“Aug”, “Jan”, “June”, “Sep”]

Question 354

What is the purpose of compareFunction while sorting arrays in JS?

Answer 354

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,

Question 355

How do you reverse an array in JS?

Answer 355

You can use the reverse() method to reverse the elements in an array. This method is useful to sort an array in descending order. Let’s see the usage of reverse() method in an example,

Question 356

How do you find min and max value in an array in JS?

Answer 356

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,

Question 357

How do you find min and max values without Math functions in JS?

Answer 357

You can write functions which loop through an array comparing each value with the lowest value or highest value to find the min and max values. Let’s create those functions to find min and max values,

Question 358

What is an empty statement and purpose of it in JS?

Answer 358

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 (let i = 0; i < a.length; a[i++] = 0);

Question 359

How do you get metadata of a module in JS?

Answer 359

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.

;
console.log(import.meta); // { url: “file:///home/user/welcome-module.js” }

Question 360

What is a comma operator in JS?

Answer 360

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

Question 361

What is the advantage of a comma operator in jS?

Answer 361

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,

Question 362

What is typescript?

Answer 362

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

Question 363

What are the differences between javascript and typescript?

Answer 363

Question 364

What are the advantages of typescript over javascript?

Answer 364

Below are some of the advantages of typescript over javascript,

1. 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.
2. TypeScript is strongly-typed or supports static typing which allows for checking type correctness at compile time. This is not available in javascript.
3. 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.

Question 365

What is an object initializer in JS?

Answer 365

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

Question 366

What is a constructor method in JS?

Answer 366

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,

Question 367

What happens if you write constructor more than once in a class in JS?

Answer 367

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.

Question 368

How do you call the constructor of a parent class in JS?

Answer 368

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,

Question 368

How do you get the prototype of an object in JS?

Answer 368

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

Question 369

What happens If I pass string type for getPrototype method?

Answer 369

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

Question 370

How do you set prototype of one object to another in JS?

Answer 370

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,

Question 371

How do you check whether an object can be extendable or not in JS?

Answer 371

Question 372

How do you prevent an object to extend?

Answer 372

Question 373

What are the different ways to make an object non-extensible in JS?

Answer 373

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

Object.preventExtensions
Object.seal
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

Question 374

How do you define multiple properties on an object in JS?

Answer 374

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

Question 375

What is MEAN in javascript?

Answer 375

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.

Question 376

What Is Obfuscation in javascript?

Answer 376

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,

Question 377

Why do you need Obfuscation in JS?

Answer 377

Below are the few reasons for Obfuscation,

1. The Code size will be reduced. So data transfers between server and client will be fast.
2. It hides the business logic from outside world and protects the code from others
3. Reverse engineering is highly difficult
4. The download time will be reduced

Question 378

What is Minification in JS?

Answer 378

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 .

Question 379

What are the advantages of minification?

Answer 379

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

Question 380

What are the differences between Obfuscation and Encryption?

Answer 380

Question 381

What are the common tools used for minification?

Answer 381

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

Question 382

How do you perform form validation using javascript?

Answer 382

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,

Question 383

How do you perform form validation without javascript?

Answer 383

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>
<input></input>
<input></input>
</form>

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

Question 384

What are the DOM methods available for constraint validation?

Answer 384

Question 385

What are the available constraint validation DOM properties?

Answer 385

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.

Question 386

What are the list of validity properties?

Answer 386

Question 387

Give an example usage of rangeOverflow property?

Answer 387

Question 388

Is enums feature available in javascript?

Answer 388

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, …})

Question 389

What is an enum?

Answer 389

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
}

Question 390

How do you list all properties of an object?

Answer 390

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,

Question 391

How do you get property descriptors of an object?

Answer 391

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,

Question 392

What are the attributes provided by a property descriptor?

Answer 392

Question 393

How do you extend classes in JS?

Answer 393

Question 394

How do I modify the url without reloading the page?

Answer 394

The window.location.href 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”);

Question 395

How do you check whether an array includes a particular value or not in JS?

Answer 395

Question 396

How do you compare scalar arrays in JS?

Answer 396

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,

Question 397

How to get the value from get parameters in JS?

Answer 397

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

Question 398

How do you print numbers with commas as thousand separators in JS?

Answer 398

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

Question 399

What is the difference between java and javascript?

Answer 399

Question 400

Does JavaScript supports namespace?

Answer 400

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.

Question 401

How do you declare namespace in JS?

Answer 401

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

1. 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
2. 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.
3. 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.

Question 402

Give an example of declaring a namespace using Object Literal Notation.

Answer 402

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

Question 403

Give an example of declaring a namespace using IIFE.

Answer 403

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.

Question 404

Give an example of declaring a namespace using a block and a let/const declaration.

Answer 404

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.

Question 405

How do you invoke javascript code in an iframe from parent page?

Answer 405

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”).contentWindow.targetFunction();

window.frames[0].frameElement.contentWindow.targetFunction(); // Accessing iframe this way may not work in latest versions chrome and firefox

Question 406

How do get the timezone offset from date in JS?

Answer 406

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

Question 407

How do you load CSS and JS files dynamically?

Answer 407

Question 408

What are the different methods to find HTML elements in DOM?

Answer 408

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,

1. document.getElementById(id): It finds an element by Id

2.document.getElementsByTagName(name): It finds an element by tag name

3.document.getElementsByClassName(name): It finds an element by class name

Question 409

What is jQuery?

Answer 409

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.

Question 410

What is V8 JavaScript engine?

Answer 410

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.

Question 411

Why do we call javascript as dynamic language?

Answer 411

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

Question 412

What is a void operator in JS?

Answer 412

Question 413

How to set the cursor to wait in JS?

Answer 413

Question 414

How do you create an infinite loop in JS?

Answer 414

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) {}

Question 415

Why do you need to avoid with statement in JS?

Answer 415

Question 416

What is the output of below for loops?

Answer 416

The output of the above for loops is 4 4 4 4 and 0 1 2 3

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.

Question 417

List down some of the features of ES6?

Answer 417

Question 418

What is ES6?

Answer 418

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.

Question 419

Can I redeclare let and const variables?

Answer 419

Question 420

Does the const variable make the value immutable?

Answer 420

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’]

Question 421

What are default parameters in JS?

Answer 421

In ES5, 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,

Question 422

What are template literals in JS?

Answer 422

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 ES6, this feature enables using dynamic expressions as below,

Question 423

How do you write multi-line strings in template literals?

Answer 423

Question 424

What are nesting templates in JS?

Answer 424

Question 425

What are tagged templates in JS?

Answer 425

Question 426

What are raw strings in JS?

Answer 426

Question 427

What is destructuring assignment in JS?

Answer 427

Question 428

What are default values in destructuring assignment?

Answer 428

Question 429

How do you swap variables in destructuring assignment?

Answer 429

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

Question 430

What are enhanced object literals?

Answer 430

Question 431

What are dynamic imports?

Answer 431

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());

Question 432

What are the use cases for dynamic imports?

Answer 432

Question 433

What are typed arrays in JS?

Answer 433

Question 434

What are the advantages of module loaders?

Answer 434

The module loaders provides the below features,

1. Dynamic loading
2. State isolation
3. Global namespace isolation
4. Compilation hooks
5. Nested virtualization

Question 435

What is collation in JS?

Answer 435

Collation is used for sorting a set of strings and searching within a set of strings. It is parameterized by locale and aware of Unicode. Let’s take comparison and sorting features,

1. Comparison:

var list = [“ä”, “a”, “z”]; // In German, “ä” sorts with “a” Whereas in Swedish, “ä” sorts after “z”
var l10nDE = new Intl.Collator(“de”);
var l10nSV = new Intl.Collator(“sv”);
console.log(l10nDE.compare(“ä”, “z”) === -1); // true
console.log(l10nSV.compare(“ä”, “z”) === +1); // true

2. Sorting:
   var list = [“ä”, “a”, “z”]; // In German, “ä” sorts with “a” Whereas in Swedish, “ä” sorts after “z”
   var l10nDE = new Intl.Collator(“de”);
   var l10nSV = new Intl.Collator(“sv”);
   console.log(list.sort(l10nDE.compare)); // [ “a”, “ä”, “z” ]
   console.log(list.sort(l10nSV.compare)); // [ “a”, “z”, “ä” ]

Question 436

What is for…of statement in JS?

Answer 436

The for…of statement creates a loop iterating over iterable objects or elements such as built-in String, Array, Array-like objects (like arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. The basic usage of for…of statement on arrays would be as below,

Question 437

What is the output of below spread operator array?

[…“John Resig”];

Answer 437

The output of the array is [‘J’, ‘o’, ‘h’, ‘n’, ‘’, ‘R’, ‘e’, ‘s’, ‘i’, ‘g’] Explanation: The string is an iterable type and the spread operator within an array maps every character of an iterable to one element. Hence, each character of a string becomes an element within an Array.

Question 438

Is PostMessage secure?

Answer 438

Yes, postMessages can be considered very secure as long as the programmer/developer is careful about checking the origin and source of an arriving message. But if you try to send/receive a message without verifying its source will create cross-site scripting attacks.

Question 439

What are the problems with postmessage target origin as wildcard?

Answer 439

The second argument of postMessage method specifies which origin is allowed to receive the message. If you use the wildcard “*” as an argument then any origin is allowed to receive the message. In this case, there is no way for the sender window to know if the target window is at the target origin when sending the message. If the target window has been navigated to another origin, the other origin would receive the data. Hence, this may lead to XSS vulnerabilities.

targetWindow.postMessage(message, “*”);

Question 440

How do you avoid receiving postMessages from attackers?

Answer 440

Since the listener listens for any message, an attacker can trick the application by sending a message from the attacker’s origin, which gives an impression that the receiver received the message from the actual sender’s window. You can avoid this issue by validating the origin of the message on the receiver’s end using the “message.origin” attribute. For examples, let’s check the sender’s origin http://www.some-sender.com on receiver side www.some-receiver.com,

//Listener on http://www.some-receiver.com/
window.addEventListener(“message”, function(message){
if(/^http://www.some-sender.com$/.test(message.origin)){
console.log(‘You received the data from valid sender’, message.data);
}
});

Question 441

Can I avoid using postMessages completely in JS?

Answer 441

You cannot avoid using postMessages completely(or 100%). Even though your application doesn’t use postMessage considering the risks, a lot of third party scripts use postMessage to communicate with the third party service. So your application might be using postMessage without your knowledge.

Question 442

Is postMessages synchronous?

Answer 442

The postMessages are synchronous in IE8 browser but they are asynchronous in IE9 and all other modern browsers (i.e, IE9+, Firefox, Chrome, Safari).Due to this asynchronous behaviour, we use a callback mechanism when the postMessage is returned.

Question 443

What paradigm is Javascript?

Answer 443

JavaScript is a multi-paradigm language, supporting imperative/procedural programming, Object-Oriented Programming and functional programming. JavaScript supports Object-Oriented Programming with prototypical inheritance.

Question 444

What is the difference between internal and external javascript?

Answer 444

Internal JavaScript: It is the source code within the script tag.

External JavaScript: The source code is stored in an external file(stored with .js extension) and referred with in the tag.

Question 445

Is JavaScript faster than server side script?

Answer 445

Yes, JavaScript is faster than server side scripts. Because JavaScript is a client-side script it does not require any web server’s help for its computation or calculation. So JavaScript is always faster than any server-side script like ASP, PHP, etc.

Question 446

How do you get the status of a checkbox in JS?

Answer 446

You can apply the checked property on the selected checkbox in the DOM. If the value is true it means the checkbox is checked, otherwise it is unchecked. For example, the below HTML checkbox element can be access using javascript as below:

<input></input> Agree the
conditions<br></br>

console.log(document.getElementById(‘checkboxname’).checked); // true or false

Question 447

What is the purpose of double tilde operator in JS?

Answer 447

The double tilde operator(~~) is known as double NOT bitwise operator. This operator is a slightly quicker substitute for Math.floor().

Question 448

How do you convert character to ASCII code in JS?

Answer 448

Question 449

What is ArrayBuffer in JS?

Answer 449

Question 450

What is the output of below string expression?

console.log(“Welcome to JS world”[0]);

Answer 450

The output of the above expression is “W”. Explanation: The bracket notation with specific index on a string returns the character at a specific location. Hence, it returns the character “W” of the string. Since this is not supported in IE7 and below versions, you may need to use the .charAt() method to get the desired result.

Question 451

What is the purpose of Error object?

Answer 451

Question 452

What is the purpose of EvalError object?

Answer 452

// “Eval function error”, “EvalError”, “someFile.js”

Question 453

What are the list of cases error thrown from non-strict mode to strict mode?

Answer 453

Question 454

Do all objects have prototypes in JS?

Answer 454

No. All objects have prototypes except for the base object which is created by the user, or an object that is created using the new keyword.

Question 455

What is the difference between a parameter and an argument in JS?

Answer 455

Parameter is the variable name of a function definition whereas an argument represents the value given to a function when it is invoked. Let’s explain this with a simple function

Question 456

What is the purpose of some() method in arrays in jS?

Answer 456

The some() method is used to test whether at least one element in the array passes the test implemented by the provided function. The method returns a boolean value. Let’s take an example to test for any odd elements,

Question 457

How do you combine two or more arrays in JS?

Answer 457

Question 458

What is a Shallow Copy re: objects?

Answer 458

There are two ways to copy an object,

Shallow Copy: Shallow copy is a bitwise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Question 459

What is a Deep Copy re: objects?

Answer 459

Deep copy: A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

Question 460

How do you create specific number of copies of a string in JS?

Answer 460

The repeat() method is used to construct and return a new string which contains the specified number of copies of the string on which it was called, concatenated together. Remember that this method has been added to the ECMAScript 2015 specification. Let’s take an example of Hello string to repeat it 4 times,

“Hello”.repeat(4); // ‘HelloHelloHelloHello’

Question 461

How do you return all matching strings against a regular expression in JS?

Answer 461

The matchAll() method can be used to return an iterator of all results matching a string against a regular expression. For example, the below example returns an array of matching string results against a regular expression,

Question 462

How do you trim a string at the beginning or ending in JS?

Answer 462

The trim method of string prototype is used to trim on both sides of a string. But if you want to trim especially at the beginning or ending of the string then you can use trimStart/trimLeft and trimEnd/trimRight methods. Let’s see an example of these methods on a greeting message,

Question 463

What is the output of below console statement with unary operator?
ex. console.log(+”Hello”);

Answer 463

The output of the above console log statement returns NaN. Because the element is prefixed by the unary operator and the JavaScript interpreter will try to convert that element into a number type. Since the conversion fails, the value of the statement results in NaN value.

Question 464

Does javascript use mixins?

Answer 464

Mixin is a generic object-oriented programming term - is a class containing methods that can be used by other classes without a need to inherit from it. In JavaScript we can only inherit from a single object. ie. There can be only one [[prototype]] for an object.

But sometimes we require to extend more than one, to overcome this we can use Mixin which helps to copy methods to the prototype of another class.

Say for instance, we’ve two classes User and CleanRoom. Suppose we need to add CleanRoom functionality to User, so that user can clean the room at demand. Here’s where concept called mixins comes into picture.

Question 465

What is a thunk function?

Answer 465

A thunk is just a function which delays the evaluation of the value. It doesn’t take any arguments but gives the value whenever you invoke the thunk. i.e, It is used not to execute now but it will be sometime in the future. Let’s take a synchronous example,

Question 466

What are asynchronous thunks?

Answer 466

Question 467

What is the output of below function calls?

Answer 467

Output:

The output is 40 and NaN. Remember that diameter is a regular function, whereas the value of perimeter is an arrow function. The this keyword of a regular function(i.e, diameter) refers to the surrounding scope which is a class(i.e, Shape object). Whereas this keyword of perimeter function refers to the surrounding scope which is a window object. Since there is no radius property on window objects it returns an undefined value and the multiple of number value returns NaN value.

Question 468

How to remove all line breaks from a string in JS?

Answer 468

The easiest approach is using regular expressions to detect and replace newlines in the string. In this case, we use replace function along with string to replace with, which in our case is an empty string.

Question 469

What is the difference between reflow and repaint

Answer 469

A repaint occurs when changes are made which affect the visibility of an element, but not its layout. Examples of this include outline, visibility, or background color. A reflow involves changes that affect the layout of a portion of the page (or the whole page). Resizing the browser window, changing the font, content changing (such as user typing text), using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element’s classes are a few of the things that can trigger reflow. Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

Question 470

What happens with negating an array in JS?

Answer 470

Negating an array with ! character will coerce the array into a boolean. Since Arrays are considered to be truthy So negating it will return false.

console.log(![]); // false

Question 471

What happens if we add two arrays in JS?

Answer 471

If you add two arrays together, it will convert them both to strings and concatenate them. For example, the result of adding arrays would be as below,

Question 472

What is the output of prepend additive operator on falsy values?

Answer 472

Question 473

How do you create self string using special characters in jS?

Answer 473

Question 474

How do you remove falsy values from an array in JS?

Answer 474

You can apply the filter method on the array by passing Boolean as a parameter. This way it removes all falsy values(0, undefined, null, false and “”) from the array.

const myArray = [false, null, 1, 5, undefined];
myArray.filter(Boolean); // [1, 5] // is same as myArray.filter(x => x);

Question 475

How do you get unique values of an array in JS?

Answer 475

You can get unique values of an array with the combination of Set and rest expression/spread(…) syntax.

console.log([…new Set([1, 2, 4, 4, 3])]); // [1, 2, 4, 3]

Question 476

What is destructuring aliases in JS?

Answer 476

Sometimes you would like to have a destructured variable with a different name than the property name. In that case, you’ll use a : newName to specify a name for the variable. This process is called destructuring aliases.

Question 477

How do you map the array values without using map method in JS?

Answer 477

Question 478

How do you empty an array in JS?

Answer 478

Question 479

How do you rounding numbers to certain decimals in JS?

Answer 479

You can round numbers to a certain number of decimals using toFixed method from native javascript.

let pie = 3.141592653;
pie = pie.toFixed(3); // 3.142

Question 480

What is the easiest way to convert an array to an object in JS?

Answer 480

You can convert an array to an object with the same data using spread(…) operator.

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObject = { …fruits };
console.log(fruitsObject); // {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”}

Question 481

How do you create an array with some data in JS?

Answer 481

You can create an array with some data or an array with the same values using fill method.

var newArray = new Array(5).fill(“0”);
console.log(newArray); // [“0”, “0”, “0”, “0”, “0”]

Question 482

What are the placeholders from console object?

Answer 482

Below are the list of placeholders available from console object,

%o — It takes an object,
%s — It takes a string,
%d — It is used for a decimal or integer These placeholders can be represented in the console.log as below

const user = { name: “John”, id: 1, city: “Delhi” };
console.log(
“Hello %s, your details %o are available in the object form”,
“John”,
user
); // Hello John, your details {name: “John”, id: 1, city: “Delhi”} are available in object

Question 483

Is it possible to add CSS to console messages?

Answer 483

Yes, you can apply CSS styles to console messages similar to html text on the web page.

Question 484

What is the purpose of dir method of console object?

Answer 484

Question 485

Is it possible to debug HTML elements in console?

Answer 485

Question 486

How do you display data in a tabular format using console object?

Answer 486

Question 487

How do you verify that an argument is a Number or not?

Answer 487

Question 488

How do you create copy to clipboard button?

Answer 488

Question 489

What is the shortcut to get timestamp?

Answer 489

Question 490

How do you flatten multi dimensional arrays?

Answer 490

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]

Also you can use the flat method of Array.

const arr = [1, [2, 3], 4, 5, [6, 7]];
const fllattenArr = arr.flat(); // [1, 2, 3, 4, 5, 6, 7]

// And for multiDemensional arrays
const multiDimensionalArr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const oneStepFlat = multiDimensionalArr.flat(1); // [11, 22, 33, 44, [55, 66, [77, [88]], 99]]
const towStep = multiDimensionalArr.flat(2); // [11, 22, 33, 44, 55, 66, [77, [88]], 99]
const fullyFlatArray = multiDimensionalArr.flat(Infinity); // [11, 22, 33, 44, 55, 66, 77, 88, 99]

Question 491

What is the easiest multi condition checking?

Answer 491

Question 492

How do you capture browser back button?

Answer 492

NOTE: In the preceeding code, When the box element clicked, its background color appears in blue color and changed to while color upon clicking the browser back button using popstate event handler. The state property of popstate contains the copy of history entry’s state object.

⬆ Back to Top

Question 493

How do you disable right click in the web page?

Answer 493

The right click on the page can be disabled by returning false from the oncontextmenu attribute on the body element.

<body></body>

Question 494

What are wrapper objects?

Answer 494

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.

Question 495

What is AJAX?

Answer 495

AJAX stands for Asynchronous JavaScript and XML and it is a group of related technologies(HTML, CSS, JavaScript, XMLHttpRequest API etc) used to display data asynchronously. i.e. We can send data to the server and get data from the server without reloading the web page.

Question 496

What are the different ways to deal with Asynchronous Code in JS?

Answer 496

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

1. Callbacks
2. Promises
3. Async/await
4. Third-party libraries such as async.js,bluebird etc

Question 497

How to cancel a fetch request?

Answer 497

Question 498

What is web speech API?

Answer 498

Question 499

What is minimum timeout throttling?

Answer 499

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.

Question 500

How do you implement zero timeout in modern browsers?

Answer 500

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.

Question 501

What are tasks in event loop?

Answer 501

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

    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

Question 502

What is microtask?

Answer 502

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.

Question 503

What are different event loops?

Answer 503

In JavaScript, there are multiple event loops that can be used depending on the context of your application. The most common event loops are:

The Browser Event Loop
The Node.js Event Loop

• Browser Event Loop: The Browser Event Loop is used in client-side JavaScript applications and is responsible for handling events that occur within the browser environment, such as user interactions (clicks, keypresses, etc.), HTTP requests, and other asynchronous actions.
• The Node.js Event Loop is used in server-side JavaScript applications and is responsible for handling events that occur within the Node.js runtime environment, such as file I/O, network I/O, and other asynchronous actions.

⬆ Back to Top

Question 504

What is the purpose of queueMicrotask?

Answer 504

Question 505

How do you use javascript libraries in typescript file?

Answer 505

Question 506

What are the differences between promises and observables?

Answer 506

Question 507

What is heap?

Answer 507

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.

Question 508

What is an event table?

Answer 508

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.

Question 509

What is a microTask queue?

Answer 509

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.

Question 510

What is the difference between shim and polyfill?

Answer 510

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.

Question 511

How do you detect primitive or non primitive value type?

Answer 511

Question 512

What is babel?

Answer 512

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,

1. Transform syntax
2. Polyfill features that are missing in your target environment (using @babel/polyfill)
3. Source code transformations (or codemods)

Question 513

Is Node.js completely single threaded?

Answer 513

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.

Question 514

What are the common use cases of observables?

Answer 514

Some of the most common use cases of observables are web sockets with push notifications, user input changes, repeating intervals, etc

Question 515

What is RxJS?

Answer 515

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.

Question 516

What is the difference between Function constructor and function declaration?

Answer 516

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.

Question 517

What is the easiest way to resize an array?

Answer 517

Question 518

What is a Short circuit condition?

Answer 518

Question 519

What is an observable?

Answer 519

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

Question 520

What is the difference between function and class declarations?

Answer 520

Question 521

What is an async function in JS?

Answer 521

Question 522

How do you prevent promises swallowing errors?

Answer 522

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.

1. Add catch block at the end of each chain
2. Add done method
3. Extend ES6 Promises by Bluebird

Question 523

How do you prevent the following code from swallowing errors using catch block?

Answer 523

Question 524

How do you prevent the following code from swallowing errors using done method?

Answer 524

Question 525

How do you prevent the following code from swallowing errors using ES6 Promises by Bluebird ?

Answer 525

Question 526

What is deno?

Answer 526

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 JavaScript engine and the Rust programming language.

Question 527

How do you make an object iterable in javascript?

Answer 527

By default, plain objects are not iterable. But you can make the object iterable by defining a Symbol.iterator property on it.

Question 528

What is a Proper Tail Call?

Answer 528

First, we should know about tail call before talking about “Proper Tail Call”. A tail call is a subroutine or function call performed as the final action of a calling function. Whereas Proper tail call(PTC) is a technique where the program or code will not create additional stack frames for a recursion when the function call is a tail call.

For example, the below classic or head recursion of factorial function relies on stack for each step. Each step need to be processed upto n * factorial(n - 1)

Question 529

How do you check an object is a promise or not?

Answer 529

Question 530

How to detect if a function is called as constructor?

Answer 530

Question 531

What are the differences between arguments object and rest parameter?

Answer 531

Question 532

What are the differences between spread operator and rest parameter?

Answer 532

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.

Question 533

What are the different kinds of generators?

Answer 533

There are five kinds of generators:

1. Generator function declaration:
2. Generator function expressions:
3. Generator method definitions in object literals:
4. Generator method definitions in class:
5. Generator as a computed property:

Question 534

Example of a Generator function declaration:

Answer 534

Question 535

Example of a Generator function expressions

Answer 535

Question 536

Example of a Generator method definitions in class:

Answer 536

Question 537

Example of a Generator method definitions in object literals:

Answer 537

Question 538

Example of a Generator as a computed property

Answer 538

Question 539

What are the built-in iterables

Answer 539

Question 540

What are the differences between for…of and for…in statements?

Answer 540

Question 541

How do you define instance and non-instance properties

Answer 541

Question 542

What is the difference between isNaN and Number.isNaN?

Answer 542

Question 543

How to invoke an IIFE without any extra brackets?

Answer 543

Question 544

Is that possible to use expressions in switch cases?

Answer 544

Question 545

What is the easiest way to ignore promise errors?

Answer 545

Question 546

How do style the console output using CSS?

Answer 546

Question 547

What is nullish coalescing operator (??)?

Answer 547

Question 548

How do you group and nest console output?

Answer 548

Question 549

What is the difference between dense and sparse arrays?

Answer 549

Question 550

What are the different ways to create sparse arrays?

Answer 550

Question 551

What is the difference between setTimeout, setImmediate and process.nextTick?

Answer 551

Question 552

How do you reverse an array without modifying original array?

Answer 552

Question 553

How do you create custom HTML element?

Answer 553

Question 554

What is global execution context?

Answer 554

Question 555

What is function execution context?

Answer 555

Whenever a function is invoked, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the Global Execution Context (GEC) to evaluate and execute the code within that function.

Question 556

What is debouncing?

Answer 556

Debouncing is a programming pattern that allows delaying execution of some piece of code until a specified time to avoid unnecessary CPU cycles, API calls and improve performance. The debounce function make sure that your code is only triggered once per user input. The common usecases are Search box suggestions, text-field auto-saves, and eliminating double-button clicks.

Question 557

What is throttling?

Answer 557

Question 558

What is optional chaining?

Answer 558

Question 559

What is an environment record?

Answer 559

Question 560

How to verify if a variable is an array?

Answer 560

Question 561

What is pass by value and pass by reference?

Answer 561

Question 562

What are the differences between primitives and non-primitives?

Answer 562

Question 563

How do you create your own bind method using either call or apply method?

Answer 563

Question 564

What are the differences between pure and impure functions?

Answer 564

Question 565

What is referential transparency?

Answer 565

Question 566

What are the possible side-effects in javascript?

Answer 566

Question 567

What are compose and pipe functions?

Answer 567

The “compose” and “pipe” are two techniques commonly used in functional programming to simplify complex operations and make code more readable. They are not native to JavaScript and higher-order functions. the compose() applies right to left any number of functions to the output of the previous function

Question 568

What is module pattern?

Answer 568

Question 569

What is Function Composition?

Answer 569

Question 570

How to use await outside of async function prior to ES2022?

Answer 570

Question 571

What is the purpose of the this keyword in JavaScript?

Answer 571

Question 572

What is the output of below code

Answer 572

Question 573

What is the output of below code:

Answer 573

Question 574

What is the output of below code:

Answer 574

Question 575

What is the output of below equality check:

Answer 575

Question 576

What is the output of below code:

Answer 576

Question 577

What is the output of below code:

Answer 577

Question 578

What is the output of below code

Answer 578

Question 579

What is the output of below code in latest Chrome:

Answer 579

Question 580

What is the output of below code:

Answer 580

Question 581

What is the output of below code:

Answer 581

Question 582

What is the output of below code in non-strict mode:

Answer 582

Question 583

What is the output of below code:

Answer 583

Question 584

What is the output of below code:

Answer 584

Question 585

What is the output of below code:

Answer 585

Question 586

What is the output of below code:

Answer 586

Question 587

What is the output of below code:

Answer 587

Question 588

What is the output of below code:

Answer 588

Question 589

What is the output of below code:

Answer 589

Question 590

What is the output of below code:

Answer 590

Question 591

What is the output of below code:

Answer 591

Question 592

What is the output of below code:

Answer 592

Question 593

What is the output of below code:

Answer 593

Question 594

What is the output of below code:

Answer 594

Question 595

What is the output of below code:

Answer 595

Question 596

What is the output of below code:

Answer 596

Question 597

What is the output of below code:

Answer 597

Question 598

What is the output of below code:

Answer 598

Question 599

What is the output of below code:

Answer 599

Question 600

What is the output of below code:

Answer 600

Question 601

What is the output of below code:

Answer 601

Question 602

What is the output of below code:

Answer 602

Question 603

What is the output of below code:

Answer 603

Question 604

What is the output of below code:

Answer 604

Question 605

What is the output of below code:

Answer 605

Question 606

What is the output of below code

Answer 606

Question 607

What is the output of below code:

Answer 607

Question 608

What is the output of below code: