The following recursive code will cause a stack overflow if the array list is too large. How can you fix this and still retain the recursive pattern?
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
nextListItem();
}
};
The potential stack overflow can be avoided by modifying the nextListItem function as follows:
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
setTimeout( nextListItem, 0);
}
};
The stack overflow is eliminated because the event loop handles the recursion, not the call stack. When nextListItem runs, if item is not null, the timeout function (nextListItem) is pushed to the event queue and the function exits, thereby leaving the call stack clear. When the event queue runs its timed-out event, the next item is processed and a timer is set to again invoke nextListItem. Accordingly, the method is processed from start to finish without a direct recursive call, so the call stack remains clear, regardless of the number of iterations.
What is a “closure” in JavaScript? Provide an example.
A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables.
Here is an example:
var globalVar = "xyz";
(function outerFunc(outerArg) {
var outerVar = 'a';
(function innerFunc(innerArg) {
var innerVar = 'b';
console.log(
"outerArg = " + outerArg + "\n" +
"innerArg = " + innerArg + "\n" +
"outerVar = " + outerVar + "\n" +
"innerVar = " + innerVar + "\n" +
"globalVar = " + globalVar);
})(456);
})(123);
In the above example, variables from innerFunc, outerFunc, and the global namespace are all in scope in the innerFunc. The above code will therefore produce the following output:
outerArg = 123
innerArg = 456
outerVar = a
innerVar = b
globalVar = xyz
What will be the output of the following code:
for (var i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
}
Explain your answer. How could the use of closures help here?
The code sample shown will not display the values 0, 1, 2, 3, and 4 as might be expected; rather, it will display 5, 5, 5, 5, and 5.
The reason for this is that each function executed within the loop will be executed after the entire loop has completed and all will therefore reference the last value stored in i, which was 5.
Closures can be used to prevent this problem by creating a unique scope for each iteration, storing each unique value of the variable within its scope, as follows:
for (var i = 0; i < 5; i++) {
(function(x) {
setTimeout(function() { console.log(x); }, x * 1000 );
})(i);
}
This will produce the presumably desired result of logging 0, 1, 2, 3, and 4 to the console.
In an ES2015 context, you can simply use let instead of var in the original code:
for (let i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
What are the difference between AJAX and Javascript?
The differences between AJAX and JavaScript are as follows:
AJAX
Javascript
AJAX sends request to the server and does not wait for the response. It performs other operations on the page during that time JavaScript make a request to the server and waits for response
AJAX does not require the page to refresh for downloading the whole page JavaScript manages and controls a Web page after being downloaded
AJAX minimizes the overload on the server since the script needs to request once JavaScript posts a request that updates the script every time
What are the components of the ASP.NET AJAX architecture?
There are two components of AJAX Architecture:
AJAX client architecture
AJAX server architecture
What are the extender controls?
The extender controls uses a block of JavaScript code to add new and enhanced capabilities to ASP.NET.
What are the pre-requisites to execute AJAX applications on a server?
AJAX is a built-in functionality of .NET Framework 4.0 and AJAX application can be executed by just installing Microsoft Visual Studio 2010. To use extenders in your applications, you are required to install AJAX Control Toolkit and copy the AjaxControlToolkit.dll file to the Bin directory of your application.
Which request is better, Get or Post?
AJAX requests should use an HTTP GET request where the data does not change for a given URL requested.
An HTTP POST should be used when state is updated on the server. This is highly recommended for a consistent web application architecture.
What is the difference between typeof and instanceof operators in Javascript?
The typeof operator returns a string of what type the operand is. Whereas, the instanceof operator does not work with primitive data types; but works with objects and checks on what type the object is.
What is DOM?
DOM (Document Object Model) is an object-oriented representation of the HTML elements. All the elements (or nodes) are part of window.document.
Expand BOM and explain it.
BOM stands for Browser Object Model. Using BOM interaction with a browser is possible. Default object of the browser is a window.
What is the difference between window and document in Javascript?
Javascript window is a global object which holds variables, functions, history, location; the document also comes under the window and can be considered as the property of the window.
What is the difference between innerHTML and innerText?
innerHTML will process an HTML tag if found in a string, whereas innerText will not. For Example document.querySelector('p').innerHTML='one <br> two' gives the output one and two in two lines as <br> in html is a new line. Whereas document.querySelector('p').innerText='one <br> two' gives the output of the text as it is in one line.
What is the difference between textContent and innerText?
Let us have a paragraph element and a span element in it as a child element.
<p>some text and a <span style="visibility: hidden">span tag hidden <\span>in it</p>
Now, if the following two steps would result in the following-
console.log(document.querySelector('p').textContent); gives some text and a span tag hidden in it.
console.log(document.querySelector('p').innerText); gives some text and a in it.
What is the difference between HTMLCollection and NodeList?
The functions querySelectorAll() returns NodeList in which the forEach can be used directly to traverse the elements. Whereas, the getElementsByClassName() or getElementsByTagName() returns an HTMLCollection, which does not have a forEach by default.
How can an HTMLCollection be traversed?
The HTMLCollection by default does not have forEach, it needs to be converted into an array (eleName = Array.from(eleName)) and then the traversal is possible using forEach.
What is the difference between childNode and children?
A childNode, when used returns a NodeList. Whereas, children, when used; returns an HTMLCollection.
What is the difference between firstChild and firstElementChild?
A firstChild when used returns the first node. It could be an HTML element or even a space, or a new line. Whereas, firstElementChild, when used returns the first HTML element only.
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
nextListItem();
}
};
The potential stack overflow can be avoided by modifying the nextListItem function as follows:
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
setTimeout( nextListItem, 0);
}
};
The stack overflow is eliminated because the event loop handles the recursion, not the call stack. When nextListItem runs, if item is not null, the timeout function (nextListItem) is pushed to the event queue and the function exits, thereby leaving the call stack clear. When the event queue runs its timed-out event, the next item is processed and a timer is set to again invoke nextListItem. Accordingly, the method is processed from start to finish without a direct recursive call, so the call stack remains clear, regardless of the number of iterations.
 |
| Capgemini JavaScript Most Frequently Asked Latest Interview Questions Answers |
What is a “closure” in JavaScript? Provide an example.
A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables.
Here is an example:
var globalVar = "xyz";
(function outerFunc(outerArg) {
var outerVar = 'a';
(function innerFunc(innerArg) {
var innerVar = 'b';
console.log(
"outerArg = " + outerArg + "\n" +
"innerArg = " + innerArg + "\n" +
"outerVar = " + outerVar + "\n" +
"innerVar = " + innerVar + "\n" +
"globalVar = " + globalVar);
})(456);
})(123);
In the above example, variables from innerFunc, outerFunc, and the global namespace are all in scope in the innerFunc. The above code will therefore produce the following output:
outerArg = 123
innerArg = 456
outerVar = a
innerVar = b
globalVar = xyz
What will be the output of the following code:
for (var i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
}
Explain your answer. How could the use of closures help here?
The code sample shown will not display the values 0, 1, 2, 3, and 4 as might be expected; rather, it will display 5, 5, 5, 5, and 5.
The reason for this is that each function executed within the loop will be executed after the entire loop has completed and all will therefore reference the last value stored in i, which was 5.
Closures can be used to prevent this problem by creating a unique scope for each iteration, storing each unique value of the variable within its scope, as follows:
for (var i = 0; i < 5; i++) {
(function(x) {
setTimeout(function() { console.log(x); }, x * 1000 );
})(i);
}
This will produce the presumably desired result of logging 0, 1, 2, 3, and 4 to the console.
In an ES2015 context, you can simply use let instead of var in the original code:
for (let i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
What are the difference between AJAX and Javascript?
The differences between AJAX and JavaScript are as follows:
AJAX
Javascript
AJAX sends request to the server and does not wait for the response. It performs other operations on the page during that time JavaScript make a request to the server and waits for response
AJAX does not require the page to refresh for downloading the whole page JavaScript manages and controls a Web page after being downloaded
AJAX minimizes the overload on the server since the script needs to request once JavaScript posts a request that updates the script every time
What are the components of the ASP.NET AJAX architecture?
There are two components of AJAX Architecture:
AJAX client architecture
AJAX server architecture
What are the extender controls?
The extender controls uses a block of JavaScript code to add new and enhanced capabilities to ASP.NET.
What are the pre-requisites to execute AJAX applications on a server?
AJAX is a built-in functionality of .NET Framework 4.0 and AJAX application can be executed by just installing Microsoft Visual Studio 2010. To use extenders in your applications, you are required to install AJAX Control Toolkit and copy the AjaxControlToolkit.dll file to the Bin directory of your application.
Which request is better, Get or Post?
AJAX requests should use an HTTP GET request where the data does not change for a given URL requested.
An HTTP POST should be used when state is updated on the server. This is highly recommended for a consistent web application architecture.
What is the difference between typeof and instanceof operators in Javascript?
The typeof operator returns a string of what type the operand is. Whereas, the instanceof operator does not work with primitive data types; but works with objects and checks on what type the object is.
What is DOM?
DOM (Document Object Model) is an object-oriented representation of the HTML elements. All the elements (or nodes) are part of window.document.
Expand BOM and explain it.
BOM stands for Browser Object Model. Using BOM interaction with a browser is possible. Default object of the browser is a window.
What is the difference between window and document in Javascript?
Javascript window is a global object which holds variables, functions, history, location; the document also comes under the window and can be considered as the property of the window.
What is the difference between innerHTML and innerText?
innerHTML will process an HTML tag if found in a string, whereas innerText will not. For Example document.querySelector('p').innerHTML='one <br> two' gives the output one and two in two lines as <br> in html is a new line. Whereas document.querySelector('p').innerText='one <br> two' gives the output of the text as it is in one line.
What is the difference between textContent and innerText?
Let us have a paragraph element and a span element in it as a child element.
<p>some text and a <span style="visibility: hidden">span tag hidden <\span>in it</p>
Now, if the following two steps would result in the following-
console.log(document.querySelector('p').textContent); gives some text and a span tag hidden in it.
console.log(document.querySelector('p').innerText); gives some text and a in it.
What is the difference between HTMLCollection and NodeList?
The functions querySelectorAll() returns NodeList in which the forEach can be used directly to traverse the elements. Whereas, the getElementsByClassName() or getElementsByTagName() returns an HTMLCollection, which does not have a forEach by default.
How can an HTMLCollection be traversed?
The HTMLCollection by default does not have forEach, it needs to be converted into an array (eleName = Array.from(eleName)) and then the traversal is possible using forEach.
What is the difference between childNode and children?
A childNode, when used returns a NodeList. Whereas, children, when used; returns an HTMLCollection.
What is the difference between firstChild and firstElementChild?
A firstChild when used returns the first node. It could be an HTML element or even a space, or a new line. Whereas, firstElementChild, when used returns the first HTML element only.