We use the Bind () method primarily to call a function with the this value set explicitly. It other words, bind () allows us to easily set which specific object will be bound to this when a function or method is invoked.
The this value in methods and functions must be set explicitly when you need a specific object bound to the function’s this value.
The need for bind usually occurs when we use the this keyword in a method and we call that method from a receiver object; in such cases, sometimes this is not bound to the object that we expect it to be bound to, resulting in errors in our applications.
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.
The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly. You create a closure by adding a function inside another function.
Closures have access to the outer function’s variable even after the outer function returns.
Closures store references to the outer function’s variables.
Closures have access to the updated values of the outer function’s variables, they can also lead to bugs when the outer function’s variable changes with a for loop. To fix this side effect (bug) in closures, you can use an Immediately Invoked Function Expression (IIFE).
In their simplest form, deferreds allow you to specify what will occur when a computation/task completes or fails. jQuery’s specific implementation allows you to register callback functions that will run if a deferred resolves successfully, if it is rejected with errors, or if it is notified of some “progress” towards a resolved state (more on that later).
The “Deferred” pattern describes an object which acts as a proxy for some unit of computation that may or may not have completed.
The pattern can apply to any asynchronous process: AJAX requests, animations or web workers to name a few.
Important to understand:
Deferreds can be passed around indefinitely, and callbacks can continue to be added during the entire lifetime of the deferred object.
The key to this behavior is callbacks registered with the deferred will run immediately if the deferred is already resolved.
You don’t need to worry if the asynchronous unit of computation (e.g. an AJAX request) is finished or not.
The main difference between NPM and Bower is the approach for installing package dependencies. NPM installs dependencies for each package separately, and as a result makes a big package dependency tree(node_modules/grunt/node_modules/glob/node_modules/…), where there could be several versions of the same package. For client-side JavaScript this is unacceptable: you can’t add two different versions for jQuery or any other library to a page.
With Bower each package is installed once(jQuery will always be in the bower components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won’t install the package incompatible with one that’s already installed.
Explain the same-origin policy with regards to JavaScript?
The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. Same-origin Policy is used as a means to prevent some of the Cross-site Request Forgery attacks.
The “origin” is the same if three things are the same: the protocol (http vs. https), the domain (subdomain.yoursite.com vs. yoursite.com vs. google.com), and the port (: 80 vs.: 4567). Using JS, we would be able to fetch resources (typically data like text,html,json,etc) using JSONP where we create a script tag dynamically with src attr pointing to the end source. Insert the script tag into the head section of the page. This will force the browser to fetch the end source similar to how it fetches any other JS or image via http.
To detect an iPad Mini in HTML5, you can use Javascript by inspecting all properties of the default browser objects. So for this device, the only property unique is :
screen.availWidth = 748
screen.availHeight = 1024
CommonJS is a project to define a common API and ecosystem for JavaScript. A part of CommonJS is the module specification. Node.js is a server-side JavaScript runtime and implements modules based on the CommonJS Module spec.
AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD.
One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously – that means that modules are only loaded as they are needed, as opposed to loading all modules up front.
AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment – for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browse.
Have you ever worked with retina graphics? If so, when and what techniques did you use?
On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:
i) Using alternate high resolution pixels
Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.
ii) Using @face-fonts instead of images icon
Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.
iii) Using SVG images instead of Bitmap images
Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.
iv) Using JavaScript to replace all the images with double sized image
We can use JavaScript to replace all images in a webpage but it will be a difficult task replacing each one of them by writing individual code.
What is the Difference between Grunt, NPM, Package and Bower?
Grunt: A Java Script task runner which can performrepetitive tasks like compilation, unit testing, minification, linting, etc to make our job easier.
NPM: Apackage manager for JavaScript. It manages dependencies for an application. It also allows users to install Node.js applications / modules that are available on the npm registry.
Package.json is a document you need to know about what application/modules you need to install. The most important things are the name and version fields, without whichthe package won’t install without them.
Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.
