The simplest way to create an empty object is using Object constructor. Currently this approach is not recommended.
Object’s create method:
The create method of Object creates a new object by passing the prototype object as a parameter
Object literal syntax:
The object literal syntax is equivalent to create method when it passes null as parameter
Create any function and apply the new operator to create object instances,
Function constructor with prototype:
This is similar to function constructor but it uses prototype for their properties and methods,
This is equivalent to an instance created with an object create method with a function prototype and then call that function with an instance and parameters as arguments.
ES6 Class syntax
ES6 introduces class feature to create the objects
A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don’t accidentally create multiple instances.
What is prototype chain?
Prototype chaining is used to build new types of objects based on existing ones. It is similar to inheritance in a class based language. The prototype on object instance is available through Object.getPrototypeOf(object) or proto property whereas prototype on constructors function is available through object.prototype.
What is the difference between Call, Apply and Bind?
The difference between Call, Apply and Bind can be explained with below examples:
Call: The call() method invokes a function with a given this value and arguments provided one by one
Apply: Invokes the function and allows you to pass in arguments as an array
bind: returns a new function, allowing you to pass in an array and any number of arguments
Call and apply are pretty interchangeable. Both execute the current function immediately. You need to decide whether it’s easier to send in an array or a comma separated list of arguments. You can remember by treating Call is for comma (separated list) and Apply is for Array. Whereas Bind creates a new function that will have this set to the first parameter passed to bind().
What is JSON and its common operations?
Stringification: **converting a native object to a string so it can be transmitted across the network
What is the purpose of array slice method?
The slice() method returns the selected elements in an array as a new array object. It selects the elements starting at the given start argument, and ends at the given optional end argument without including the last element. If you omit the second argument then it selects till the end. Some of the examples of this method are,
Note: Slice method won’t mutate the original array but it returns the subset as new array.
What is the purpose of isFinite function?
The isFinite() function is used to determine whether a number is a finite, legal number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true.
What is an event flow?
Event flow is the order in which event is received on the web page. When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event each of its parent elements first, starting at the top with the global window object. There are two ways of event flow
- Top to Bottom(Event Capturing)
- Bottom to Top (Event Bubbling)
What is event bubbling?
Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element.
What is event capturing?
Event bubbling is a type of event propagation where the event is first captured by the outermost element and , and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the inner DOM element.
How do you find operating system details?
The window.navigator object contains information about the visitor’s browser os details. Some of the OS properties are avaialble under platform property,
What is the difference between document load and DOMContentLoaded events?
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images)
What is the difference between native, host and user objects?
- Chrome Devtools
- debugger statement
- Good old console.log statement
What are the pros and cons of promises over callbacks?
Below are the list of pros and cons of promises over callbacks
- It avoids callback hell which is unreadable
- Easy to write sequential asynchronous code with .then()
- Easy to write parallel asynchronous code with Promise.all()
- Solves some of the common problems of callbacks(call the callback too late, too early, many times and swallow errors/exceptions)
- It makes little complex code
- You need to load a polyfill if ES6 is not supported
What is the purpose of array splice method?
The splice() method is used either adds/removes items to/from an array, and then returns the removed item. The first argument specifies the array position for insertion or deletion whereas the option second argument indicates the number of elements to be deleted. Each additional argument is added to the array. Some of the examples of this method are,
Note: Splice method modifies the original array and returns the deleted array.
How do you compare Object and Map?
Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Due to this reason, Objects have been used as Maps historically. But there are important differences that make using a Map preferable in certain cases.
- The keys of an Object are Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and any primitive.
- The keys in Map are ordered while keys added to object are not. Thus, when iterating over it, a Map object returns keys in order of insertion.
- You can get the size of a Map easily with the size property, while the number of properties in an Object must be determined manually.
- A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.
- An Object has a prototype, so there are default keys in the map that could collide with your keys if you’re not careful. As of ES5 this can be bypassed by using map = Object.create(null), but this is seldom done.
- A Map may perform better in scenarios involving frequent addition and removal of key pairs.
What are lambda or arrow functions?
An arrow function is a shorter syntax for a function expression and does not have its own this, arguments, super, or new.target. These function are best suited for non-method functions, and they cannot be used as constructors.
What is a first class function?
What is a first order function?
First-order function is a function that doesn’t accept other function as an argument and doesn’t return a function as its return value.
What is a higher order function?
Higher-order function is a function that accepts other function as an argument or returns a function as a return value.
What is a unary function?
Unary function (i.e. monadic) is a function that accepts exactly one argument. Let us take an example of unary function. It stands for single argument accepted by a function.
What is currying function?
Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument. Currying is named after a mathematician Haskell Curry. By applying currying, a n-ary function turns it into a unary function. Let’s take an example of n-ary function and how it turns into a currying function
What is a callback hell?
Callback Hell is an anti-pattern with multiple nested callbacks which makes code hard to read and debug when dealing with asynchronous logic. The callback hell looks like below,
What are server-sent events?
Server-sent events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP connection without resorting to polling. These are a one way communications channel – events flow from server to client only. This is been used in Facebook/Twitter updates, stock price updates, news feeds etc.
How do you receive server-sent event notifications?
The EventSource object is used to receive server-sent event notifications. For example, you can receive messages from server as below,
How do you check browser support for server-sent events?
You can perform browser support for server-sent events before using it as below,