learn kro favicon img

JavaScript Interview Questions (Part-1)

1. difference between Function.prototype.apply and Function.prototype.call?

The only difference between apply and call is how we pass the arguments in the function being called. In apply we pass the arguments as an array and in call we pass the arguments directly in the argument list.

Example:

const obj1 = {
result:0
};

const obj2 = {
result:0
};

function reduceAdd(){
let result = 0;
for(let i = 0, len = arguments.length; i < len; i++){
result += arguments[i];
}
this.result = result;
}

reduceAdd.apply(obj1, [1, 2, 3, 4, 5]); // returns 15
reduceAdd.call(obj2, 1, 2, 3, 4, 5); // returns 15

2. How to check if a value is an Array?

We can check if a value is an Array by using the Array.isArray method available from the Array global object. It returns true when the parameter pass to it is an Array otherwise false.

Example:

console.log(Array.isArray(5)); // false
console.log(Array.isArray(“”)); // false
console.log(Array.isArray()); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray({ length: 5 })); // false
console.log(Array.isArray([])); // true

3. What is the Set object and how does it work?

The Set object is an ES6 feature that lets you store unique values, primitives or object references. A value in a Set can only occur once. It checks if a value exists in the set object using the SameValueZero algorithm.

We can make Set instance using Set constructor and we can optionally pass an Iterable as the initial value.

Example:

const set1 = new Set();
const set2 = new Set([“a”,”b”,”c”,”d”,”d”,”e”]);

Note: We can add, remove, check or get the length of the value into the Set instance.

4. The fastest way in converting a string to a number

According to MDN Documentation, the “+” operator is the fastest way of converting a string to a number because it does not perform any operations on the value if it is already a number.

5. difference between the in operator and the hasOwnProperty method in objects?

Both of these features check if a property exists in an object. It will return true-false. The difference is the in operator also checks the objects’ Prototype Chain if the property was not found in the current object while the hasOwnProperty method just checks if the property exists in the current object ignoring the Prototype Chain.

Example:

console.log(“prop” in o); // true;
console.log(“toString” in o); // true, the toString method is available in this object’s prototype which is the Object.prototype

console.log(o.hasOwnProperty(“prop”)); // true
console.log(o.hasOwnProperty(“toString”)); // false, does not check the object’s prototype

6. monolithic and microservice architectures

Monolithic Architectures:
If the app is written as a single cohesive unit of code whose components are designed to work together, sharing the same memory space and resources, is called Monolithic architecture.

Microservice Architectures:
If the app is made up of lots of smaller, independent applications capable of running in their own memory space and scaling independently from each other across potentially many separate machines.

Netflix, eBay, Amazon, the UK Government Digital Service, Twitter, PayPal, The Guardian, and many other large-scale websites and applications have all evolved from monolithic to microservices architecture

7. Event Delegate – destroy multiple list items with one click handler?

To handle similar events in an enormous list of items, we can use event handler as many times as we need, like copying and pasting. But this would not be an efficient solution because a change in one place will bear you to bound multiple changes & that would be horrible for thousands of items.
But if we use Event Delegation in JavaScript, which is leveraging the event bubbler. Rather than using the event handler in every child element, it would be subtle to declare the event handler in the parent element. This is known as Event Delegation.

Example:

<ul id=”listToDestroy”>
<li><a href=”#”>first item</a></li>
<li><a href=”#”>second item</a></li>
<li><a href=”#”>third item</a></li>
<li><a href=”#”>forth item</a></li>
<li><a href=”#”>Fifth item</a></li>
</ul>

document.getElementById(‘listToDestroy’).addEventListener(‘click’, function (e) {
var elm = e.target.parentNode;
elm.parentNode.removeChild(elm);
e.preventDefault();
});

8. What is the arguments object?

A collection of parameter values pass in a function.

It’s an –
i) Array-like object,
ii) has a length property
iii) we can access individual values using array indexing notation
Note: Arguments object does not have the built-in methods in an array forEach, reduce, filter and map.

We can convert the arguments object into an array using the

Array.prototype.slice.
function one() {
return Array.prototype.slice.call(arguments);
}

Note: the arguments object does not work on ES6 arrow functions.

function one() {
return arguments;
}
const two = function () {
return arguments;
}
const three = function three() {
return arguments;
}

const four = () => arguments;

four(); // Throws an error — arguments is not defined

When we invoke the function four it throws a ReferenceError: arguments is not defined error. We can solve this problem if your envinroment supports the rest syntax.

const four = (…args) => args;

This puts all parameter values in an array automatically.

9. How to create an object without a prototype?

We can create an object without a prototype using the Object.create method.

Example:

const o1 = {};
console.log(o1.toString());
// logs [object Object] get this method to the Object.prototype

const o2 = Object.create(null);
// the first parameter is the prototype of the object “o2” which in this
// case will be null specifying we don’t want any prototype
console.log(o2.toString());
// throws an error o2.toString is not a function

10. What does “use strict” do?

“use strict” is a ES5 feature in JavaScript that makes our code in Strict Mode in functions or entire scripts. Strict Mode helps us avoid bugs early on in our code and adds restrictions to it.

Strict Mode allows us the following restrictions:

i) Assigning or Accessing a variable that is not declared

function returnY(){
“use strict”;
y = 123;
return y;
}

ii) Deleting an undeletable property

“use strict”;
const obj = {};

Object.defineProperty(obj, ‘x’, {
value : ‘1’
});

delete obj.x;

iii) Duplicate parameter names

“use strict”;

function someFunc(a, b, b, c){ }

Leave a Comment

Your email address will not be published. Required fields are marked *