JavaScript

Closures are one of the most complex topic in JavaScript, but they are everywhere in JavaScript.

Closures are basically, the inner function having access to the variables in the outer function scope, even after the outer function has returned. To use a closure, simply define a function inside another function and expose it. To expose a function, return it.

Consider the below code. The variable b have an scope in outer function i.e. from line 4 to line 10. So, at line 13 when we call the outer function, it can access the value of b, but at line 14 there is no outer function.

So, how does the innerFn() access the value of b. This is where the JS feature of Closures comes into play.

When the “var inner” is created at line 6, the JS engine not only stores the function object information but also its scope information. So, it stores a scope of variable b inside the inner function object.

Now it doesn’t matter where you call inner, whether in this file or some third party file. It will always remember the value of a and b, as if a snapshot is been taken.

var a = 10;
 
function outer() {
  var b = 20;
  
  var inner = function() {
    console.log(a);
    console.log(b);
  };
  return inner;
}
 
var innerFn = outer();
innerFn();
 

Output

//10
//20

This is a common yet one of the most tricky JavaScript interview questions and answers for experienced professionals, don't miss this one. Here is how to answer this -

JavaScript “this” keyword simply means that whatever scope you are inside, it belongs to that. Now the scope can be a function or and Object. Although, there are some exception to this rule. We can have “this” in various context. Let’s go through them.

“this” in simple functionIn a normal JS function like below, the “this” refers to global window object.

function foo() {
  console.log(this);
  console.log(this === window);  
}
foo();

Running the above code will give.

There is a special case with strict mode.

In strict mode “this” to be undefined , as global object refers to undefined instead of window object.

function foo() {
  'use strict';
  console.log(this);
  console.log(this === window);  
}
foo();

“this” in an object propertyIn an object which have a property as a function, the value of “this” is the Object itself.

var obj = {};
obj.foo = function() {
  console.log("Inside obj foo");
  console.log(this);
}
obj.foo();

this is Object itself

“this” with constructor functionWhen a function is called with “new” keyword, it is known as constructor function. And the value of “this” refers to the newly created instance.

function Person(fn, ln) {
 this.first_name = fn;
 this.last_name = ln;
this.displayName = function() {
    console.log(`Name: ${this.first_name} ${this.last_name}`);
    console.log(this);
 }
}
let person = new Person("Tim", "Horton");
person.displayName();  
let person2 = new Person("Mary", " Poppins");
person2.displayName();

The newly created instance is nothing but an object, because everything in JS is an object.

One The for..in loop is mainly used to iterate over properties of an Objects.
In JavaScript Arrays are also Objects and each characters in an string have an index. So, we can use them also to iterate over Arrays and Strings also.

//Object example

const obj = {
  'frontend developer': 'Thomas',
  'designer': 'Mary',
  'backend developer': 'Harry',
  'engineering manager': 'Vikas'
}
 
for(const key in obj) {
  console.log(`${key}: ${obj[key]}`)
} 

//Array example

const array = ['frontend developer', 'designer', 'backend developer', 'engineering manager'];
for(const index in array){
  console.log(array[index]);
}

//String example

const string = 'frontend developer';
for(const index in string){
  console.log(string[index]);
}

The for..of loop was introduced in ES6 and is used to iterate over Objects that have [Symbol.iterator] property. This includes array, strings, Map, Set and NodeList. They cannot be used to iterate over Objects are not iterable.

If we check the __proto__ of an array, we can find the [Symbol.iterator] property.

But it is not the case with Objects as it is not iterable.

Some use of for..of loop are below:

//Array example

const array = ['frontend developer', 'designer', 'backend developer', 'engineering manager'];

for(const item of array){
  console.log(item);
}

//String example

const string = 'developer';
for(const char of string){
  console.log(char);
}

//Map example

const map = new Map();
 
const emp1 = {name: 'Vikas', Degree: 'MS'};
const emp2 = {name: 'Thomas', Degree: 'MBA'};
 
map.set(emp1, 'frontend developer');
map.set(emp2, 'engineering manager');
 
for(const [key, item] of map) {
  console.log(key, '-', item);
}

Hosting means we can use a variable even before declaring it. When the compiler runs(details in Question 1) and finds all the var declaration, it move them to the top of the file.

Let’s consider this below example. Here we are assigning values to  on name , age and profession without declaring them first. They are declared on line 8, 9, 10 and yet the interpreter doesn’t throws a runtime error. It is because it doesn’t matter where the variables are declared. They are always hoisted to the top by when the compiler makes the first pass.

name = "Thomas";
age = 45;
profession = "Engineering Manager";
 
console.log(`${name} aged ${age} is ${profession}`);
//Thomas aged 45 is Engineering Manager
 
var name;
var age;
var profession;

This is also true for function declaration, as the compiler also treats function declaration as variable declaration as in JS all function declaration are object declaration. But same is not true for function expression and it will give reference error. 

console.log(funcDeclaration()); //Function declaration
console.log(funcExpression());  //ReferenceError
 
function funcDeclaration() {
  console.log('Function declaration');
}
 
let funcExpression = function() {
  console.log('Function expression');
}

/*

Exception: ReferenceError: can't access lexical declaration `funcExpression' before initialization

@Scratchpad/7:2:1

*/

But why did we got this Reference error in function expression call. This is to do with the compiler and interpreter step in JavaScript, which we understood in Question 1.
The compiler runs first and finds all the “var” , and the function declaration are also treated as variable declaration because in JS all function declaration are object declaration.
So, the function declaration call doesn’t give as any error.

But the same is not true about function expressions. Here when the compiler runs it registers a variable functionExpression at line 8, but it doesn’t knows what it is. So, when the interpreter runs at line 2, it throws a runtime error, because it doesn’t know what is functionExpression.

The output right now will be as below, as the method chaining is not understood by the compiler.

/*
Exception: TypeError: A.x(...) is undefined
@Scratchpad/1:14:1
*/

We can get the desired output by “return this” in each function.
Now “this” is the object “A”. So, A.x() will result in console logging ‘x’ followed by returning the object “A” to y().
After that the function A.y() will print ‘y’ followed by returning the object “A” to z().
Finally, ‘z’ is printed on console.

var A = {
    x: function() {
        console.log('x');
        return this;
    },
    y: function() {
        console.log('y');
        return this;
    },
    z: function() {
        console.log('z');
        return this;
    } 
}
A.x().y().z(); 
//Output
x
y
z

The sort() method is used to sort the elements of an array. But the output of the above is not what expected out of sort() function. The output will be [ 1, 15, 2, 30, 4, 45, 7 ] and it is far from desired.

This is because the default sort is according to tring Unicode points. The fix to it is by adding an anonymous function and tell to sort according to ascending or descending order. 

