Explore topic-wise InterviewSolutions in .

The OUTPUT LOGGED will be:

When INSIDE the method, fn() is called the “this” of the function fn is at window level. So, “this.length” will produce 10.
Now, when arguments[0]() is called, then ARGUMENT[0] is equivalent to “fn” and function fn is called. But “this” now is the arguments ARRAY, which is of length 2 because it contains two arguments (fn, 1). So, “this.length” will produce 2.

The OUTPUT logged will be:

The first console.log prints undefined because heroIdentity()is been INVOKED in the GLOBAL context (i.e., the WINDOW object) where the _name property doesn’t exists.

The way to fix it is by binding, it to hero object by USING bind.

 One of the main use of “call” is to change an array like object to array.

There is an array like object arguments  available for every normal function(not arrow function). It is very useful in functions, as we can get the number of arguments passed to it.  Let’s convert the arguments into array, because arrays have a lots of functionality.

Consider the below example, where we console log arguments. If we expand it in dev console, it shows it’s not and array and it’s __proto__ doesn’t have array functionalities.

Now to convert it we will take an empty array and use it’s slice method. Then call it through call, by passing the argument Object. Now it is CONVERTED into array and the __proto__ have all array functionalities. So, we are using the array reduce method available to do the SUM of the number of arguments passed to it.

The second application of call is in inheritance , using constructor functions. 

Consider the below example. Here in the Cat function, we CALLED its parent Mammal using call method with “this” of Cat.

One of the practical use of apply is to pass an array to a function, which expects arguments only.

Consider the case of Math.max, which gives the maximum of the arguments passed. So, now to pass an array like in below code, we convert it through apply. Note the first argument is null because we are not passing any Object for “this” binding.

One of the practical use of bind is in React. In React whenever we call a function from render(), we have to bind it’s “this” in constructor.

Consider the below code. We bind the “this” of the event handler to the component instance in the constructor, we can pass it as a callback without worrying about it losing its context.

There are FOUR solutions to access “this” inside the innerFunc().

Solution 1
Use a “that” variable in CLEANROOM() for ACCESSING “this” inside innerFunc(). Basically “that” is nothing but the OUTER “this”.

Solution 2
Use call method to use the outer “this” inside the innerFunc().

Solution 3
Use bind method to use the outer “this” inside the innerFunc().

Solution 4
Use arrow function in the innerFunc(). Arrow functions have special meaning for “this” and it is that, it takes the value of “this” from the enclosing scope and is very useful in this case.

EVERY function in JavaScript have call, APPLY and bind methods. These methods can be used to set the CUSTOM value of “this” to the execution context of the function.

call
Let’s say that we have an object called obj. It only has one property called num, which has a value of 3. Let’s also make a function called addNumbers. 

Now, in addNumbers we have this.num. But how do we pass the value obj.num to it. We need to pass it a context, which means the value of “this”. We will do this my call method by passing a first argument as obj, so the “this” is the obj now.

apply
It is totally similar to call, but the only difference is that we can pass array as the second argument. We will use the same code for apply also. But now we have an ARR, to be passed as second argument. 

bind
Bind works in a bit different way then call and apply. It works by RETURNING a copy of the function. We will take the returned function in bindFunc and then execute it in the next line.

JavaScript is a synchronous, blocking, single-threaded language. That just means that only one operation can be in progress at a time. 

Many PEOPLE think JavaScript is asynchronous because we can do async tasks like SETTIMEOUT, CALLBACKS, promises in it. But the asynchronous behaviour of JavaScript(setTimeout, callbacks, promises) is not a part of JavaScript itself and built on top of JavaScript language in browser and accessed through browser APIs.

The browser have a Call Stack, Browser API and Message Queue and the ORDER of their processing is called event loop.

We will see the working of the classic interview question to understand how the event loop and with it the asynchronous behaviour of JavaScript works.

//Output

The output will be A C B , even after the setTimeout() was set to display “b” after 0 ms. This happens because of the internal working of the browser. Let’s look into the step of execution.

The main() is pushed into Call Stack, which then console logs A. Then it is popped out and the setTimeout is pushed into Call Stack. Now the setTimeout() uses Browser API, so it is pushed there and the console log C is pushed into Call Stack.

• Even with the delay of 0ms the exec() for setTimeout have to go to the Message Queue.
• After all the statements of main() is RUN and the Call Stack is empty, then only the exec() from Message Queue can be pushed to the Call Stack.

