JavaScript Advance Interview Questions & Answers for Experienced-Part 2

JavaScript Advance Interview Questions & Answers

What is currying in JavaScript?

We can process a function by passing all arguments at one and can return result. But When a function takes arguments one by one and each time it return a function that takes second argument until all arguments have been fulfilled. So It is called curring.

So when a function, instead of taking all arguments at one time, takes the first one and return a new function that takes the second one and returns a new function which takes the third one, and so forth, until all arguments have been fulfilled.

sum(1,2,3,4) turns to sum(1)(2)(3)(4);

Advantages of Currying:
We can avoid passing same variable again and again.
We can create higher order function by Using Currying.

read more here.. https://codeburst.io/currying-in-javascript-ba51eb9778dc

What is advantages of closures?

Closures are very important when defining private variables inside an Object.

function Code() {
     var key = '2019';
     return function(doorNumber) {
         return doorNumber * key;
     } 
 }
 var c = Code();
 c(123) ==> "248337"; 
 // Here we can see 'key' is private variable and that is not accessible from outside.

By Using Closure we can use setTimeout() or setInterval() inside a for loop.

for (var i = 1; i < 5; i++) {    
 setTimeout(() => console.log(i), 0)  // 5 5 5 5
 }

// Using Closure we can print  1 2 3 4...
 for (var i = 1; i < 5; i++) {        
   (function(i) {   
      setTimeout(() => console.log(i), 0)   // output is 1 2 3 4
   })(i);
 }

Closure is used to defining click handlers and writing callbacks.

What is disadvantage of using closures?

Disadvantage of using closure is memory leak. how?
Because each version of a closure keeps a copy of that original environment, that environment isn’t removed from the call-stack until all of the closures using it have been garbage collected. So, for example, if you had 100 different functions referencing that original variable, and 99 of them get garbage collected, that variable still exists until the 100th function gets collected. This uses up local memory and eventually can lead to memory leaks.

read more here.. https://hackernoon.com/picklejs-closures-in-javascript-1cd35576f060

How we use GET POST with basic JavaScript?

GET REQUEST WITH JAVASCRIPT AJAX

var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
     console.log(this.responseText);
     }
   };
   xhttp.open("GET", "url", true);
   xhttp.send();

POST REQUEST WITH JAVASCRIPT AJAX

var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
       console.log(this.responseText);
     }
   };
   xhttp.open("POST", "url", true);
   xhttp.send();

What is JavaScript Operator Precedence Associativity?

Associativity means direction either right to left or left to right in which an expression is evaluated. Which operator should be evaluated first in an expression that is defined by Operator associativity .

5 - 5 * 2 = -5 // * has higher precedence than -

Some of Operator Precedence and associativity -->

()    Left to right
++    Right to left
--    Right to left
/     Left to right   
*     Left to right   
%     Left to right
+     Left to right   
-     Left to right

What is difference between Object.freeze vs Object.seal?

By Object.freeze() – we can not add new properties to the object, neither can remove any property nor update any property.

var obj = {a: 1, b: 2, c: {d: 321}};

Object.freeze(obj);
Object.isFrozen(obj) ==> true
obj.a = 43; // it will not make any changes.
obj.r = 21; // it will not add it.
delete obj.a; ==> false // will not remove it.
obj.c.d = 54321; // it will update existing object. Object.freeze does not freeze nested object.

By Object.seal() – we can not add new properties to the object, can not remove any property but can update any property.

var obj = {a: 1, b: 2, c: {d: 321}};
Object.seal(obj);
Object.isSealed(obj) ==> true
obj.a = 43; // it will update prop a.
obj.r = 21; // it will not add it.
delete obj.a; ==> false // will not remove it.

What is Object.assign?

To copy values of all enumerable own properties from one objects to target object, we use Object.assign().

const obj = {a: 1, b: 2};
const target = {};
Object.assign(target, obj);
console.log(target) ==>  {a: 1, b: 2}

Object.assign() has a fallback that is when we have nested object then it only copy references of that one, means if we change nested object prop’s value it will reflect to target object as well.

const obj = {a: 4, b: 6, c: {e: 3}};
const target = Object.assign({}, obj);
console.log(target);
obj.c.e = 56; // when update it, it reflect to target obj as well.

What is difference between Object.create() and the new operator?

Object.create() and new operator both are used to create object of a class.

function Employee() {
     this.empName = 'JS Mount';
 }