Ascending order is as below:

const array = [1, 2, 15, 4, 30, 7, 45];
console.log(array.sort((a, b)=> a-b)); //[ 1, 2, 4, 7, 15, 30, 45 ]

Descending order is as below:

const array = [1, 2, 15, 4, 30, 7, 45];
console.log(array.sort((a, b)=> b-a)); //[ 45, 30, 15, 7, 4, 2, 1 ]

The most obvious answer to think is the value of “i” will be 0. So, let’s put i = 0 and see what happens.

let i = 0;
console.log(i * i); //Gives 0
console.log(i + 1); //Gives 1
console.log(i - 1); //Gives -1
console.log(i / i); //Gives NaN

Everything is ok, but the last one produce NaN(Not a Number) because “0 divide by 0 will produce infinity”

So, we need a number which is like zero but gives 1 if we divide it by itself. Fortunately there is such a number in JavaScript. The number is the minimum value that is allowed in JavaScript and is represented by Number.MIN_VALUE

let i = Number.MIN_VALUE;
console.log(i * i); //Gives 0
console.log(i + 1); //Gives 1
console.log(i - 1); //Gives -1
console.log(i / i); //Gives 1

Now, what is this MIN_VALUE and why it produces the above correct desired result. If we console log it we can see it’s a very small number 5e-324.

console.log(Number.MIN_VALUE); //5e-324

Now, this number in most cases behaves like a zero(0). Like when we multiply it by itself(i * i), add it to 1(i + 1) or substract it from 1(i -1).
But when we divide this small number by itself it produces 1.

When an event happens on an element, it first runs on which it was clicked, then on its parent, then all the way up on other ancestors. It is the default behaviour of the browser.

Event capturing is the opposite of bubbling and it means when you click on parent element, it goes till the child.

We will first see Event Bubbling. The HTML contains an parent element containing a child element called Child1. When we click on the “Child1” button, first the console log of child is displayed and then the parent is displayed.

We will now see Event Capturing. The HTML contains an parent element containing a child element called Child1. When we click on the button, first the console log of parent is displayed and then the child is displayed. Notice that in addEventListener we have to pass a value of true.

IIFE means Immediately Invoked Function Expression. Let’s first see a normal way to create function in JavaScript, also known as function as “Function declaration”. This is most similar, to the syntax of declaring functions in most other traditional languages like C++ and Java.

Consider the below example which have a simple function to add two numbers. Notice that these function definitions always start with the function keyword. You can’t omit it as it’s invalid syntax.

In JavaScript functions are first class citizens. So, there is another way to declare them. It is known as “Function Expression”. We will refactor the above addNumbers() code. Here we are treating as if addNumbers is a variable declaration. But then assigning an anonymous function to it.

IIFE(Immediately Invoked Function Expression) is nothing but a function expression, but it is defined and invoked at the same time. Here we had got rid of the addNumbers name itself and calling it also at the same time. Notice, that we are passing 2,3 immediately after the anonymous function is declared.

As JavaScript for most part is function scoped, so IIFEs are great way to create private variables.

Promises in JavaScript are like promises in real life. You promise to do something, and then it is done or not done. A promise may be in one of 3 possible states: resolve, rejected, or pending.

They are mainly used to do asynchronous task like calling a REST api and getting the result back. So, these network calls takes time. When the network call is been made, the promise is in Pending state. Once the network call is successful the promise returns a resolve and if it fails it returns resolve.The resolve is captured by the then() callback function and reject captured by catch() callback function.

Consider the below example. Here inside promiseCleanRoom we generate a random number between 0 and 1. If the number is greater the 0.5, we send a resolve or else we send a reject.
Depending on the case either .then is executed or .catch is executed.

Below is the resolve case

Expect to come across this, one of the top JavaScript interview questions for experienced professionals in web development, in your next interviews.

A callback function, also known as a higher-order function, is a function that is passed to another function as a parameter, and the callback function is executed inside the that Function.

Callback function are used everywhere in JavaScript. In JavaScript, functions are first-class citizens. They can be “stored in variables, passed as arguments to functions, created within functions, and returned from functions”.

Let’s look at the example below. Here we call function mainFunc with function “x” as argument and then from inside mainFunc, calling it after some console log.

When we use anonymous function inside our function call for callback like in the below code.

The in-built for Each, map, reduce, filter uses callback functions internally. Check the below example and here we are passing a function, just like above calc code.

Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result.
Now, in recursive function there are two parts. One is termination condition and other is the recursion itself. The termination condition is very important or else the recursion never stops and goes into infinite loop.

Let consider the below simple example to add numbers from the current passed number backwards till 1. Say we pass 3, then 3+2+1 = 6. In the below example If(n≤0) is the termination condition and return n + add(n-1); is the recursion.

The recursion works as shown in the diagram below.
It works like loop, so the first call will go to recursion part and give “3 + add(2)”.

Now the add(2) will be called and will be expended into “2 + add(1)”.
After that add(1) will be called and expanded into “1 + add(0)”.

Finally the add(0) will trigger the termination condition If(n≤0) and produce 0.
After this everything will be added 3 + 2 + 1 + 0 to give 6.

A Higher Order Function is a function that takes one or more function as argument. We use them at many places in JavaScript, and are also called callback functions.

Consider, the below JS code which uses filter to filter-out Adult people. Here, we have a callback function isAdult which is called on every item.

These callbacks are usually defined inline as anonymous function. So, the refactored code is below.

We can further refactor it using arrow functions as below.

So, the array methods of map(), filter(), reduce(), forEach() are all Higher Order Functions.

Beside this eventListener like below are also Higher Order Function, as they use a callback function.

Template Strings are also known as Template Literals. They are the new way to write Strings in JavaScript and been introduced in ES6. We can now write Stings using back-ticks(``), which have a special way to interpolate variables.

They are very useful in Expression interpolation and Multi-line strings. Although they don’t add any new feature to JavaScript, but they are a better visual way to write strings.

Expression interpolationThe old JavaScript way is quite cumbersome and we have to use many + operators to concatenate Strings, whereas with back-ticks we interpolate variable name using ${}.

Multi-line stringsThe old way to have multiline strings is to have a newline(\n) inserted after where we want the next line.
Template strings provides a new way. You just go to the next line and the text will be displayed in next line.

Default parameters are the parameters, which are used if we don’t pass the value to that argument in a function while calling it.

Earlier to ES6, it was a bit difficult to handle a situation like this. In the below example if user didn’t supplied a value to argument , we check inside the function “add” if “a” has a value or assign 0 to it. Same is done for “b”.