This is how event loop works and the asynchronous, non-blocking part of JavaScript comes from.

Prototypal inheritance is to ADD NEW capabilities to a constructor function using Prototype.
Let’s first understand what are Constructor functions. They are basically JavaScript way to implement the concept of Classes.
Let’s CONSIDER the example below, where we have a “Car” constructor function. In it we have a “model”, which we are also returning by getModel(). Now we can create a new instance of it by using the “new” keyword. Each instance will have its own “this” and have its own getModel(). 

console.log(maryCar.getModel()); //nissan

Now, the problem is that every time we create a new instance we get a new COPY of getModel(). Suppose we have 100 instances, then we will have 100 copies. Below console log shows the same thing.

We should somehow move the logic for getModel() outside our Constructor function and that is where the concept of Prototype helps.

In JavaScript as you know everything is an Object. Whenever a function is created there are two object ONE is the function object another is the prototype object. Now to access the Prototype object we have a property on the function object also known as “prototype”.

Every instance created from the function have access to the Prototype object.  Now, let’s move our getModel() outside our Constructor function using prototype.

We get the same result and this is known as Prototypal Inheritance. Also, each new instance don’t have its own getModel(), which we can see in below console log.

The substr() and substring() methods are simpler, yet they have some differences. The 2nd argument of the substring() method is the index to halt the search, whereas the 2nd parameter of substr() is the maximum length.

Note: We will be taking the same string and the same parameter value for both the functions to make it easier to understand

substr() method

The substr() method returns the characters in a string BEGINNING at the specified location. It goes through the number of characters which is specified by the user.

The parameters of substr(start, len):

• start − Location start extracting characters.
• length − The count of characters to extract.

Let us see an example.

We have the following string:

Now, we will use substr() as discusses above with the parameters to GET 5 elements beginning from 3rd index:

The example: 

The output from 3rd index.

5 is the length of elements after beginning with 3rd index:

substring() method

The substring() method returns subset of a string.

The parameters of substring(i1, i2):

• i1 – Index from where you WANT the substring.
• i2 − Index till when you want the substring.

Let us see an example.

We have the following string:

Now, we will use substring() as discussed above with the parameters to get substring from 3 to 5, since we set the parameter as 3 and 5:

The example: 

The output from substring 3 to 5: 

Generally, in JavaScript we create functions USING the function KEYWORD:

Using the Fat arrow function REDUCES line of code and even avoids you to write the keyword “function” again and again.

The syntax of fat arrow function includes =>, wherein it shows fat arrow:

For multiple arguments:

Let’s see what you need to do with fat arrow function while implementing the code snippet we saw above: 

The double NOT Bitwise operator is a “double tilde” (~~) operator in JavaScript.

Let’s SAY we have the following variable:

Now, use the double tilde operator and assign it to another variable: 

The example to work with double tilde operator: 

The output: 

3

You can ACHIEVE the same RESULT from Math.floor() in JavaScript, but double tilde is considered faster: 

The same output is VISIBLE: 

The “undefined” is used to unset a variable in JavaScript.

Declare and INITIALIZE a variable:

Now reassign the variable with undefined SINCE we wish to unset it: 

The following is an example: 

The output displays undefined:

If you are implicitly declaring the variable without var keyword, then USE the delete to unset a variable: 

NaN SUGGESTS that the entered VALUE is not a legal number. It is a JavaScript property, which can also be considered as a "Not-a-Number" value.

To determine the entered value is a number or not, you can use the Number.isNaN() method. If the result is “True”, then it would that the given value is not a number, whereas “FALSE” would mean the value is a legal Number.

Let US see an example:

The OUTPUT displays True since the above value is not a legal number: 

Let us see another example: 

The output since the above value is a legal number: 

Let us see another example: 

The output generates True since 0/0 is not a legal number: 

The !! operator is the not operator twice. It is useful in working through the truth value and returns a Boolean value.

LET US see an example:

The OUTPUT:

Let us see another example for integer and apply double not to it: 

The output:

Yes, we can add one or more element to the front of an array using the unshift() METHOD.<BR>
Let us first see the syntax of the unshift() method to understand it further:

Here, e1, e2, e3, … , en are the elements to be added in the front of the array.

We added the FOLLOWING elements to the array:

Let’s say we need to add a new element in the front of the above array. For that set the element value as a parameter in the unshift method as shown below:

The following is an example wherein we are adding an element in the beginning of an array:

The output:

To remove the last element from an array in JavaScript, use the pop() method.<BR>
The following is the syntax:

Let’s say we have the following array:

To remove an element, use the pop() method:

Let us see an example wherein we are removing 5 elements:

The method returns the REMOVED element from the array. In the below example, we have an array and we have removed the last element from the array. With that we have removed 4 more elements from the end one by one using the pop() method:

The OUTPUT:

The Math.random() method displays a floating-point pseudo-random number between 0 and 1.

Note: The value is inclusive of 0 and exclusive of 1

The following is an example:

The output displays any random number between 0 and 1: 

When we will run the above program again, a new random value between 0 and 1 will get generated as shown below: 

To convert a date object to string in JavaScript, use the toLocaleString() method.

The following is the syntax:

Create a Date object: 

Now convert the above date object to string:

The example demonstrates how to convert Date object to string:

The output:

The Date.parse() method is USED in JavaScript to parse a string representation of date and time.

Let us first see the syntax:

Here, str is the date string.

The method parses the date and returns the number of MILLISECONDS SINCE midnight of January 1, 1970.

Let us see an example now:

The output:

The Date() method is to be USED in JavaScript to GET today’s date and time.

The following is the syntax:

Date()

Let us see the example to display the current date and time: 

The output displays today’s date and time:

Let’s say you need to only fetch the time portion of the date. For that, use the toTimeString() method:

The output displays only the current time: 

To display the unicode of the character at a specified index in a string with JavaScript, use the charCodeAt() method.

Let us now see the syntax:

Here, “index” is the index of the character we are willing to return.

The method returns the Unicode of the character. However, "NaN" is returned if no character is found at the index we added as the parameter. 

The following is an example:

The output displays the returned Unicode of the 1st character, since we added parameter as 0: 

The following is another example wherein we will find out the Unicode for character at index 2: 

The output displays the returned Unicode of the 3rd character, since we added parameter index as 2:

Let us see a CONDITION in which we are finding the character at a position where there is no character:

Above, “NaN” is returned since there is no character at position 5th: 

“True” and “False” are the two values in a Boolean object. Let us now see how to create a Boolean object:

Let us now see an example wherein we will create a Boolean object and return the value. We are using Boolean VALUEOF() method:

The output:

Here is another example wherein we are returning the string representation of a Boolean value:

The output: 

Unfortunately, Boolean Typed ARRAY do not exist in JavaScript. The following typed arrays exist in JavaScript: Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, etc.

Let us see an EXAMPLE of Int8Array typed array. The Int8Array typed array REPRESENTS an array of twos-complement 8-bit signed integers.

The following is the syntax:

The following is an example: 

The output:

To display an alert box in JavaScript, use the alert() method. The alert box would have an OK button.

The syntax:

Here, msg is the text which is to be displayed in the alert box. SHOWN below under alert():

The following is an example: 

The output:

On clicking the above button, the following alert GENERATES and the message we added as parameter is visible:

You MAY be wondering how we can add a multi-line message in an alert box in JavaScript. For that, just use \n as shown below: 

The output: 

On clicking the above button, the following alert generates and the multi-line message we added as parameter is visible:

<P>The document.write() method writes JavaScript code to a document. It also writes HTML EXPRESSIONS.

The syntax:

Here, expression1, expression2, expression3 are the expressions to be written to the OUTPUT stream.

Let us now see an example to write HTML elements with document.write():

The output:

Let us see another example to write text to stream with document.write():

The output:

The length property is used in JAVASCRIPT to get the length of a STRING:

The SYNTAX:

Let’s say the following is our string:

Now get the length of the string in a new variable:

The following is an example that displays the string length:

The output:

Let us now see what we will get when we will TRY to find the length of an empty string:

The output displays 0 since it is an empty string:

The Number object is for integers, floating-point numbers, etc. Let us now see how to CREATE a Number object:

Let us now create an object with floating-point value:

An example here is to GET the value of the specified Number object. We are creating a Number object:

The output: 

Let us now create another Number object and represent it in String:

The output:

The var and let are used to declare a variable in JavaScript. 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:

The output displays the value if i variable as 2:

Example of var

Let us see the same example and place var in place of let to work with variables:

The output displays the value of i variable as 10:

JavaScript provides a join() method to join the elements of an array. While joining, you can set the separator as WELL:

Here, separator is the resultant array would be specified by this separator. Comma is the default separator.

