window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-63172957-1');
Sound
Awwwards
</html>
Created by potrace 1.16, written by Peter Selinger 2001-2019
Back to blog
JavaScript

Javascript Interview Questions & Answers (Part 4)

Article index:

What is Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Remember that JavaScript only hoists declarations, not initialisation. Let’s take a simple example of variable hoisting,

console.log(message); //output : undefined
var message = ’The variable Has been hoisted’;

The above code looks like as below to the interpreter,

var message;
console.log(message);
message = ’The variable Has been hoisted’;

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,

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

class Bike{
  constructor(color, model) {
    this.color= color;
    this.model= model;
  }
}

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

  • Own scope where variables defined between its curly brackets
  • Outer function’s variables
  • Global variables Let’s take an example of closure concept,
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.

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

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.

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.

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.

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.

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.

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.

Local storage: It stores data for current origin with no expiration date.
Session storage: It stores data for one session and the data is lost when the browser tab is closed.

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).

What is promise chaining?

The process of executing a sequence of asynchronous tasks one after another using promises is known as Promise chaining. Let’s take an example of promise chaining for calculating the final result,


new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000);

}).then(function(result) {

  console.log(result); // 1
  return result * 2;

}).then(function(result) {

  console.log(result); // 2
  return result * 3;

}).then(function(result) {

  console.log(result); // 6
  return result * 4;

});

In the above handlers, the result is passed to the chain of .then() handlers with the below work flow,

  • The initial promise resolves in 1 second,
  • After that .then handler is called by logging the result(1) and then return a promise with the value of result *
  • After that the value passed to the next .then handler by logging the result(2) and return a promise with result *
  • Finally the value passed to the last .then handler by logging the result(6) and return a promise with result *

What is promise.all?

Promise.all is a promise that takes an array of promises as an input (an iterable), and it gets resolved when all the promises get resolved or any one of them gets rejected. For example, the syntax of promise.all method is below,

Promise.all([Promise1, Promise2, Promise3]).then(result) => { 
  console.log(result) 
}).catch(error => console.log(`Error in promises ${error}`))

Note: Remember that the order of the promises(output the result) is maintained as per input order.



Back to blog

</html>
Wordpress Developer Loader, Web Developer Loader , Front End Developer Loader Jack is thinking