So, now we can handle all three situation successfully like when we pass no arguments, or pass only value of ‘a’ or pass only value of ‘b’.

The same can be done in ES6 by changing the parameter to contain the default value. Re-writing the above with ES6 default parameters.

Spread operators(…) were introduced in JavaScript in ES6 version. Just like plus(+) and minus(-) are operators, spread(…) is also an operator in JavaScript. Basically Spread operator spreads on demand.

When you pass arguments to a function using Spread operators they are called Rest parameters.

Consider the below example for arrFunc. We can pass any number of arguments to a function and use the …arr to get it. Now inside the function the arr gets converted into and array. This functionality is quite similar to arguments object.

Now see the restFunc, here we are using rest parameter to get the remaining of the arguments. We can get argument a, b, c and then the rest is converted into array.

The Spread operator can be use separately from function parameter and have some very useful use in array manipulation. They can now also be used with Objects.

Consider that we want to copy an array to other array. Now as you can see in the problem that when we assign variable y to x, we are referencing it and any changes to y will reflect in x.

In the first solution, we use the new JavaScript method Object.assign() to copy all contents of “a” to an empty array and then assigning it to “b”.

But the better and simple solution is with Spread operator where we spread the array “c”, and take its content in an array.

Another use it that if we pass an array to build in functions, which expects normal arguments. Consider the below examples.

We can also use Spread operator in Objects. So, by it we can do both clone and merge as shown in below example. Notice, that in mergedObj foo is “baz” as Object cannot have duplicate keys.

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. You can also handle nested structure by using nested destructuring syntax.

Object Destructuring
Consider the old way to assign variable to Object properties without destructuring.

Now we will refactor the above using “Object Destructuring”. Basically, you use an object literal on the left-hand-side of an assignment expression for object destructuring.

Nested Object Destructuring
If there is nested object as in below case, we can destructure it by adding it’s value to another object syntax

Array Destructuring
Let’s first see how to do it without destructuring. Here we use the index to assign the variables.

Array destructuring is similar to object destructuring, but here instead of keys you assign any variable.

Skipping Items
It is possible to skip items in array destructuring by omitting items with comma(,).

A must-know for anyone looking for top JavaScript coding interview questions. This is one of the frequently asked JavaScript questions today.

ES6 introduced the keyword class in JavaScript. But class in JavaScript is still different than those used in Object Oriented Programming languages like C++ and Java. The ES6 classes are nothing but synthetic sugar for constructor function and internally behaves exactly the same.

Consider the below example of Constructor function. Here we have a constructor function named “Mammal”. It have two properties of legs and name. It also have a function called walk(), which uses the legs and name property. We are creating an instance called person, which then is calling the walk function.

The same can be written with ES6 classes with constructor, but it is exactly the same.

Async await help in allowing us to write completely synchronous-looking code while performing asynchronous tasks behind the scenes.

Async await are basically promises under the hood. But they have made the code for promises very easier to implement. If promises had simplified the code for callbacks, then async await have simplified the code for promises.

Let’s first check a nested promise example. Here we have three functions which return promises- cleanRoom, removeGarbage and winPizza. Now, when the cleanRoom function is run and resolve is returned from the promise, then the immediate .then block will be run . In the .then we are returning the next removeGarbage and in its .then we are returning the winPizza. We are passing the message from one function to other, so it will be appended.

We will refactored the code with async await. Here, instead of three functions we have one function cleaningTheRoom, which have a keyword “async” infront of it. It means that the function will have await statement(s). In the “await” we can have the value returned by a Promise stored in a variable. This type of code is much more cleaner then promise.

The Promise.all method returns a single Promise that resolves when all of the promises in the iterable argument have resolved or when the iterable argument contains no promises. It rejects with the reason of the first promise that rejects.

Let’s refactor the async await code from previous question to use Promise.all. Notice, that we are also using array destructuring at line 6, to receive all the values returned by the promise.

We should use Promise.all in only cases like above, where the result of one Promise is not dependent on other promise.

In Promises we handle any error or reject in the .catch block. Let’s look at the below example, where we are sending reject() from cleanroom(). So, now the error will be caught by the .catch block and then we are displaying the same in console log.

Now, when we refactor the above code using async-await, we don’t have any .catch block. So, we take help from the good old try…catch block available in JavaScript.

Don't be surprised if this question pops up as one of the top interview questions for JavaScript in your next interview.

Constructor functions are the equivalent of classes of traditional programming languages like C++ and Java. Sometimes people will refer to them as reference types, classes, data types, or simply constructors.

If you aren’t familiar with classes, they are a construct that allows you to specify some properties and behaviours (functions), and multiple objects can be created with those properties and behaviours.

A common analogy you’ll often hear is, a class is an architecture’s map and an object is a house created using it. Multiple houses can be created from a single map, as multiple objects can be created from a class.

Let’s start with creating a simple function using object to create employee objects.

Now consider the line var newObj = {} and return newObj. They will be same in every function which we create. So, JavaScript gives us a special type of function known as Constructor function to create them.

We will refactor the above to use Constructor function. Look at the below code.

We are adding the keyword new to create the object. It basically takes care of the creation and returning of the newObj. But gives this a new name this.
Note, that we don’t need to put those two line in our code and automatically put by JavaScript engine.

We can also add methods to a Constructor function and then it can be called with any object created with new keyword.

Let us first consider the below code for normal Constructor function. Here we can directly access the variable “name” by person.name.Now, this might be not desirable at many places and in Traditional languages like C++ and Java, this is solved by the having “private” variables in class and then having “Getters” and “Setters” to access them.

Now, we implement the same in JavaScript using Closures. We have two closure functions setName and getName which are basically “setters” and “getters”. Now, the variable _name is private and cannot be accessed outside the function by person._name and we can access it only by person.getName()

In JavaScript everything is an Object. So whenever we create an function, there is a one object which is created for that function. But actually there is another object which is created which is known as the Prototype object.
Now to access the Prototype object we have a reference on the function object also known as prototype. Notice the small “p”.

When we create an instance of the function with the new keyword interesting things happens. It create something known as __proto__. This is created by the JavaScript engine for every function call using the new keyword.

Now, let’s look how to create an function using prototype and the benefit of it. The below code have two function haveFun and drinkBreak. The function haveFun is an normal function inside the Constructor function. The function drinkBreak is created outside and added to the Prototype Object using it’s reference prototype.

Both the function seems to be doing the same thing, then what’s the benefit.
The benefit of declaring function using prototype is that it’s created once in the Prototype object. So, now whenever we create a new instance of the Constructor function the function is not created again. As in the below screenshot, you can see that emp1 and emp2 both have name and haveFun. But the drinkBreak is inside the __proto__, which is a reference to Prototype object.

