JavaScript Interview Questions

In the Object-oriented paradigm, an existing API contains certain elements that are not intended to be extended, modified, or re-used outside of their current context. Hence it works as the final keyword which is used in various languages.

You can use the navigator object to detect a browser language preference as below,

var language =
(navigator.languages && navigator.languages[0]) || // Chrome / Firefox
navigator.language || // All browsers
navigator.userLanguage; // IE <= 10

console.log(language);

Title case means that the first letter of each word is capitalized. You can convert a string to title case using the below function,

function toTitleCase(str) {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
});
}
toTitleCase("good morning john"); // Good Morning John

You can use the <noscript> tag to detect javascript disabled or not. The code block inside <noscript> gets executed when JavaScript is disabled, and is typically used to display alternative content when the page generated in JavaScript.

<script type="javascript">
// JS related code goes here
</script>
<noscript>
</noscript>

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

1. Arithmetic Operators: Includes + (Addition), – (Subtraction), * (Multiplication), / (Division), % (Modulus), ++ (Increment) and – – (Decrement)
2. Comparison Operators: Includes == (Equal), != (Not Equal), === (Equal with type), > (Greater than), >= (Greater than or Equal to), < (Less than), <= (Less than or Equal to)
3. Logical Operators: Includes && (Logical AND), || (Logical OR), ! (Logical NOT)
4. Assignment Operators: Includes = (Assignment Operator), += (Add and Assignment Operator), –= (Subtract and Assignment Operator), *= (Multiply and Assignment), /= (Divide and Assignment), %= (Modules and Assignment)
5. Ternary Operators: It includes conditional(: ?) Operator
6. typeof Operator: It uses to find type of variable. The syntax looks like typeof variable

Rest parameter is an improved way to handle function parameters which allows us to represent an indefinite number of arguments as an array. The syntax would be as below,

function f(a, b, ...theArgs) {
// ...
}

For example, let's take a sum example to calculate on dynamic number of parameters,

function sum(...args) {
let total = 0;
for (const i of args) {
total += i;
}
return total;
}

console.log(sum(1, 2)); //3
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4)); //10
console.log(sum(1, 2, 3, 4, 5)); //15

Note: Rest parameter is added in ES2015 or ES6

The rest parameter should be the last argument, as its job is to collect all the remaining arguments into an array. For example, if you define a function like below it doesn’t make any sense and will throw an error.

function someFunc(a,…b,c){
//You code goes here
return;
}

Below are the list of bitwise logical operators used in JavaScript

1. Bitwise AND ( & )
2. Bitwise OR ( | )
3. Bitwise XOR ( ^ )
4. Bitwise NOT ( ~ )
5. Left Shift ( << )
6. Sign Propagating Right Shift ( >> )
7. Zero fill Right Shift ( >>> )

Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. Let's take an example to see this behavior,

function calculateSum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(calculateSum(...numbers)); // 6

Object.isFrozen() method is used to determine if an object is frozen or not.An object is frozen if all of the below conditions hold true,

1. If it is not extensible.
2. If all of its properties are non-configurable.
3. If all its data properties are non-writable. The usage is going to be as follows,

const object = {
property: "Welcome JS world",
};
Object.freeze(object);
console.log(Object.isFrozen(object));

The Object.is() method determines whether two values are the same value. For example, the usage with different types of values would be,

Object.is("hello", "hello"); // true
Object.is(window, window); // true
Object.is([], []); // false

Two values are considered identical if one of the following holds:

1. both undefined
2. both null
3. both true or both false
4. both strings of the same length with the same characters in the same order
5. both the same object (means both object have same reference)
6. both numbers and both +0 both -0 both NaN both non-zero and both not NaN and both have the same value.

Some of the applications of Object's is method are follows,

1. It is used for comparison of two strings.
2. It is used for comparison of two numbers.
3. It is used for comparing the polarity of two numbers.
4. It is used for comparison of two objects.

You can use the Object.assign() method which is used to copy the values and properties from one or more source objects to a target object. It returns the target object which has properties and values copied from the source objects. The syntax would be as below,

Object.assign(target, ...sources);

Let's take example with one source and one target object,

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 3, c: 4 }

console.log(returnedTarget); // { a: 1, b: 3, c: 4 }

As observed in the above code, there is a common property(b) from source to target so it's value has been overwritten.

Below are the some of main applications of Object.assign() method,

1. It is used for cloning an object.
2. It is used to merge objects with the same properties.

The Proxy object is used to define custom behavior for fundamental operations such as property lookup, assignment, enumeration, function invocation, etc.

A proxy is created with two parameters: a target object which you want to proxy and a handler object which contains methods to intercept fundamental operations. The syntax would be as follows,

var p = new Proxy(target, handler);

Let's take a look at below examples of proxy object and how the get method which customize the lookup behavior,

//Example1:

const person = {
name: "Sudheer Jonna",
age: 35,
};

const handler = {
get(target, prop) {
if (prop === "name") {
return "Mr. " + target[prop];
}
return target[prop];
},
};

const proxy = new Proxy(person, handler);

//Example2:

var handler1 = {
get: function (obj, prop) {
return prop in obj ? obj[prop] : 100;
},
};

var p = new Proxy({}, handler1);
p.a = 10;
p.b = null;

console.log(p.a, p.b); // 10, null
console.log("c" in p, p.c); // false, 100

In the above code, it uses get handler which define the behavior of the proxy when an operation is performed on it. These proxies are mainly used for some of the below cross-cutting concerns.

1. Logging
2. Authentication or Authorization
3. Data binding and observables
4. Function parameter validation

Note: This feature was introduced with ES6.