JavaScript Interview Questions

Below are the main differences between obfuscation and encryption,

There are many online/offline tools to minify the javascript files,

1. Google's Closure Compiler
2. UglifyJS2
3. jsmin
4. javascript-minifier.com/
5. prettydiff.com

JavaScript can be used to perform HTML form validation. For example, if the form field is empty, the function needs to notify, and return false, to prevent the form being submitted. Let's perform user login in an html form,

<form name="myForm" onsubmit="return validateForm()" method="post">
User name:
<input type="text" name="uname" />
<input type="submit" value="Submit" />
</form>

And the validation on user login is below,

function validateForm() {
var x = document.forms["myForm"]["uname"].value;
if (x == "") {
alert("The username shouldn't be empty");
return false;
}
}

You can perform HTML form validation automatically without using javascript. The validation enabled by applying the required attribute to prevent form submission when the input is empty.

<form method="post">
<input type="text" name="uname" required />
<input type="submit" value="Submit" />
</form>

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

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

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

function myFunction() {
var userName = document.getElementById("uname");
if (!userName.checkValidity()) {
document.getElementById("message").innerHTML =
userName.validationMessage;
} else {
document.getElementById("message").innerHTML =
"Entered a valid username";
}
}

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

1. validity: It provides a list of boolean properties related to the validity of an input element.
2. validationMessage: It displays the message when the validity is false.
3. willValidate: It indicates if an input element will be validated or not.

The validity property of an input element provides a set of properties related to the validity of data.

1. customError: It returns true, if a custom validity message is set.
2. patternMismatch: It returns true, if an element's value does not match its pattern attribute.
3. rangeOverflow: It returns true, if an element's value is greater than its max attribute.
4. rangeUnderflow: It returns true, if an element's value is less than its min attribute.
5. stepMismatch: It returns true, if an element's value is invalid according to step attribute.
6. tooLong: It returns true, if an element's value exceeds its maxLength attribute.
7. typeMismatch: It returns true, if an element's value is invalid according to type attribute.
8. valueMissing: It returns true, if an element with a required attribute has no value.
9. valid: It returns true, if an element's value is valid.

If an element's value is greater than its max attribute then the rangeOverflow property is true. For example, the below form submission throws an error if the value is more than 100,

<input id="age" type="number" max="100" />
<button onclick="myOverflowFunction()">OK</button>

function myOverflowFunction() {
if (document.getElementById("age").validity.rangeOverflow) {
alert("The mentioned age is not allowed");
}
}

No, javascript does not natively support enums. But there are different kinds of solutions to simulate them even though they may not provide exact equivalents. For example, you can use freeze or seal on object,

var DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})

An enum is a type restricting variables to one value from a predefined set of constants. JavaScript has no enums but typescript provides built-in enum support.

enum Color {
 RED, GREEN, BLUE
}

You can use the Object.getOwnPropertyNames() method which returns an array of all properties found directly in a given object. Let's see the usage of this in an example below:

const newObject = {
a: 1,
b: 2,
c: 3,
};

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

You can use the Object.getOwnPropertyDescriptors() method which returns all own property descriptors of a given object. The example usage of this method is below,

const newObject = {
a: 1,
b: 2,
c: 3,
};
const descriptorsObject = Object.getOwnPropertyDescriptors(newObject);
console.log(descriptorsObject.a.writable); //true
console.log(descriptorsObject.a.configurable); //true
console.log(descriptorsObject.a.enumerable); //true
console.log(descriptorsObject.a.value); // 1

A property descriptor is a record which has the following attributes

1. value: The value associated with the property
2. writable: Determines whether the value associated with the property can be changed or not
3. configurable: Returns true if the type of this property descriptor can be changed and if the property can be deleted from the corresponding object.
4. enumerable: Determines whether the property appears during enumeration of the properties on the corresponding object or not.
5. set: A function which serves as a setter for the property
6. get: A function which serves as a getter for the property

The extends keyword is used in class declarations/expressions to create a class which is a child of another class. It can be used to subclass custom classes as well as built-in objects. The syntax would be as below,

class ChildClass extends ParentClass { ... }

Let's take an example of Square subclass from Polygon parent class,

class Square extends Rectangle {
constructor(length) {
super(length, length);
this.name = "Square";
}

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

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

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

window.history.pushState("page2", "Title", "/page2.html");

This mechanism is used by routing libraries of frameworks like React and Angular in order to simulate the behaviour of a multi-page-website, even though they are only SPA (Single Page Applications).