JavaScript is a lightweight and interpreted programming language that introduced in 1995 as LiveScript.  Brendan Eich developed it and the language became an ECMA standard in 1997.

Let us now see why JavaScript is needed:

• Less load on Server

You can validate input before sending it to the server. This leads to faster loading on the server.

• Easier Implementation

Executing JavaScript code is not a tedious task. Add your code in an HTML document. When user requests this HTML page with JavaScript in it, the script is sent to the web browser.

• Loading

JavaScript can load content into the document whenever you need it. And while doing that, you don’t need to reload the complete page.

• Animate

Use JavaScript to show and hide information on click. Move DOM elements around the page based on some pattern using JavaScript.

• Text-Animation

With JavaScript, you can also animate text.

• Game Development

You can develop games as well if you have advanced knowledge of JavaScript and its practical implementation.

• Validation

JavaScript validates form data on the client's computer. And this task is accomplished before sending the data to the server.

• JavaScript

JavaScript is a lightweight and interpreted programming language that introduced in 1995 as LiveScript. Brendan Eich developed it and the language became an ECMA standard in 1997.

• Java

Java is a programming language developed by James Gosling. It is a language used in my desktop application, web applications, games, etc. Java is a platform independent object-oriented language.

The following is the difference between Java and JavaScript:

JavaScript is a lightweight and interpreted scripted/ programming language introduced in by Brendan Eic. It has a lot of advantages like validation, animation, interactions, etc. However, like any other programming language, it has some limitations too like you cannot write files on server, browser compatibility issues, etc.

Let us see the limitations of JavaScript one by one:

Writing files on server

JavaScript cannot directly write files on server. However, they can do this using server-side script.

Disable JavaScript

Due to security reasons, every web browser provides an option to disable JavaScript.

The screenshot displays how to enable or disable JavaScript:

• Networking

It cannot be used for Networking applications.

• Browser Compatibility

Applications may behave differently in different web browsers. To support all modern browsers, you need to write cross browser codes.

• Security

Since the code executes on client’s computer, the chances are high for vulnerability and can be exploited for malicious purposes

• Databases

JavaScript cannot access databases. You need AJAX and a server-side script for this.

Note: New developments in JavaScript introduced accessing client-side databases.

One of the most frequently posed advanced JavaScript interview questions, be ready for this conceptual question.

The === is a comparison operator in JavaScript. It checks for the value as well type.

Same value and type

Let us see an example wherein we have assigned a numeric value to variable “val1” and checked it with a numeric value for equality (type and value):

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript === operator</h2>
<p id="test"></p>
<script>
var val1 = 20;
document.getElementById("test").innerHTML = (val1 === 20);
</script>
</body>
</html>

The output displays that the variable has the same value and type. Therefore, true is returned as output:

Same Value and Different Type

Let us see an example wherein we have assigned a numeric value to variable “val2” and checked it with a value of another type for equality (type and value):

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript === operator</h2>
<p id="test"></p>
<script>
var val2 = 5;
document.getElementById("test").innerHTML = (val2 === "5");
</script>
</body>
</html>

The output displays that the variable has same value but different type. Therefore, false is returned as output:

Yes, JavaScript is case-sensitive. Therefore, the following identifiers are different:

Knowledge
KNOWLEDGE

The case-sensitivity feature remains the same for variables, function names, and any other identifiers. The consistent capitalization of letters should be considered. For example, “for loop” should be written as “for”, not “FOR” or “For”.

Let us see an example wherein we have three variables with different case. All of these 3 variables are considered different:

<!DOCTYPE html>
<html>
<body>
<h3>Popular Programming Languages</h3>
<p id="test"></p>
<script>
 var language, LANGUAGE, Language;
 language = "C#";
 LANGUAGE = "Java";
 Language = "Python";
 document.getElementById("test").innerHTML = LANGUAGE;
</script>
</body>
</html>

The output:

Let’s see the following two ways with which you can create an object in JavaScript:

• Object creation with constructor method
• Object creation with Object Literal

Let us understand them one by one:

Object creation with constructor method

To create an object in JavaScript, use “new” as shown below. It is followed by the constructor method Object():

var department = new Object();

Let us see an example to create an object using Object() constructor:

<html>
   <head>
      <title>Objects</title>
      <script>
         var department = new Object();
         department.name = "Finance";
         department.id  = 005;
         department.location = "North";
      </script>
   </head>
   <body>
      <h2>Department Details</h2>
      <script>
         document.write("Department Name = " +  department.name + "<br>");
         document.write("Department Id = " + department.id + "<br>");
          document.write("Department Location = " + department.location);
      </script>
   </body>
</html>

Above, firstly we have created an object:

var department = new Object();  

After that properties are assigned:

department.name = "Finance";
department.id  = 005;
department.location = "North";

Object creation with Object Literal

An object can also be created in JavaScript using object literal as shown below:

var department = {
  id: 11,
  name : "Finance",
  Location     : "North"
};

We can write it as:

var department = { id: 11, name : "Finance", Location     : "North"};

Let us see another example:

<!DOCTYPE html>
<html>
<body>
<h2>Department Details</h2>
<p id="test"></p>
<script>
var department = { id: 11, name : "Finance", Location : "North"};
document.getElementById("test").innerHTML =
department.name + " Department is in " + department.Location + " location.";
</script>
</body>
</html>

The output: 

The array variable is to be set empty if you want to empty an array.

Let’s say we have the following array:

var myArr = ["shirt", "trousers", "watch"];

To empty the above array, just set it to empty:

myArr = [];

Here we converting our array to empty array:

<html>
   <head>
      <title>Empty Array in JavaScript</title>
      <script>
         var myArr = ["shirt", "trousers", "watch"];
         document.write("<br />Array: " + myArr );
         // set array to empty
         myArr = [];
         document.write("<br />New array (Empty now): " + myArr );
      </script>
   </head>
   <body>
   </body>
</html>

The output:

Array: shirt,trousers,watch
New array (Empty now):

This is a common yet one of the most tricky JavaScript interview questions and answers for experienced professionals, don't miss this one. Here is how to answer this -

Using the <scrip>t tag you can store the JavaScript code in an external .js extension file. The tag with the “src” attribute allows you to include this js file in your HTML.

If you are using the same JavaScript code in almost every page, then it’s a good practice to create an external JS file and include it in HTML of every page. This enhances the loading time.

Here’s how you can create external JavaScript file with the extension .js. After creating, add it to the HTML file in the script tag. The ”src” attribute is used to include the external JavaScript file in your HTML:

<script src="myfile.js" ></script>

Let’s say the following is the content of our external JS file “myfile.js”:

function show () {  
   alert("Learning is fun!");  
}