var emp1 = new Employee();
var emp2 = Object.create(Employee.prototype); // We pass prototype as an argument in Object.create method.
emp1.empName ==> JS Mount
emp2.empName ==> undefined  // surprise…

Output of emp2.empName is undefined. new operator actually runs constructor code whereas object.create will not execute constructor code.

What will happen if we create object without new keyword?

When we create an object with new keyword – this represent to that particular function but when creating without new keyword, this represent to window scope.

function Employee() {
     console.log(this);
 }
var emp = new Employee(); ==> Employee {}
var emp1 = Employee(); ==> Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

What is Object Shallow Copy and Deep Copy?

An object is said to be shallow copied when properties are shared without any references and if there exists a source whose value is an object, that is copied as a reference. Object.assign() create shallow copy.

Deep copy created when copied object does not share anything with it’s original object.We can create deep copy by
JSON.parse(JSON.stringify(object));

What is JavaScript WRITABLE , ENUMERABLE & CONFIGURABLE?

var newObject = {};
Object.defineProperty( newObject, 'phoneNumber', {
    value: "9999999",
    writable: true,
    enumerable: true,
    configurable: true
 });

writable: I can modify their values.
enumerable: I can access to all of them using a for..in loop.
configurable: Default value is false. We can modify the behavior of the property, so can make them non-enumerable, non-writable or even non-configurable. Configurable properties are the only one that can be removed using the delete operator.

How can we know that a request is available on server?

To check request is available or not on server – we use HEAD method. HEAD method is same like GET method without response body. HEAD requests are useful for checking what a GET request will return before actually making a GET request — like before downloading a large file or response body.

What is difference between Put vs Patch Request?

PUT requests are used to send data to server to create or update a resource. Calling same POST request multiple times produce multiple results while calling same PUT request multiple times creates same result each time that’s why we call PUT Request are idempotent.

PATCH requests are same as PUT but it is used for only partial modifications to the resource. PUT request requires complete request body while PATCH request required only that particular entity in request body.

read here for more details… https://assertible.com/blog/7-http-methods-every-web-developer-should-know-and-how-to-test-them

What is Option Method in HTTP Request?

OPTION method returns all supported methods list for requested URL.

What is difference between Rest API vs SOAP API?

REST API is an architectural style and it does not have any official standard while SOAP API has an official standard because it is a protocol.
REST APIs uses multiple standards like HTTP, JSON, URL, and XML while SOAP APIs is largely based on HTTP and XML.
SOAP APIs uses XML that’s why result size is larger then REST API.
REST apis are more convenient with JavaScript and easy to implement. SOAP apis also works with JavaScript but don’t support for larger implementation.

JavaScript – What is a Promise? How we achieve it?

Promises are used to handle HTTP Requests. A Promise is an object that produce a single value. We can be sure that there won’t be multiple responses to the same request.

A Promise has 3 stages: fulfilled, rejected, or pending.
Fulfilled: onFulfilled() will be called (resolve() was called)
Rejected: onRejected() will be called (reject() was called)
Pending: not yet fulfilled or rejected.

Promise is called a Eager because Promise Constructor immediately calls function passed to it.

const promise = new Promise(() => {
     console.log('called!');
 });

read here to understand complete about promises….
https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

Explain keyword Void in JavaScript?

We have seen void operator many times with a valid expression like ‘void ‘ & the purpose of void is to return ‘undefined’.

void 0, void ‘abcd’, void {}, void myfunction() ==> all ==> all returns undefined.

Interesting fact is why there is a special keyword to return just undefined. So Answer is, before ES5 We can create variable named like undefined.
e.g > undefined = ‘jsmount’; So using void was a way to ensure that we are actually returning undefined.

What is Function Constructor?

If someone asked to you how can you create a function dynamically in JavaScript. The Answer is using Function Constructor.
The function statement is not the only way to define a new function; we can define a function dynamically using Function() constructor along with the new operator.

const emp = new Function('name', 'number', 'return name + " and " + number;');

 emp('jsmount', '9879')
 ==> "jsmount and 9879"

What is the use of Tilde (~) operator?

Tilde operator is also called Bitwise NOT operator.

~N evalates as => -(N + 1). This expression evaluates to “0” only when N == -1.

var str = "This is JavaScript";
if(str.indexOf('JavaScript') > -1) {
     console.log('JS Mount');
}

// This can also be written with short form using tilde operator. 

if(~str.indexOf('JavaScript')) {
     console.log('JS Mount');
}