Mastering JavaScript Interview Questions & Answers JS Mount

javascript interview questions, javascript interview questions for experienced, javascript interview questions jsmount, top javascript interview questions, advanced javascript interview questions

What is currying in JavaScript?

We can process a function by passing all arguments at once and can return the result. But When a function takes arguments one by one and each time it returns a function that takes a 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 returns a new function that takes the second one and returns a new function that 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 the same variable again and again.
We can create higher-order functions by Using Currying.

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

What are the 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);
 }

The closure is used to define click handlers and writing callbacks.

What is the 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 do 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 the difference between Object.freeze vs Object.seal?

By Object.freeze() – we can not add new properties to the object, nor can remove any property or 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 object to the 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 a nested object then it only copies references of that one, which means if we change the nested object prop’s value it will reflect to the 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 the difference between Object.create() and the new operator?

Object.create() and new operator both are used to create an 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…

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

What will happen if we create an object without a new keyword?

When we create an object with a new keyword – this represents that particular function but when creating without a new keyword, this represents 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 a shallow copy.

Deep copy created when the copied object does not share anything with its original object. We can create a 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 the 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 ones that can be removed using the delete operator.

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

To check request is available or not on the server – we use HEAD method. HEAD method is the same as GET method without a 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 the difference between Put vs Patch Request?

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

PATCH requests are the same as PUT but it is used for only partial modifications to the resource. A PUT request requires a complete request body while a PATCH request required only that particular entity in the 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 the Option Method in HTTP Request?

OPTION method returns all supported methods listed for the requested URL.

What is the 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 use multiple standards like HTTP, JSON, URL, and XML while SOAP APIs are largely based on HTTP and XML.
SOAP APIs use XML that’s why the result size is larger than the REST API.
REST APIs are more convenient with JavaScript and easy to implement. SOAP APIs also work with JavaScript but don’t support larger implementations.

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

Promises are used to handle HTTP Requests. A Promise is an object that produces 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.

A promise is called an Eager because Promise Constructor immediately calls the function passed to it.

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

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

Explain Keyword Void in JavaScript.

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

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

An interesting fact is why there is a special keyword to return just undefined. So the answer is, before ES5 We can create a variable named 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 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 the Tilde (~) operator?

The Tilde operator is also called a 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');
}

JavaScript Advance Interview Questions & Answers
javascript interview questions, javascript interview questions for experienced, javascript interview questions jsmount, top javascript interview questions, advanced javascript interview questions

JS Mount

Learn More

Mastering JavaScript Interview Questions & Answers