17 Essential JavaScript Interview Questions

When working with special characters in JavaScript, such as ampersands (&), apostrophes ('), double quotes (""), and single quotes (''), we typically use escape characters, typically backslash (\). JavaScript displays any characters that are contained within the escape.

Here are six additional escape characters that are also available in JavaScript:

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

These are in no way carried out by the JS or HTML code. These were initially intended to operate teletypes, typewriters, and fax machines.

In JavaScript, variables and methods are declared using both let and var. However, the let keyword is block scoped, whereas the var keyword is function scoped, which is the key distinction between the two JS keywords. Additionally, hoisting happens in var, but it doesn't happen in let.

A variable declared with the var keyword can be used anywhere within a function. For instance,

// variable x cannot be used here
function program() {
    var x = 'JavaScript';
    console.log(x);
}
// variable x cannot be used here
program(); // JavaScript

Output:

JavaScript

In the code above, the variable a is declared with var. Within the function greet, the variable a can be used wherever you like.

Only within a code block can we access a variable declared with let. For instance,

function program() {
    let x = 'JavaScript';

    // variable y can't be used here
    if(a == 'JavaScript'){
        // variable y can be used here
        let y = 'is amazing';
        console.log(x + ' ' + y);
    }

     // variable y cannot be used here
    console.log(x + ' ' + y); // error
}
// variable x cannot be used here

program();

Output

JavaScript is amazing
Uncaught ReferenceError: y is not defined

The variable x is declared inside the function in the program above, and it can be accessed from anywhere inside the function (‘a’ becomes function scoped).

However, the if block statement contains a declaration of the variable y. Block-scoped and only accessible from within the if block, y will be.

Consequently, an error occurs when you attempt to access y outside of the if block (as shown above in the program). It should be noted that a function's declared variables will have scope for both var and let.

A variable that has been declared using the keyword var can also be declared again. For example,

var a = 15; // 15
var a = 13; // 13

A variable that has been declared with the let/code> keyword cannot be redeclared within the same block or same scope. For example,

let a = 15;
let a = 13; // error 

A function is typically defined before being used. However, anonymous functions can be used if a function needs to run automatically at the location where it is given and not be called again. These functions are unnamed, hence the name.

The term "function declaration" refers to a function declared in a separate statement from the main code flow. For example, a function expression is created when a function is added to an expression or another syntax element.

In the Strict mode, a function declaration contained within a code block is only visible inside that block and not outside of it. A function expression is an exception to this rule.

When the execution reaches it, a function expression is created. Only from that point on is the function expression usable. On the other hand, it is possible to call a function declaration before it has been defined.

Of course, their use cases differ as well. For example, thanks to the function declaration, the code can be organized more freely and with better readability. However, when a conditional declaration is required, function expressions are usually not allowed to be used.

Assuming x is an “empty” object in scope, for instance:

var x = {};

[ 'cat', 'dog' ].forEach(function(k) {
    x[k] = undefined;
});

Two properties are set on the object x by the snippet of the code above. The ideal outcome of any lookup on a JavaScript object with an unset key is undefined. However, running this code designates those properties as the object's "own properties."

This is a practical method for guaranteeing that an object possesses a specific set of properties. When this object is passed to the object's keys, an array containing the set keys will also be returned (even if their values are undefined).

Note: Commonly asked JavaScript interview question.

The Nan property represents a "Not-a-Number" value. It denotes a value that is not a valid numeric value. Consequently, typeof() of NaN returns a Number. We can use the isNaN() function to determine if a value is NaN by converting it to a Number type and equating it to NaN.

isNaN("JavaScript Interview Questions")  // Returns true
isNaN(5)   // Returns false 
isNaN('5')  // Returns false because '5' is converted to Number type which results in 0 (a number) 
isNaN(undefined) // Returns true
isNaN(true) // Returns false because true is converted to Number type which results in 1 (a number)
isNaN(false) // Returns false

JavaScript has six types of Error Name values. Each one is briefly explained as follows:

1. Eval Error: Thrown when coming across an error in eval().
2. Range Error: It is thrown when a number that is outside the specified range is used.
3. Reference Error: This error is thrown when an undeclared variable is used.
4. Syntax Error: This error is generated when the incorrect syntax is used.
5. Type Error: It is generated when a value outside the range of data types is attempted to be used.
6. URI Error: This error is thrown due to the use of illegal characters.

Duplicates in a JS array may be removed in a variety of ways. The following is a description of the three most popular ones:

Applying a filter to an array in JavaScript will allow duplicates to be removed. There are three arguments required when calling the filter() method. These are the array, element in use, and index of the element in use.

function unque_array (arr){
let unique_array = arr.filter(function(elem, index, self) {
return index == self.indexOf(elem); 
}
return unique_array
 }

console.log(unique_array(array_with_duplicates));​

The second approach makes use of a for loop. This technique stores all the repeating elements in an empty array to remove duplicate elements from an array:

elements.Array dups_names = ['Jane', 'John', 'Doe', 'Jane'];

function remove_dups_array(dups_names) {
let unique = {};
names.forEach(function(i) {
If (!unique[i]) {
unique[i] = true; }
});
return Object.keys(unique);}

dups_array(names);

The third method employs a Set. The simplest method for eliminating duplicate elements from an array in JS is as simple as this. An array's built-in object for storing distinct values is called a set:

function uniquearray(array) {
let unique_array= Array.from(set(array))
return unique_array;}

Note: Commonly asked JavaScript interview question.

The keyword this refers to the object whose property the function is. The object calling the function will always determine the this keyword's value.

To better understand the above statement, let us take a look at a few examples:

function program() {
  console.log(this);
}
   
program();

The function is a property of the global object because it is used in the global context.

Consequently, the global object will be the result of the code above. For example, the IDE window object would be the global object if the code above were executed inside an IDE.

Let's take another example:

var obj = {
    name:  "Jane",
    getName: function(){
    console.log(this.name);
  }
}
   
obj.getName();

The getName() function in the code above is a property of the object obj at the time of invocation. Therefore, this keyword will refer to the object obj, and the result will be "Jane."

One more example is as follows:

var obj = {
    name:  "Jane",
    getName: function(){
    console.log(this.name);
  }
     
}
       
var getName = obj.getName;
       
var obj2 = {name:"John", getName };
obj2.getName();

The output will be “John”.

Despite being declared inside the object obj, the getName() function is a property of obj2 at the time of invocation. As a result, this will always refer to obj2.

The simplistic approach to comprehending the this keyword is always to check the object before the dot. The global object will be the value of this keyword if, as in the first example, there is no object before the dot.

Many well-known JavaScript libraries use this method, becoming more widespread (jQuery, Node.js, etc.). This method creates a closure around the entire file's contents, perhaps most important because it also creates a private namespace, preventing name conflicts between JavaScript modules and libraries.

Another benefit of this approach is that a global variable can have an accessible (presumably shorter) alias. For instance, jQuery plugins frequently use jQuery's jQuery.noConflict() function enables you to remove the $ reference from the jQuery namespace. If you have removed the reference, you can still employ $ in your code by using this closure technique, as follows:

(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);

The gist of the matter is that the use of strict allows you to voluntarily impose stricter error handling and parsing on your JavaScript code at runtime. Errors in the code that would have been overlooked or failed silently now produce errors or throw exceptions. It's a good practice all around.

Debugging is made simpler by the strict mode. Code errors that previously would have been overlooked or failed silently will now produce errors or throw exceptions, alerting you to issues in your code sooner and helping you locate their root cause more quickly, stopping unintentional globals. A global variable with that name is automatically created when a value is assigned to an undeclared variable without using strict mode. This is one of the most frequent mistakes in JavaScript. Attempting to do so in strict mode results in error.

This mode gets rid of the pressure. A reference to this value that is null or undefined is automatically coerced to the global in the absence of a strict mode. This may result in numerous head fakes and hair-pulling bugs. Referencing a null or undefined value causes an error in strict mode.

The application of ‘strict’ forbids the use of duplicate parameter values. When a function's named arguments are duplicated, strict mode throws an error (for example, function foo(val1, val2, val1){}), catching what is almost certainly a bug that you would have otherwise spent a lot of time trying to find.

Furthermore, eval() is safer thanks to the strict mode. In strict and non-strict modes, eval() behaves differently in some ways. Most importantly, strict mode prevents variables and functions declared inside of an eval() statement from being created in the scope of their containing statements.

Last but not least, it raises an error when delete is misused. Non-configurable object properties cannot be deleted using the delete operator, which removes properties from objects. When attempting to delete a non-configurable property, non-strict code will fail silently, whereas strict mode will throw an error.

Note: Commonly asked JavaScript interview question.

Surprisingly, these two functions will not return the same thing. Let’s test this.

console.log("greet1 returns:");
console.log(greet1());
console.log("greet2 returns:");
console.log(fgreet2());

Output is as follows:
greet1 returns:
Object {greeting: "hello"}
greeting2 returns:
undefined

This is not only unexpected but what makes it especially bizarre is that greet2() returns undefined with no errors being raised.

This is because semicolons in JavaScript are formally optional (although omitting them is generally really bad form). As a result, a semicolon is automatically added right after the return statement in greet2() whenever the line containing the return statement (and nothing else on the line) is encountered.

Even though the remaining code is perfectly valid and is never used or executed, no error is raised (it is simply an unused code block that defines a property bar equal to the string "hello").

This behavior supports the convention that an opening curly brace in JavaScript should go at the end of a line rather than at the start of a new one. This demonstrates that this becomes more than just a matter of taste in JavaScript.

It would result in abc. The Emp1 object's prototype property in this instance is company. The delete operator does not remove the prototype property. Company is not a property of the Emp1 object. However, we can use the delete Employee.company method to remove the company property directly from the Employee object.

The comparison operator double equals transform operands of the same type before comparison.

Therefore, JavaScript turns any string into a number when comparing it to a number. Zero is always added to an empty string. A string that contains no numbers is converted to NaN (Not a Number), which produces a false result.

In JavaScript, the triple equals comparison operator is a strict equality comparison operator that returns false for values that are not of the same type. With this operator, type casting is done for equality. For example, the comparison operator === will return a false result if we compare 2 with "2".

The main distinction between the == and === operators is that the former compares variables by correcting for type. For example, if you compare a number with a string with a numeric literal, == allows that, whereas === doesn't allow that because it checks both the value and the type of two variables. === returns false if two variables are not of the same type. ==, however, returns true.

The expected output is as follows:

"array 1: length=5 last=j,a,n,e"
"array 2: length=5 last=j,a,n,e"

array1 and array2 are the same (i.e. ['n','h','o','j', ['j','a','n','e'] ]) after the above code is executed. Moreover, the array object's reverse() not only returns the array in reverse; it additionally reverses the order of the array, which called it (i.e., in this case, array1).

The array is returned by the reverse() method (i.e., in this case, array1). array2 is thus simply a reference to (rather than a copy of) array1. As a result, if we do anything to array2 (for example, call array2.push(array3);), array1 will also be affected because array1 and array2 are simply references to the same object.

It is also worth noting that passing an array to another array's push() method appends that entire array, as a single element, onto the end of the array. Therefore, the statement array2.push(array3); adds array3 in its entirety as a single element to the end of array2 ( it does not add the two arrays together).

Like Python, JavaScript honors negative subscripts in calls to array methods like slice() to reference elements at the end of the array; e.g., a subscript of -1 indicates the last element in the array, and so on.

Note: Commonly asked JavaScript interview question.

Timers are used to run a piece of code repeatedly or at a predetermined interval. The commands setTimeout(), setInterval(), and clearInterval() are used to accomplish this.

Code can run at predetermined intervals thanks to the window object. These different time intervals are known as timing events. Therefore, JavaScript should be used with these two main techniques: The setTimeout() function executes a function after waiting a specified number of milliseconds.

setInterval() is the same as setTimeout(), but repeats the execution of the function continuously.

Note that the setTimeout() and setInterval() are both methods of the HTML DOM Window object.

The clearTimeout() function is used to stop the execution of a function specified in setTimeout() by using a variable returned from setTimeout():

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

If a function has not been executed already, its execution can be stopped by calling the clearTimeout() method.

Unit.js, QUnit, Jasmine, Karma, Mocha, Jest, and AVA are a few well-known JavaScript unit testing frameworks and tools.

The open-source assertion library Unit.js is known for running on browsers and Node.js. With JavaScript unit testing frameworks like Mocha, Karma, Jasmine, QUnit, Protractor, etc., it has a very high degree of compatibility and provides the assertion list's entire documented API.

Both client-side and server-side JavaScript unit testing is done using QUnit. jQuery projects use this Free JavaScript testing framework. It adheres to the Common JS unit testing Specification for JavaScript unit testing. In addition, the Node Long-Term Support Schedule is supported.

Jasmine is a framework for behavior-driven development used for unit testing JavaScript programs that are both synchronous and asynchronous. It has a simple syntax that can be written for any test and does not require DOM.

Karma is a free and open-source environment for productive testing. Simple workflow management using the command line. It allows the freedom to write tests using QUnit, Mocha, and Jasmine. The test can be executed on actual hardware with simple debugging.

Mocha is browser- and Node.js-based. As a result, asynchronous testing can be done more easily with Mocha. In addition, it delivers precision and adaptability in reporting and provides outstanding support for numerous rich features, including JavaScript APIs and test-specific timeouts.

Facebook has so far tested all of the JavaScript code using jest. In addition, the "zero-configuration testing experience" is offered. It supports running tests that are independent and conflict-free and requires no additional setup, configuration, or libraries.

AVA is a basic framework for unit testing in JavaScript. Both parallel and serial test runs are being performed. The execution of parallel tests proceeds uninterrupted. This testing framework also supports asynchronous testing. JavaScript unit tests are run by AVA using subprocesses.

The unshift(), unlike push(), is used at the starting of the array. This function adds the desired number of elements to the top of an array.

Let's explain better through an example:

var name = [ "john" ];
name.unshift( "tom" );
name.unshift( "alex", "Jane" );
console.log(name);

The output is shown below:

[ 'alex', 'jane', 'tom', 'john' ]

A closure in JavaScript is an inner function with access to variables in the outer (enclosing) function's scope chain. A close has three scopes of variables that are accessible to itself: its scope, the scope of the enclosing function, and global variables.

Example:

var globalVar = "abc";
(function outerFunc(outerArg) {
    var outerVar = 'x';
    
    (function innerFunc(innerArg) {
    var innerVar = 'y';
    
    console.log(
        "outerArg = " + outerArg + "\n" +
        "innerArg = " + innerArg + "\n" +
        "outerVar = " + outerVar + "\n" +
        "innerVar = " + innerVar + "\n" +
        "globalVar = " + globalVar);
    
    })(123);
})(102030);

In the above example, variables from innerFunc, outerFunc, and the global namespace are all in scope in the innerFunc.

The above code will therefore produce the following output:

outerArg = 102030
innerArg = 123
outerVar = x
innerVar = y
globalVar = abc

Note: Commonly asked JavaScript interview question.