The following is our HTML file, wherein we will include the external file “myfile.js”:

<html>
   <body>
       <form>
        <input type="button" value="Click" onclick="show()"/>  
       </form>
      <script src="show.js">
      </script>
   </body>
</html>

On running the above “myfile.js” file, the following is visible. Press the button “Click”:

On clicking above, the following alert is visible which we added in the external file by creating a JavaScript function:

Events handle JavaScript's interaction with HTML. Events can be related to a button being click or a web page loaded. Resizing a window also comes under event.

The following are the events. A function in JavaScript gets executed against the event:

Let us see an example of onclick event in JavaScript wherein the event gets triggered when left button of the mouse is clicked:

<html>
   <head>
      <script>
         <!--
            function show() {
               alert("This is a message!")
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the below button:</p>
      <form>
         <input type="button" onclick="show()" value="Display" />
      </form>
   </body>
</html>

The output:

Event gets triggered when you click on the button “Display” to agenerate the following alert:

Let us see another example wherein we are displaying the current date and time on click of a button:

<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('myid').innerHTML=Date()">Time</button>
<h2 id="myid"></h2>
</body>
</html>

The following output generates on the click of a button that we created in the example above:

In JavaScript, you can use the same variable to hold different data types. This is why it is called that JavaScript has dynamic types.

It is not required to specify the type of variable in JavaScript. For example, the following is a variable, which is a number:

var val = 10;

Now, the same variable is a String:

var val = “Bingo”;

Now, you can also set it as a Number with decimal:

var val = 3.6;

Let us see them in an example to understand the dynamic types wherein we are showing the same variable can easily hold different types:

<!DOCTYPE html>
<html>
<body>
<h2>Dynamic Types</h2>
<p id="myid"></p>
<script>
var a;         // a is undefined
a = "Bingo";   // a is a String
a = 10;        // a is a Number
a = 3.6;       // a is a Number with Decimal
document.getElementById("myid").innerHTML = a;
</script>
</body>
</html>

The output:

In the above example, we have set different types for the same variable “a”:

var a;         // a is undefined
a = "Bingo";   // a is a String
a = 10;        // a is a Number
a = 3.6;       // a is a Number with Decimal

If you want to check the type of an object at runtime, then use the instanceof operator. The result is a boolean.

Check for Array

Let’s say we are checking if a variable is an array or not using instanceof operator. The syntax:

variable_name instanceof Array

The following is our example and we are checking whether array exists or not:

 <html>
   <body>  
      <script>
        var department = [ "Finance", "Operations", "Marketing", "HR" ];
        if (department instanceof Array) {
          alert('This is an Array!');
        } else {
          alert('This is not an array!');
        }
      </script>
   </body>
</html>

The output displays that array exists since the if condition is true:

Check for Object using instanceof

To check for an object, use the instanceof operator, the following is the example:

<html>
   <body>  
      <script>
        var myObj = {};
        if (myObj instanceof Object) {
          alert('This is an object!');
        } else {
          alert('This is not an object!');
        }
      </script>
   </body>
</html>

The output displays ‘this is an object!’ in an alert box, since the if condition is true: 

Remove a Single Element

To remove a single element from an array in JavaScript, the splice() method is used. With that you can also replace, and/or add elements in an array.

Let’s say we have the following array:

var myArr = ["Java", "PHP", "HTML", "jQuery", "Eclipse", "NetBeans"];

We are using the splice() method to remove a single element by setting the location from where it start, and the number of elements to be removed. Here, we have set 1, therefore only a single element will get removed:

myArr.splice(3, 1);

The following is an example:

<html>
   <head>
      <title>JavaScript Splice Method</title>
   </head>
   <body>
      <script>
         var myArr = ["Java", "PHP", "HTML", "jQuery", "Eclipse", "NetBeans"];
         document.write("<br />Array before removing an element = " + myArr );
         rem = myArr.splice(3, 1);
         document.write("<br />Removed element = " + rem);
         document.write("<br />Array after removing an element = " + myArr );
      </script>
   </body>
</html>

The output: 

Array before removing an element = Java,PHP,HTML,jQuery,Eclipse,NetBeans
Removed element = jQuery
Array after removing an element = Java,PHP,HTML,Eclipse,NetBeans

Remove more than one element

To remove more than one element and in a range,  use the splice() method.

Let’s say we have the following array:

var myArr = ["Java", "PHP", "HTML", "jQuery", "Eclipse", "NetBeans"];

We are using the splice() method to remove more than one element by setting the location from where it starts, and the number of elements to be removed. Here, we have set 3, therefore three elements will get removed:

We are using the splice() method to remove more than one element by setting the location from where it starts, and the number of elements to be removed. Here, we have set 3, therefore three elements will get removed:

myArr.splice(2, 3);

In the following example, we are deleting 3 elements starting from the 3rd position:

<html>
   <head>
      <title>JavaScript Splice Method</title>
   </head>
   <body>
      <script>
         var myArr = ["Java", "PHP", "HTML", "jQuery", "Eclipse", "NetBeans"];
         document.write("<br />Array before removing 3 elements = " + myArr );
         // removing multiple elements
         rem = myArr.splice(2, 3);
         document.write("<br />Array after removing 3 elements = " + myArr );
      </script>
   </body>
</html>

The output displays the array after removing 3 elements:

Array before removing 3 elements = Java,PHP,HTML,jQuery,Eclipse,NetBeans
Array after removing 3 elements = Java,PHP,NetBeans

ECMAScript introduced to standardize JavaScript. The implementations of ECMAScript include JavaScript, ActionScript, JScript, etc. ECMAScript is a standard for these. It is a trademark scripting language specification. 

JavaScript is a lightweight and interpreted programming language that introduced in 1995 as LiveScript.  Brendan Eich developed it and the language became an ECMA standard in 1997.

ECMAScript is a standard for JavaScript. The first edition of ECMAScript came in 1997. JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard. The 8th edition of ECMAScript is ECMAScript 2017, introduced in June 2017. The full form of ECMA is European Computer Manufacturers Association

The current version is the 9th edition of ECMAScript, which came in the year 2018. The ECMA-262 Specification defined a standard version of the core JavaScript language.

Let’s say the following is our variable declaration of strings:

var val = "e\nx\na\nm\np\nl\ne";

To replace newlines, use the replace() method. The method replaces all occurrences of a character in the given string. The replace(char1, char2)  has the following parameters:

• char1: The character to be replaced
• char2: The new character to be added in place of char1

Here the g flag on the regular expression to perform a global match. The 2nd parameter is a space (“ “), which we want in place of new line (\n):

val = val.replace(/\n/g, " ");

The following is an example that replace newline with spaces:

<!DOCTYPE html>
<html>
<body>
<script>
var val = "e\nx\na\nm\np\nl\ne";
val = val.replace(/\n/g, " ");
document.write("After removing new line: "+val);
</script>
</body>
</html>

The output:

After removing new line: e x a m p l e

Library in JavaScript has a function with a leading semicolon:

;(function ) {
}

Let us see the different uses of including a leading semicolon:

• Concatenate

The purpose to include semicolon is to safely concatenate several JS files into one.

• Preceding Code

A leading semicolon protects from preceding code, which may have been improperly closed. A semicolon prevents this from occurring. If this is the case, then adding a semicolon will fix it.

• Appending

The leading semicolon in immediately-invoked function expressions prevent errors when appending the file during concatenation. This concat is to a file containing an expression improperly concluded with a semicolon

Let’s see an example. Let’s say we are concatenating two files with self-invoking functions:

• Function ONE

(function(){...ONE...})()

• Function TWO

(function(){...TWO...})()

• Now concatenating it will give the following result:

(function(){...ONE...})() (function(){...TWO...})()

• Function TWO can have a leading semicolon:

!(function(){...TWO...})()

• Now after concatenation, you can see the semi-colon is visible:

(function(){...ONE...})();(function(){...TWO...})()

This helps in preventing any kind of errors when appending the file during concatenation.

One of the most frequently posed advanced JavaScript interview questions, be ready for this conceptual question.

The comma operator in JavaScript evaluates each of its operands. It returns the value of the last operand.

• Multiple Expressions

With the usage of comma operator, you can easily add multiple expressions. The syntax:

exp1, exp2, exp3, ……exp

Here, exp1, ex,2 exp3 are the expressions.

• Multiple parameters in for loop

Add multiple parameters in a for loop using the comma operator:

for (var a = 0, b = 5; a <= 5; a++, b--)

• Return Statement

Use the comma operator in a return statement. Process before returning using comma:

function show() {
  var x = 0;
  return (x += 1, x);
}

• Declare multiple variables at once

With comma operator, you can declare multiple variables at once. Let’s say you have three variables. To declare and initialize them on new lines, you can declare them in a single line as shown below:

var a = 5, b = 10, c = 30;

• Multiple arguments in a function call

You can also use the comma operators to call multiple arguments in a function call. Let’s say you have a function “calculate” and you need to find the multiplication of three numbers. For that, use the comma operators

calculate(33, 47, 79);

JavaScript used previously had the type attribute usage like this:

<html>
   <body>
      <script language="javascript" type="text/javascript">
         <!--
            document.write("Demo!")
         //-->
      </script>
   </body>
</html>

Above, you can see we have set the script language as “javascript” and the type as “text/javascript”.

The usage of type=”text/javascript” was necessary before the introduction of HTML5. But, when HTML5 came, JavaScript became its default language. Therefore, adding “text/javascript” is optional.

To validate decimal numbers in JavaScript, you can use regular expressions for matching with the match() method:

Let’s say we have the following decimal with string representation:

var val = "5.9"; 

The following regular expression you can use: 

var reg = /^[-+]?[0-9]+\.[0-9]+$/;  
var res = val.match( reg );

For validation, we used the above regular expression and test it using the match() method. It gives us whether the given value is decimal or not:

<html>
   <body>
      <script>
        var val = "5.9";
         var reg = /^[-+]?[0-9]+\.[0-9]+$/;  
         var res = val.match( reg );
         if(res)
           document.write("Decimal!" );
         else
           document.write("Not a decimal!" );
      </script>
   </body>
</html>

The output displays ‘decimal’ since the if statement is true:

Decimal!

Let us see another example with a different input i.e. a number:

<html>
   <body>
      <script>
        var val = "7";
         var reg = /^[-+]?[0-9]+\.[0-9]+$/;  
         var res = val.match( reg );
         if(res)
           document.write("Decimal!" );
         else
           document.write("Not a decimal!" );
      </script>
   </body>
</html>

The output is ‘not a decimal!’, since the if statement is false:

Not a decimal!

Let us see another example and check for string:

<html>
   <body>
      <script>
        var val = "abc";
         var reg = /^[-+]?[0-9]+\.[0-9]+$/;  
         var res = val.match( reg );
         if(res)
           document.write("Decimal!" );
         else
           document.write("Not a decimal!" );
      </script>
   </body>
</html>

The output displays ‘not a decimal!’ since the if statement is false:

Not a decimal!

Arrays in JavaScript are used to store multiple values in a single variable. Let us see the two ways to create an array in JavaScript:

Using Array Literal

The easiest way to create an array in JavaScript is with array literal. Here, we have a variable and we are setting multiple values to it in an array:

var cars = ["Saab", "Volvo", "BMW"];

Let us see an example:

<!DOCTYPE html>
<html>
<body>
<p id="myid"></p>
<script>
var department = ["HR", "Finance", "Operations", "Marketing"];
document.getElementById("myid").innerHTML = department;
</script>
</body>
</html>

The output:

HR,Finance,Operations,Marketing

Using keyword new

With JavaScript, you can also create an array using the new operator:

var department = new Array("HR", "Finance", "Operations", "Marketing");

Let us see an example:

<!DOCTYPE html>
<html>
<body>
<p id="myid"></p>
<script>
var department = new Array("HR", "Finance", "Operations", "Marketing");
document.getElementById("myid").innerHTML = department;
</script>
</body>
</html>

The output:

HR,Finance,Operations,Marketing

One of the most frequently posed advanced JavaScript interview questions, be ready for this conceptual question.

Yes, constants do exist in JavaScript. The “const” keyword is used to create constant in JavaScript.

The const variables in JavaScript must be assigned a value when they are declared. Once declared, you cannot change and declare the value of constant again.

For example:

const val = 100;

Another example include:

const PI = 3.14159265359;

With const, you can declare local variables with block scope rather than function scope. Let’ say we have a constant variable “a”. After declaring a value like a constant variable, you can’t assign a new value to it.

Here’s an example wherein we are trying to reassign value to a const variable. As expected an error generates:

// declared a constant variable.
const val= 150;
// Error, since we try to assign a new value to the constant
val = 0;

The following also gives an error since we are trying to change the primitive value:

const PI = 3.14159265359;
PI = 3.14;

You cannot even reassign a constant array. Let us see an example for this:

<!DOCTYPE html>
<html>
<body>
<p id="myid"></p>
<script>
try {
  const department = ["Finance", "HR", "Marketing", "Operations"];
  department = ["Operations", "IT", "Accounting", "Production"]; // error
}
catch (e) {
  document.getElementById("myid").innerHTML = e;
}
</script>
</body>
</html>

The output displays an error as shown below since we cannot assign to a constant variable:

TypeError: Assignment to constant variable.

To compare two dates in JavaScript, firstly add two date objects and set dates.

Here, our first date is the current date:

To compare two dates in JavaScript, firstly add two date objects and set dates.

Here, our first date is the current date:

var one, two;
one = new Date();        
two = new Date( "Mar 10, 2017 20:15:10" );

And the second date we have set as past date:

two = new Date( "Mar 10, 2017 20:15:10" );

Now, let us compare the above two dates using the below given code:

<!DOCTYPE html>
<html>
<body>
<script>
  var one, two;
  one = new Date();
  document.write(one);
  two = new Date( "Mar 10, 2017 20:15:10" );
  document.write("<br>"+two);
  if (one > two) {
      document.write("<br>First date is the recent date.");
  } else {
      document.write("<br>Second date is the recent date.");
  }
</script>
</body>
</html>

Let’s say the following is our string with numbers:

var strNum = "only123!"; 

To fetch the digits from the above string, the following RegExp is used:

/\d/g

Above we have set the g flag to perform global match.

The following is the code:

<html>
   <head>
      <title>Regular Expression in JavaScript</title>
   </head>
   <body>
      <script>
        var strNum = "only123!";
        var regExp = /\d/g;
        document.write("String with numbers: "+strNum)
        var res = strNum.match(regExp);
        document.write("<br>Getting Digits = "+res);
      </script>
   </body>
</html>

The output:

String with numbers: only123!
Getting Digits = 1,2,3

The new way to define a variable in JavaScript is using the let statement. The ECMAScript 2015 introduced it. As you know that variables can also be declared with var, but the usage of var are scoped to the function block level.

Declare variables that are limited in scope to the block, statement, or expression using the let. Redeclaring a variable inside a block will not redeclare the variable outside the block.

Example of let

Let us see an example of let. The variable declared in the loop does not redeclare the variable outside the loop:

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript let</h3>
<p id="myid"></p>
<script>
let i = 2;
for (let i = 0; i < 10; i++) {
   document.write(i);
}
document.getElementById("myid").innerHTML = i;
</script>
</body>
</html>

The output displays 2 as the variable i value:

Example of var

Let us see the same example using var this time instead let keyword:

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript var</h3>
<p id="myid"></p>
<script>
var i = 2;
for (var i = 0; i < 10; i++) {
   document.write(i);
}
document.getElementById("myid").innerHTML = i;
</script>
</body>
</html>

The output displays 10 as the value of variable i:

To search for a string in a string, use the search() method. The method searches a string for a specified value. The returned value is the position of the match. However, -1 is returned if the match isn’t found.

Let’s say we have the following string:

var myStr = "Popular Programming Languages";

We want to search the below string from the above string:

Languages

For that, use the search() method:

var res = myStr.search("Languages");

Let us see the example wherein the string is successfully searched and the result (position) is displayed on button click:

<!DOCTYPE html>
<html>
<body>
<p>Click the below button...</p>
<button onclick="show()">Search</button>
<p id="myid"></p>
<script>
function show() {
    var myStr = "Popular Programming Languages"
    var res = myStr.search("Languages");
    document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The output displays the position:

Let us now see another example, wherein -1 is returned since the string to be found isn’t there: 

<!DOCTYPE html>
<html>
<body>
<p>Click the below button...</p>
<button onclick="show()">Search</button>
<p id="myid"></p>
<script>
function show() {
    var myStr = "This is an example!"
    var res = myStr.search("demo");
    document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The output on button click displays -1:

In the unsigned right shift operator (>>>), the bits shifted on the left are always zero.

The zeros get filled in from the left with the operator. It shifts all bits in a 32-bit number to the right.

The following is an example:

<html>
   <body>
      <script>
         var val1 = -23;
         var val2 = 2;
         document.write("val1 >>> val2 = ");
         res = (val1 >>> val2);
         document.write(res);
      </script>
   </body>
</html>

The output:

val1 >>> val2 = 1073741818

Let us see another example wherein we have a positive number. In this case the operator works the same as a signed right shift:

<html>
   <body>
      <script>
         var val1 = 7;
         var val2 = 2;
         document.write("val1 >>> val2 = ");
         res = (val1 >>> val2);
         document.write(res);
      </script>
   </body>
</html>

The output:

val1 >>> val2 = 1

Cookies has a plain text record of fields: Expires, Domain, Path, Secure, etc. They are generally used to track preferences, commissions, etc. It stores information on your computer in the form of plain text. Cookies are saved in name-value pairs. It gets deleted when the web browser is closed.

Let us see how we can create a cookie in JavaScript:

The document.cookie property is used in JavaScript to create cookies. With the same property, you can also read and delete cookies.

Create a cookie:

document.cookie = "username=Knowledge Hut";

Add an expiry date to the cookie created above:

document.cookie = "username= Knowledge Hut; expires=Thu, 12 Dec 2018 12:00:00 UTC";

To read a cookie in JavaScript:

var a = document.cookie;

The above displays the cookies in name-value form i.e.:

cookie1=value; cookie2=value;

To delete a cookie, you need to just set the cookie to the past date (expire). The date is included using the expires parameter:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Let us see an example that creates a cookie:

<html>
   <head>
      <script>
         <!--
            function displayCookie()
            {
               if( document.one.dept.value == "" ){
                  alert("Enter some value!");
                  return;
               }
               val = escape(document.one.dept.value) + ";";
               document.cookie="name=" + val;
               document.write ("Setting Cookie <br> " + "name=" + val );
            }
         //-->
      </script>
   </head>
   <body>
      <form name="one" action="">
         Enter Department: <input type="text" name="dept"/>
         <input type="button" value="Input Cookie" onclick="displayCookie();"/>
      </form>
   </body>
</html>

The output displays an input box, wherein we add a value to set as cookie:

On clicking “Input Cookie” above, you can see that we have set the cookie successfully:

The typeof operator is a unary operator in JavaScript. It is used to check the data type of its operand, like a variable is string, numeric, boolean, etc.

Let us see a simple example for number:

<html>
   <body>
      <script>
         var val = 10;
         document.write(typeof val);
      </script>
   </body>
</html>

The output displays that it is a number:

Number

Let us now see another example for string:

<html>
   <body>
      <script>
         var val = "Sachin";
         document.write(typeof val);
      </script>
   </body>
</html>

The output displays that it is a string:

String

In the same way, we can check the type of a value entered, which is a boolean:

<html>
   <body>
      <script>
         var val = true;
         document.write(typeof val);
      </script>
   </body>
</html>

The output display that the value entered is a boolean:

boolean

As we saw some examples above, here is the list of the values returned by the typeof operator:

The following are the different ways in which we can include JavaScript code in an HTML file. We can add JavaScript in the same file or an external file:

Java Script in the same file

Add the JavaScript code in the same HTML file using any of the following ways:

In head section

If you want the script to run on some event, then add the JavaScript code in the head section of the HTML file. Let us see an example:

<html>
   <head>
      <script>
         <!--
            function show() {
               alert("Demo!")
            }
         //-->
      </script>
   </head>
   <body>
      <input type="button" onclick="show()" value="Click" />
   </body>
</html>

In body section

If you want the script to run on page load, then add the JavaScript code in the body section of the HTML file. Let us see an example:

<html>
   <head>
   </head>
   <body>
      <script>
         <!--
            document.write("Demo")
         //-->
      </script>
      <p></p>
   </body>
</html>

JavaScript in an external file

Using the <script> tag you can store the JavaScript code in an external .js extension file. The tag with the “src” attribute allows you to include this js file in your HTML.

If you are using the same JavaScript code in almost every page, then it’s a good practice to create an external JS file and include it in HTML of every page. This enhances the loading time.

Here’s how you can create external JavaScript file with the extension .js. After creating, add it to the HTML file in the <script> tag. The src attribute is used to include the external JavaScript file in your HTML:

<script src="myfile.js" ></script>

Let’s say the following is the content of our external JS file “myfile.js”:

function show () {  
   alert("Learning is fun!");  
}

The following is our HTML file, wherein we will include the external file “myfile.js”:

<html>
   <body>
       <form>
        <input type="button" value="Click" onclick="show()"/>  
       </form>
      <script src="show.js">
      </script>
   </body>
</html>

Press the button “Click”:

On clicking above, the following alert is visible which we added in the external file by creating a JavaScript function:

The following are the types of pop-up boxes available in JavaScript:

Alert Box

The alert box is for an alert or message to the user. User needs to click “OK”. The alert() method is used to add a message in the alert:

Let us see an example:

<!DOCTYPE html>
<html>
<body>
<h1>Alerts in JavaScript</h1>
<button onclick="show()">Display</button>
<script>
function show() {
  alert("This is an alert box!");
}
</script>
</body>
</html>

The output displays an alert on the click of a button:

On clicking the above button, the following alert generates:

Prompt Box

To input a value from the user and display it, use the prompt box. Users need to click “OK” to return the entered input, else click “Cancel” to return null.

Let us see an example:

<!DOCTYPE html>
<html>
<body>
<button onclick="show()">Display</button>
<p id="myid"></p>
<script>
function show() {
  var res;
  var department = prompt("Enter your Department", "Operations");
  if (department == null || department == "") {
    res = "Prompt cancelled!";
  } else {
    res = "Department is " + department;
  }
  document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The output first displays the button which you need to click:

On clicking the above button, a prompt box is visible wherein user input is requested:

On clicking “Ok”, the input is displayed on the web page:

Confirm Box

The confirm box is used in JavaScript to take user’s consent or accept something. User need to click “OK” to return true, else click “Cancel” to return false.

Let us see an example:

<!DOCTYPE html>
<html>
<body>
<button onclick="show()">Display</button>
<p id="myid"></p>
<script>
function show() {
  var res;
  if (confirm("Press a button!")) {
    res = "OK is pressed!";
  } else {
    res = "Cancel is pressed!";
  }
  document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The following is the output. The button is visible. You need to click it:

On clicking the above button, a confirm box generates that wants users’ consent on clicking the button:

On pressing OK, the following is visible:

To handle exceptions in JavaScript, use the try, catch, throw and finally statements.

The try statement defines a block of code to be tested for errors, whereas the catch statement allows defining a block of code to be executed if an error occurs in the try.

The try block must be followed by either exactly one catch block or one finally block.

Let us see an example of try, catch and finally:

<html>
   <head>
      <script>
         <!--
            function show()
            {
               var val = 5;
               try {
                  alert("Value = " + val );
               }
               catch ( e ) {
                  alert("Error = " + e.description );
               }
               finally {
                  alert("Finally block executes!" );
               }
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click below:</p>
      <form>
         <input type="button" value="Display" onclick="show();" />
      </form>
   </body>
</html>

The output on running displays the following button:

On clicking the above button, an alert box is visible:

No error is there. On clicking “OK”, the “finally” statement executes. The alert box in the “finally” generates the following alert:

To return the division remainder, use the Modulus operator in JavaScript.

Let’s say the following are our two variables for which we want the modulus:

var val1 = 20;
var val2 = 8;

Now, let us use the % operator to find the remainder:

var res = val1 % val2;

The example finds the division remainder using the Modulus operator:

<!DOCTYPE html>
<html>
<body>
<h2>Remainder</h2>
<p id="demo"></p>
<script>
var val1 = 20;
var val2 = 8;
var res = val1 % val2;
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>

The output displays the remainder:

The eval() function is used in JavaScript to evaluate or execute an argument. The method evaluates the expression, if the argument is an expression, else for arguments as statements, it executes the statements.

The parameter in the eval(string) function is a string, which can be an expression, variable, statement, or sequence of statements:

eval(string)

Note: Do not call eval() method to evaluate an arithmetic expression

Let’s say we have the following two variables:

var val1 = 20;
var val2 = 7;

Now, with a new variable we will perform some calculations with the eval() method:

var calc1 = eval("val1 * val2") + "<br>";
var calc2 = eval("99 + val1") + "<br>";

The example demonstrates the role of eval() in JavaScript:

<!DOCTYPE html>
<html>
<body>
<button onclick="show()">Display</button>
<p id="myid"></p>
<script>
function show() {
    var val1 = 20;
    var val2 = 7;
    var calc1 = eval("val1 * val2") + "<br>";
    var calc2 = eval("99 + val1") + "<br>";
    var res = calc1 + calc2;
    document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The output displays a button, which on pressing generates the following result:

140
119

Let us see another example:

<!DOCTYPE html>
<html>
<body>
<button onclick="show()">Display</button>
<p id="myid"></p>
<script>
function show() {
    var val1 = 15;
    var val2 = 10;
    var calc1 = eval("30 * 3") + "<br>";
    var calc2 = eval("val1 + val2") + "<br>";
    var calc3 = eval("5 * val1") + "<br>";
    var calc4 = eval("10 + val2") + "<br>";
    var res = calc1 + calc2 + calc3 + calc4;
    document.getElementById("myid").innerHTML = res;
}
</script>
</body>
</html>

The output displays a button, which on pressing generates the following result:

90
25
75
20

To increase the size of the text, you need to use the JavaScript big() method. Using it, you can easily display a string in a font size bigger than the normal font.