The return value is the strings as array elements separated by the separator.

Let us see an EXAMPLE wherein we have the following array:

The example to convert array into comma-separated list: 

The following is the OUTPUT:

Let’s say the following is your array:

Now, get the length of the array:

Loop until the length of the array is more than 0. Use Math.random() to RANDOMIZE the elements. Decrement the value of len (length) after every iteration for each element:

The following is an example that shuffles an array:

The output:

Get the pixels of the CURRENT document SCROLLED to from the upper left corner of the window, vertically using the pageYOffset property. An example displays the same and returns the pixels:

The javascript:void(0) evaluates an expression even if its addition to a web page brings unwanted output.

Use the void(0) to get the undefined primitive VALUE. Here, we are preventing the page from loading on clicking the hyperlink:

The output is displayed below. Nothing happens when the link is CLICKED: 

An inline FUNCTION is assigned to a variable created at runtime. It is assigned to a variable and can be easily reused.

The following code snippet display that inline functions are assigned:

Creating a function WITHOUT any name is what we call Anonymous functions.

Let us see an example:

The output:

The <noscript> TAG is used in JavaScript to allow adding an alternate message if you disable JavaScript in the web browser. In this way a user can know whether the web browser has JavaScript or not. If it’s not there, then the message added USING the <noscript> is visible.

The following is an example that ells itself whether JavaScript is disabled in the web browser or not:

The above code will allow the web browser that doesn't support JavaScript to display the text which we added under <noscript> tag i.e. "Your browser does not support JavaScript!".

Use CSS and jQuery to replace the DEFAULT JavaScript alert pop up. Let us first see how to create an alert in JavaScript and how the default looks:

The output displays a button, which is to be clicked to generate an alert: 

On clicking the above button, the following alert generates: 

Let us now see how we can create a fancy alert box using JavaScript library jQuery and CSS: 

Under <style> above, we added the CSS code.

The output displays a button which is to be clicked to generate an alert:

On clicking the above “Display” button, the following alert is visible which we styled. The background color is not blue. The button color and style is also changed: 

The best way to CHECK if a variable exist in JavaScript is to verify it with null.

Let us see an example:

The output: 

Above, we worked on the condition that a variable exist if it is not null. Therefore we CHECKED the value if variable a like this:

Place the JavaScript anywhere WITHIN your web page, but it is recommended to include it within the <head> or <body> tag.

The following are the different ways in which we can include JavaScript code in an HTML

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:

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:

To find whether the web browser supports JavaScript or not, you can TEST it on your local system.

Create an HTML file and USE the <noscript> tag. Run the file in your browser and if it does not support JavaScript, then the message set under the <noscript> would be visible.

The <noscript> tag is used in JavaScript to allow adding an alternate message if JavaScript is disabled in the web browser. In this WAY a user can know whether the web browser has JavaScript or not. If it’s not there, then the message ADDED using the <noscript> is visible.

The following is an example:

The above code will allow the web browser that doesn't support JavaScript to display the text which we added under <noscript> tag i.e. "Your browser does not support JavaScript!".

Global variables are WIDELY used and do not create any SECURITY concern.

But Global variables should be avoided in JavaScript because these kinds of variables can be easily overwritten by others scripts. On adding a NEW variable with the same name can create errors if we are not cautious about its placement. To avoid such confusions, it is a good practice to avoid global variables.

Use closures and avoid the usage of global variables. The process is to work with local variables and wrap the code in closures as shown below:

The object properties are variables used internally in the object's methods. These variables can also be globally visible throughout the page. The properties are the values associated with a JavaScript object.

Let US SEE how to create and ACCESS object properties:

The following is the output: 

Above we access the object properties as:

As shown above, we used to access object properties. Here, “Department” is our object whereas “name” is our property: 

To enable JavaScript in Windows, you NEED to work on “Internet Options” in Windows.

Here are the steps:

Go to “START” on Windows, type “Internet Options” and click on it:

On CLICKING, the following dialog box would be visible:

Go to “Security” tab now and click “Custom Level”. Now you will reach the “Security Settings” dialog box:

Now under “Active Scripting”, enable “JavaScript” as shown in the following screenshot: 

Click “OK”, then “APPLY” one by one on both the dialog boxes to successfully enable JavaScript on Windows.

JavaScript Closures

A closure is a FUNCTION in JavaScript which have access to the parent scope, even after closing the parent function.

