26. ### What are classes in ES6?
In ES6, Javascript classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance.
For example, the prototype based inheritance written in function expression as below,
```javascript
function Bike(model,color) {
this.model = model;
this.color = color;
}
Bike.prototype.getDetails = function() {
return this.model + ' bike has' + this.color + ' color';
};
```
Whereas ES6 classes can be defined as an alternative
```javascript
class Bike{
constructor(color, model) {
this.color= color;
this.model= model;
}
getDetails() {
return this.model + ' bike has' + this.color + ' color';
}
}
```
27. ### What are closures?
A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains
1. Own scope where variables defined between its curly brackets
2. Outer function’s variables
3. Global variables
Let's take an example of closure concept,
```javascript
function Welcome(name){
var greetingInfo = function(message){
console.log(message+' '+name);
}
return greetingInfo;
}
var myFunction = Welcome('John');
myFunction('Welcome '); //Output: Welcome John
myFunction('Hello Mr.'); //output: Hello Mr.John
```
As per the above code, the inner function(greetingInfo) has access to the variables in the outer function scope(Welcome) even after outer function has returned.
28. ### What are modules?
Modules refers small units of independent, reusable code and also act as foundation of many JavaScript design patterns. Most of the JavaScript modules export an object literal, a function, or a constructor
29. ### Why do you need modules?
Below are the list of benefits using modules in javascript ecosystem
1. Maintainablity
2. Reusability
3. Namespacing
30. ### What is scope in javascript?
Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
31. ### What is a service worker?
A Service worker is basically a script (JavaScript file) that runs in background, separate from a web page and provide features that don't need a web page or user interaction. Some of the major features of service workers are Rich offline experiences(offline first web application development), periodic background syncs, push notifications, intercept and handle network requests and programmatically managing a cache of responses.
32. ### How do you manipulate DOM using service worker?
Service worker can't access the DOM directly. But it can communicate with the pages it controls by responding to messages sent via the `postMessage` interface, and those pages can manipulate the DOM.
33. ### How do you reuse information across service worker restarts?
The problem with service worker is that it get terminated when not in use, and restarted when it's next needed, so you cannot rely on global state within a service worker's `onfetch` and `onmessage` handlers. In this case, service workers will have access to IndexedDB API in order to persist and reuse across restarts.
34. ### What is IndexedDB?
IndexedDB is a low-level API for client-side storage of larger amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data.
35. ### What is web storage?
Web storage is an API that provides a mechanism by which browsers can store key/value pairs locally within the user's browser, in a much more intuitive fashion than using cookies. The web storage provides two mechanisms for storing data on the client.
1. **Local storage:** It stores data for current origin with no expiration date.
2. **Session storage:** It stores data for one session and the data is lost when the browser tab is closed.
36. ### What is a post message?
Post message is a method that enables cross-origin communication between Window objects.(i.e, between a page and a pop-up that it spawned, or between a page and an iframe embedded within it). Generally, scripts on different pages are allowed to access each other if and only if the pages follow same-origin policy(i.e, pages share the same protocol, port number, and host).
37. ### What is a Cookie?
A cookie is a piece of data that is stored on your computer to be accessed by your browser. Cookies are saved as key/value pairs.
For example, you can create a cookie named username as below,
```javascript
document.cookie = "username=John";
```
38. ### Why do you need a Cookie?
Cookies are used to remember information about the user profile(such as username). It basically involves two steps,
1. When a user visits a web page, user profile can be stored in a cookie.
2. Next time the user visits the page, the cookie remembers user profile.
39. ### What are the options in a cookie?
There are few below options available for a cookie,
1. By default, the cookie is deleted when the browser is closed but you can change this behavior by setting expiry date (in UTC time).
```javascript
document.cookie = "username=John expires=Sat, 8 Jun 2019 12:00:00 UTC";
```
2. By default, the cookie belongs to a current page. But you can tell the browser what path the cookie belongs to using a path parameter.
```javascript
document.cookie = "username=John path=/services";
```
40. ### How do you delete a cookie?
You can delete a cookie by setting the expiry date as a passed date. You don't need to specify a cookie value in this case.
For example, you can delete a username cookie in the current page as below.
```javascript
document.cookie = "username=; expires=Fri, 07 Jun 2019 00:00:00 UTC; path=/;";
```
**Note:** You should define the cookie path option to ensure that you delete the right cookie. Some browsers doesn't allow to delete a cookie unless you specify a path parameter.
41. ### What are the differences between cookie, local storage and session storage?
Below are some of the differences between cookie, local storage and session storage,
| Feature | Cookie | Local storage | Session storage |
|---- | --------- | ----- | ----- |
| Accessed on client or server side | Both server-side & client-side | client-side only | client-side only |
| Lifetime | As configured using Expires option | until deleted | until tab is closed |
| SSL support | Supported | Not supported | Not supported |
| Maximum data size | 4KB | 5 MB | 5MB |
42. ### What is the main difference between localStorage and sessionStorage?
LocalStorage is same as SessionStorage but it persists the data even when the browser is closed and reopened(i.e it has no expiration time) whereas in sessionStorage data gets cleared when the page session ends.
43. ### How do you access web storage?
The Window object implements the `WindowLocalStorage` and `WindowSessionStorage` objects which has `localStorage`(window.localStorage) and `sessionStorage`(window.sessionStorage) properties respectively. These properties create an instance of the Storage object, through which data items can be set, retrieved and removed for a specific domain and storage type (session or local).
For example, you can read and write on local storage objects as below
```javascript
localStorage.setItem('logo', document.getElementById('logo').value);
localStorage.getItem('logo');
```
44. ### What are the methods available on session storage?
The session storage provided methods for reading, writing and clearing the session data
```javascript
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
```
45. ### What is a storage event and its event handler?
The StorageEvent is an event that fires when a storage area has been changed in the context of another document. Whereas onstorage property is an EventHandler for processing storage events.
The syntax would be as below
```javascript
window.onstorage = functionRef;
```
Let's take the example usage of onstorage event handler which logs the storage key and it's values
```javascript
window.onstorage = function(e) {
console.log('The ' + e.key +
' key has been changed from ' + e.oldValue +
' to ' + e.newValue + '.');
};
```
46. ### Why do you need web storage?
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Also, the information is never transferred to the server. Hence this is recommended approach than Cookies.
47. ### How do you check web storage browser support?
You need to check browser support for localStorage and sessionStorage before using web storage,
```javascript
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
```
48. ### How do you check web workers browser support?
You need to check browser support for web workers before using it
```javascript
if (typeof(Worker) !== "undefined") {
// code for Web worker support.
} else {
// Sorry! No Web Worker support..
}
```
49. ### Give an example of web worker?
You need to follow below steps to start using web workers for counting example
1. Create a Web Worker File: You need to write a script to increment the count value. Let's name it as counter.js
```javascript
let i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
```
Here postMessage() method is used to post a message back to the HTML page
2. Create a Web Worker Object: You can create a web worker object by checking for browser support. Let's name this file as web_worker_example.js
```javascript
if (typeof(w) == "undefined") {
w = new Worker("counter.js");
}
```
and we can receive messages from web worker
```javascript
w.onmessage = function(event){
document.getElementById("message").innerHTML = event.data;
};
```
3. Terminate a Web Worker:
Web workers will continue to listen for messages (even after the external script is finished) until it is terminated. You can use terminate() method to terminate listening the messages.
```javascript
w.terminate();
```
4. Reuse the Web Worker: If you set the worker variable to undefined you can reuse the code
```javascript
w = undefined;
```
50. ### What are the restrictions of web workers on DOM?
WebWorkers don't have access to below javascript objects since they are defined in an external files
1. Window object
2. Document object
3. Parent object
51. ### What is a promise?
A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it’s not resolved(for example, network error). It will be in one of the 3 possible states: fulfilled, rejected, or pending.
The syntax of promise would be as below
```javascript
const promise = new Promise(function(resolve, reject) {
// promise description
})
```
52. ### Why do you need a promise?
Promises are used to handle asynchronous operations. They provide an alternative approach for callbacks by reducing the callback hell and writing the cleaner code.
53. ### What are the three states of promise?
Promises have three states:
1. **Pending:** This is an initial state of the Promise before an operation begins
2. **Fulfilled:** This state indicates that specified operation was completed.
3. **Rejected:** This state indicates that the operation did not complete. In this case an error value will be thrown.
54. ### What is a callback function?
A callback function is a function passed into another function as an argument. This function is invoked inside the outer function to complete an action.
Let's take a simple example of how to use callback function
```javascript
function callbackFunction(name) {
console.log('Hello ' + name);
}
function outerFunction(callback) {
let name = prompt('Please enter your name.');
callback(name);
}
outerFunction(callbackFunction);
```
55. ### Why do we need callbacks?
The callbacks are needed because javascript is a event driven language. That means instead of waiting for a response javascript will keep executing while listening for other events.
Let's take an example with first function invoking an API call(simulated by setTimeout) and next function which logs the message.
```javascript
function firstFunction(){
// Simulate a code delay
setTimeout( function(){
console.log('First function called');
}, 1000 );
}
function secondFunction(){
console.log('Second function called');
}
firstFunction();
secondFunction();
Output
// Second function called
// First function called
```
As observed from the output, javascript didn't wait for the response of first function and remaining code block get executed. So callbacks used in a way to make sure that certain code doesn’t execute until other code finished execution.
56. ### 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,
```javascript
async1(function(){
async2(function(){
async3(function(){
async4(function(){
....
});
});
});
});
```
57. ### What is 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.
58. ### 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,
```javascript
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("sse_generator.js");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
};
}
```
59. ### How do you check browser support for server-sent events?
You can perform browser support for server-sent events before using it as below,
```javascript
if(typeof(EventSource) !== "undefined") {
// Server-sent events supported. Let's have some code here!
} else {
// No server-sent events supported
}
```
60. ### What are the events available for server sent events?
Below are the list of events available for server sent events
| Event | Description |
|---- | ---------
| onopen | It is used when a connection to the server is opened |
| onmessage | This event is used when a message is received |
| onerror | It happens when an error occurs|
Comments
Post a Comment
please do not enter any spam link in the comment box