HCL Angular

1. Closure?
2. What is the benefit of closure?

  The first benefit of ClosureClosure is to preserve local variables within the scope. Since javaScript is a first-class function, developers often encounter name clashing, that will cause some unexpected output. Using ClosureClosure can help preserve the namespace in that scope, private variable. You can see this a lot in the past of jQuery code, where one defines a click method.

$(function() {
  var selections = []
  $(".something").click(function() { // this closure has access to the outer variable selections
    selections.push("something") // this are able to get the outer function selections
  })
})
While this is indeed one of the use-cases of ClosureClosure, it might leave you thinking, “Is this really what the real purpose of closure?” You might still question the statement as to what is the general use case of ClosureClosure might be.

The second benefit, which is more of a general use case, is that it is useful in an asynchronous environment.

Imagine if you need to loop through a value in an array:

for(var i = 0 ; i< 3; i++) {
  setTimeout(() => console.log(i), 3000)
}

What will the output of this program?

It prints 3 three times. Since, setTimeout is asynchronous, by the time the loop finishes, the outer scope i has also changed to 3, and the subsequent call to setTimeout during the loop triggers the callback and print 3.

How would you solve this problem?

There are many ways, including using an ES6 syntax let instead of var to define its scope at the block level and solve the issue. However, if they want you to solve this issue without using any ES6 feature, ClosureClosure is your answer.

function printSomething(i) {
  setTimeout(() => console.log(i), 3000)
}

for(var i = 0; i<3; i++) {
  printSomething(i)
}
By just creating another outer function outside of setTimeout, you are defining a closure. The i value is preserved even after printSomething is terminated. The callback then prints 0 1 2 to the console.

That is the reason why ClosureClosure is powerful javaScript feature. You can use ClosureClosure to preserve the scope of the outer variable in an asynchronous environment.

Another Example One
Let’s imagine another example where you need to create a function that needs to call 3rd party API and aggregate the result and return it to the caller.

function getAPI(cb) {
    setTimeout(() => cb("a"), 3000)
}

function getAPIB(cb) {
    setTimeout(() => cb("b"), 2000)
}

function getAPIC(cb) {
    setTimeout(() => cb("c"), 1000)
}

function aggregateValue() {
  var aggregateData = []
  
  // your implementation here
}
Before you continue reading, about the solution, pause for a second and think about how you can solve this without promises, async/await.

We can leverage the power of ClosureClosure to preserve the scope of the function and to stop aggregateValue to return early by using callbacks.

Since getAPI, getAPIB, getAPIC all uses a callback function, you can create a callback function that increments the number of count of API called so far. Once the number of API called so far counter exceed 2, call the return callback value.

function aggregateValue(cb) {
  var aggregateData = []
  var numberAPICalledSoFar = 0
  
  function callback(value) {
    aggregateData = [...aggregateData, value]
    if(numberAPICalledSoFar < 2) {
      numberAPICalledSoFar++;
    }else {
      cb(aggregateData)
    }
  }
  getAPI(callback)
  getAPIB(callback)
  getAPIC(callback)
}
The above code leverages, again, the power of ClosureClosure, to preserve the local variable of the enclosing function when it is triggered. As getAPI finishes its called and evoke the callback function, the callback function access the outer scope aggregateValue to increment the number of counts that the API finishes executing. The aggregateData then return with a callback from the outer aggregateValue function that needs all the aggregate data from all the 3rd party API.

Run this function:

aggregateValue((ans) => ans.foreach(console.log))

3. this keyword based scenario?
4. Generator?
5. Generator is synchronous  or asynchronous?
And: Generator is synchronous, We can make it asynchronous using Promise or co library.

6 How to convert asynchronous generator to synchronous generator
Ans using yield.
7. If you have multiple objects and you want to right a function that is accesbile to all objects?
Ans
var a = {}; or a = new Object();
Object.prototype.print=(){
console.log('Hello World');
}

8. If we change something in prototype function will it change in all objects?

9. What are different type of decorator in angular?
Ans : There are four type of decorator in angular 
1. class Decorator ( @Component())
2. Function Decorator (@HostListener())
3. Property Decorator (@Input()..)
4. Constructor Decorator (@Inject())

10.What is @function (function decorator)?
Ans example is HostListener

11.If you have home page and in the home page multiple tab then how will you maintain the tab to displayed according to the role in angular way?
12. How will you manage state in redux?
13. Write a code , we receive user list from api. And need to display the list?
14. How the components communicate?
15. What is benefit of SPA?
16.

What will be return

return
0;

17. How will you implement inheritance in javascript?
Ans using prototype?
18. What is eval in javascript?
Ans : https://interview-preparation-for-you.blogspot.com/2011/04/eval-in-javascript.html

19. And why it is bad practice to use eval ?
Ans :  

1. It requires a compile and is therefore slow
2. Improper use of eval opens up your code for injection attacks

20. What will be print

var x=8;
var x = function  ()
{
console.log("fgf");
}


console.log(x);

Ans : 8;

21. What will be print

var x=8;
function x ()
{
console.log("fgf");
}


console.log(x);

Ans : 8;

22. What will be print

var x=8;
function x ()
{
console.log("fgf");
}


console.log(x());

Ans: Error 

Uncaught TypeError: x is not a function