Let us see an EXAMPLE:

The output: 

After clicking “Count” above, the value increments by 5: 

In the above example, the following VARIABLE is assigned the return value of a function which is self-invoking: 

The self-invoking function sets the count to zero:

It returns a function expression as you can see above. This makes it a function and can access the count in the parent scope as well. This is what we can call closure in JavaScript.

Anonymous functions

Creating a function without a name is what we call Anonymous functions. Let us see an example:

The output: 

Above, we have function without a name:

The JAVASCRIPT engine adds a prototype property to the function when a function is created. This prototype property is an object. The objects inherit the properties and methods from their prototype.

Access the function’s prototype property using the following syntax:

The output: 

Yes, &LT;noscript> element do exist in JavaScript. Use this element to set a message for USERS if the web browser they are using do not support JavaScript. This is also useful if the scripts have been disabled in the web browser.

The following is an example:

The above code will allow the web browser that doesn't support JavaScript to DISPLAY the text which we added under <noscript> tag i.e. "Your browser does not support JavaScript!".

It is said in JavaScript that almost everything is an object. JavaScript has many NATIVE or built-in objects.

Let us see some of them:

• The Number object represents numerical date, i.e. integers or floating-point numbers.
• The Boolean object represents two values, i.e. "true" or "FALSE".
• The String object lets you work with a series of characters.
• The Array object stores multiple values in a single variable.
• The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date().
• The math object provides you properties and methods for mathematical constants and functions.

Example: Create an object

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

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

The output:

Above, firstly we have created an object: 

After that properties are assigned:

Example: Create a Boolean Object

The Boolean object represents two values, i.e. "true" or "false". Let us now see an example wherein we will create a Boolean object and return the VALUE. We are using Boolean valueOf() method:

The output: 

Here is another example wherein we are returning the string representation of a Boolean value. We are creating a Boolean object first:

The output:

Example: Create a Number Object

The Number object represents numerical date, i.e. integers or floating-point numbers.

Let us now see how to create a Number object:

Let us now create an object with floating-point value:

An example here is to get the value of the specified Number object. We are creating a Number object:

The output:

Let us now create another Number object and represent it in String:

The output: 

To reference an object's properties or methods, use the with keyword.

The syntax: 

The “obj” becomes the default object for the duration of the block that FOLLOWS. Now the object’s properties and methods can be used without even naming the object.

The example demonstrates the usage of with keyword:

The output:

To display a blink text, use the blink () method in JavaScript. The string blinks using this method.

Note: The blank() method is not part of the standard now and the <blank> element is OBSOLETE. THEREFORE, it may not work on modern web browsers.

Let us SEE an example:

The output displays the text and it may or may not blink, SINCE the method is not part of the standard now:

The NEGATIVE_INFINITE property is a property of the NUMBER Object in JavaScript, which is negative INFINITY.

The following is the syntax:

The return value is -Infinity. LET us now see an EXAMPLE:

The output:

The Math.ABS() method is used in JavaScript to FIND the absolute value of a number.

The FOLLOWING is the parameter of abs(val) method:

• val: The number for which you WANT the absolute value:

The method returns:

• A Number representing the absolute value of the specified number, or
• NaN, if the value is not a number, or
• 0 if the value is NULL

Let us see an example to get the absolute value of a negative number:

To get the absolute value:

The entire example:

The output returns the negative value:

Let us see another example for “null” as input:

The output:

Let us see another example to get the absolute value:

The output:

When data is sent to a web server, it has to be in the form of string. The JSON.stringify() method is USED in JavaScript to convert an object to string.

Let’s say we have the following object in JavaScript:

Now use the JSON.stringify() method to convert the above object into string:

Now, display it with INNERHTML. Let us SEE the example: 

The output generates the string: 

The “USE strict” is a literal expression introduced in ECMAScript version 5. It indicates that the code should be executed in "strict mode", which in turn considered a good practice.

The key use of this mode is if you won’t declare a variable and use it, then an error would be visible. Let us see what we discussed using the following example:

Since, variable “a” is not defined above, the following error would be visible if you will Press F12 for debugging:

The following is not allowed in strict mode with “use strict”:

Case1: It is not allowed to delete a variable in strict mode

Above generates the following error in strict mode, when you will enable debugging with F12 on web browser:

Case 2: Using Octal numeric LITERALS are not allowed

Above generates the following error in strict mode, when you will enable debugging with F12 on web browser: