Advanced JavaScript Questions

Hello Friend,

I am sharing few questions which are most important in JavaScript. These are advanced concepts in JavaScript. You can refer my previous posts to go through them thoroughly.

1. Hoisting concept
2. OOPs in JavaScript
1. Prototypal and classical model
2. Inheritance
3. Polymorphism
4. Encapsulation (modeling)
3. Closure
4. What is prototype
5. What is __proto__
6. What is new in JavaScript
7. What is bubbling
8. Will the methods added later in prototype available in the object which is created earlier
9. What is constructor in function prototype
10. Scoping in JavaScript (function level vs block level)
11. What is this
12. How function work as constructor
13. In how many ways we can declare functions
14. Can you create a function which will add n numbers (n is not fixed)
15. Number of way we can call the functions in JavaScript
16. What is JSONP
17. What is CORS
18. Does inner function get access to the outer function "this"? If not how we can use "this" object inside inner function
19. Why we use JQuery reference from CDN
20. Is JavaScript multi-threaded or single threaded?
21. How setTimeOut works in JavaScript? What is setInterval?
22. What is Event Loop in JavaScript?
23. How to create clone of a object?
24. How to compare 2 objects are same or not?
25. How to Swap 2 elements of an array by using Array functions available in JavaScript
26. What is the difference between document.ready and window.load?
27. How to check if one variable is of type Array?
28. How can you empty an array in JavaScript? What will happen if you use arr.length = 0 ?
29. Explain complete rendering of a page. Suppose you hit www.google.com, explain all the process step by step.
30. How to remove one property from an Object in JavaScript
31. What is instanceof operator in JavaScript?
32. What are Function, Method, and Constructor in JavaScript? How to implements these in JavaScript?
33. What is self invoking function in JavaScript and what is the use of it?
34. What are the design pattern in JavaScript?
35. What is singleton pattern? How we can achieve singleton pattern in JavaScript?
36. In how many way you can create object in JavaScript?
37. What is Publisher Subscriber architecture in JavaScript? How we can implement this?
38. How to flatten an object in JavaScript?
39. How to un-flatten object in JavaScript?
40. How to prevent object modification in JavaScript? What is the difference between seal and freeze
41. What is strict mode ("use strict") in JavaScript?
42. Write a function to merge 2 objects dynamically in JavaScript.

Answers for all the above questions will be posted soon...

Closures in JavaScript

Closure in JavaScript are most confusing term, but actually it is most powerful concept of JavaScript. Closure occurs in JavaScript because of functional level scoping. Function inside function can use members of outer function (parent function).

I would like to write 2 most important

1. The context of an inner function includes the scope of the outer function.
2. An inner function enjoy that context even after the parent functions have returned.

Let’s discuss one problem scenario, suppose we have one button on the page and now we need how many times button is clicked, we need the count. One simple way of implementation is: use one global variable and increment that variable on button click. This is easy but Global variables are not good to use, because same variable name might be present in the application. It is never recommended to use global variable in JavaScript. One good solution to this is to use functional level scoping of JavaScript and create Closure. Closure in JavaScript are caused due to function level scoping.

Below is one example of closure which is used to get one incremented number every time.

    var getCount = (function () {
        var counter = 0; // parent function variable which is accessible in child function
        return function () {
            return ++counter;
        };
    })(); // self executing function 

The output of this function when called will be as shown below:

Private functions and variables in JavaScript..!

Private function or properties we know very well in programming language like Java, C#. Is it possible to achieve this in JavaScript? Yes..!

If you want to know more about Object oriented concepts in JavaScript then please first go through this post: OOPs in JS

In JavaScript Functions are so powerful to build OOPs and modular concepts. Following concepts are implemented using Function only in JavaScript:

1. Method
2. Class
3. Constructor
4. Module

Below code shows the code which create class MyClass and it has private members:

    function MyClass(a) {
        var count = 3; // private member

        // this check function is private function
        function check() {
            if (count > 0) {
                count--;
                return true;                
            }
            else {
                return false;
            }
        }
        this._a = a;
        this.get = function () {
            if (check()) { // use of private function
                return this._a;
            }
            else {
                return "Thullu"; // after invoking get method 3 times in the object this else will be executed
            }
        }
    }

In the above code variable, count is private as any object created from MyClass will not have this variable similarly function check() is private function as this function is not part of this in the MyClass. When we create an object of MyClass using new keyword this is returned. This concept is possible in JavaScript because of lexical scoping (functional scoping).

When we create object of this class MyClass, and call the get method more than 3 times:

I would like to write few points regarding new keyword.

1. When a function is called with the new operator, a new object is created with prototype members and assigned to this.
2. Above statement is true only if there is no explicit return value in the function. If explicit return is present in Class (function), then same return will be assigned to the object.

I would like to give here one more example with very basic functionality like in all OOP languages we have. We declare private field and then use public properties to expose the private field, in more formal and OOPs way we create Get and Set method to update private field or retrieve private member of class.

Same get and set functionality for private variables in JavaScript we can achieve as shown in below example:

 // private class with get and set methods
    function MyClass() {
        var _privateField = 0; // It is private field as it is not part of "this"
        this.GetPrivateField = function () {
            return _privateField;
        };
        this.SetPrivateField = function (value) {
            _privateField = value;
        };
    }

Following is the console output using above MyClass object: